javascript - Creating a bouncing box animation on canvas -



javascript - Creating a bouncing box animation on canvas -

i need create animation of dropping box, supposed bounce 10 times when reaches y point on canvas, each time twice lower previous. have animation of dropping box, can't create bounce work. here functions wrote:

function dropbox(y, width, height) { var img_box = new image(); img_box.src = 'images/gift_box_small.png'; var box_y_pos = y; if(y==0) box_y_pos = y-img_box.naturalheight; img_box.onload = function(){ ctx_overlay.save(); ctx_overlay.clearrect(0,0,width,height); ctx_overlay.drawimage(img_box, (width/2)-(img_box.naturalwidth/2), box_y_pos); ctx_overlay.restore(); } box_y_pos += 3; var box_bottom_position = box_y_pos - img_box.naturalheight; if(box_y_pos+img_box.naturalheight<height-25) var looptimer = settimeout(function() {dropbox(box_y_pos, width, height)},24); else bouncebox(img_box, box_y_pos, box_y_pos, (height/2)-(img_box.naturalheight/2), "up"); } function bouncebox(img, img_final_pos, y, midway_pos, direction){ var midway = midway_pos; var direction = direction; var img_y_pos = y; img.onload = function(){ ctx_overlay.save(); ctx_overlay.clearrect(0,0,docwidth,docheight); ctx_overlay.drawimage(img, (docwidth/2)-(img.naturalwidth/2), img_y_pos); ctx_overlay.restore(); } for(var = 0; < 10; i++){ if(direction=="up"){ //going if(img_y_pos>midway_){ img_y_pos -= 3; var looptimer = settimeout(function() {bouncebox(img, img_final_pos, img_y_pos, midway_pos, "up")},24); } else { img_y_pos += 3; midway = math.floor(midway /= 2); if(midway%2>0) midway += 1; var looptimer = settimeout(function() {bouncebox(img, img_final_pos, img_y_pos, midway_pos, "down")},24); } } else { //going downwards if(img_y_pos < img_final_pos){ img_y_pos += 3; var looptimer = settimeout(function() {bouncebox(img, img_final_pos, img_y_pos, midway_pos, "down")},24); } } } }

jsfiddle: http://jsfiddle.net/n2derqgw/3/

why isn't working , how can create work?

to avoid getting headache, you've improve handle animation within single function called setinterval. , maintain animation-related info in 1 object. code below not want, should started :

http://jsfiddle.net/n2derqgw/4/

setup :

var canvas_overlay, ctx_overlay, docwidth, docheight; var img_box = new image(); img_box.src = 'http://corkeynet.com/test/images/gift_box_small.png'; var mustbereadycount = 2; // must load image , window img_box.onload = launchwhenready; window.onload = launchwhenready; var animationstep = ''; var boxanimationdata = { animationstep: '', y: 0, maxy: 0, bouncecount: 6, direction: -1, bounceheight: 0 }; function launchwhenready() { mustbereadycount--; if (mustbereadycount) return; docwidth = window.innerwidth; docheight = window.innerheight; canvas_overlay = document.getelementbyid('canvas_overlay'); ctx_overlay = canvas_overlay.getcontext('2d'); resizecanvas(docwidth, docheight); boxanimationdata.animationstep = 'falling'; boxanimationdata.bounceheight = docheight / 2 - img_box.height; setinterval(animatebox, 30); };

more interesting code here :

function animatebox() { if (boxanimationdata.animationstep == 'falling') dropbox(); else if (boxanimationdata.animationstep == 'bouncing') bouncebox(); } function dropbox() { ctx_overlay.clearrect(0, 0, docwidth, docheight); boxanimationdata.y += 3; if (boxanimationdata.y + img_box.height > docheight) { boxanimationdata.animationstep = 'bouncing'; } ctx_overlay.drawimage(img_box, (docwidth / 2) - (img_box.width / 2), boxanimationdata.y); } function bouncebox() { ctx_overlay.clearrect(0, 0, docwidth, docheight); boxanimationdata.y += boxanimationdata.direction * 3; if (boxanimationdata.y + img_box.height > docheight) { // reached floor ? swap direction boxanimationdata.direction *= -1; // , cut down jump height boxanimationdata.bounceheight *= 3 / 2; boxanimationdata.bouncecount--; if (!boxanimationdata.bouncecount) boxanimationdata.animationstep = ''; } else if (boxanimationdata.y < boxanimationdata.bounceheight) { boxanimationdata.direction *= -1; } ctx_overlay.drawimage(img_box, (docwidth / 2) - (img_box.width / 2), boxanimationdata.y); }

javascript animation canvas html5-canvas

Comments

Post a Comment

Popular posts from this blog

java Multi query from Mysql using netbeans -

java Multi query from Mysql using netbeans - i have java code retrieve info mysql appropriate code in netbeans.the code below. want multi query such illustration finding total number of products , on.could help me please. in advance import java.sql.*; public class javamysqlselectexample { public static void main(string[] args) { seek { string mydriver = "com.mysql.jdbc.driver"; string myurl = "jdbc:mysql://localhost/sample"; class.forname(mydriver); connection conn = drivermanager.getconnection(myurl, "root", "mypasscode1"); string query = "select * products"; statement st = conn.createstatement(); resultset rs = st.executequery(query); while (rs.next()==true) { int code = rs.getint("code"); string productname = rs.getstring("product_name"); string producttype = rs.getstring("product_type"); system.out.format(" %d, %s, %s\n", code, pr
Read more

c# - DotNetZip fails with "stream does not support seek operations" -

c# - DotNetZip fails with "stream does not support seek operations" - i using dotnetzip in c# unzip stream follows: public static void unzipfromstream(stream stream, string outdir) { //omit seek grab block using (zipfile zip = zipfile.read(stream)){ foreach (zipentry e in zip){ e.extract(outdir, extractexistingfileaction.overwritesilently); } } } stream obtained using webclient client = new webclient(); stream fs = client.openread(url); however, got next exception exception during extracting zip stream system.notsupportedexception: stream not back upwards seek operations. @ system.net.connectstream.get_position() @ ionic.zip.zipfile.read(stream zipstream, textwriter statusmessagewriter, encoding encoding, eventhandler`1 readprogress) on server side(asp.net mvc 4), returning filepathresult or filestreamresult both caused exception. should obtain stream differently on client side? or how create server homec
Read more

c++ - StartServiceCtrlDispatcher don't can access 1063 error -

c++ - StartServiceCtrlDispatcher don't can access 1063 error - i write on c++ service , have error, , don't can fixed it. my service main function int main (int argc, tchar *argv[]) {dword f; for(int i=0;i<113;i++) f = getlasterror(); servicepath = lptstr(argv[0]); outputdebugstring(_t("my sample service: main: entry")); //installservice(); service_table_entry servicetable[] = { {service_name, (lpservice_main_function) servicemain}, {null, null} }; // startservice(); if(!startservicectrldispatcher(servicetable)) { f = getlasterror(); //addlogmessage("error: startservicectrldispatcher"); } else if( memcmp(argv[argc-1],"install",7)) { installservice(); } else if( memcmp(argv[argc-1],"remove",6)) { removeservice(); } else if( memcmp(argv[argc-1],"start",5)) { startservice(); } else if( memcmp(argv[argc-1],"stop",4))
Read more