javascript - create jumping effect for an object -
here created grass object , has 2 methods jump , fall.it jumps when user presses key on keyboard.it jumps ,its alright.but want fall previous position..
i have created keypressed variable value either true of false.it determine boundary how high object can jump.
the object should fall previous position after each jump.which can't manage do..also jump not realistic enough...how problems can solved
full code:
<html> <body> <canvas id="mycanvas"></canvas> <script> var canvas=document.getelementbyid("mycanvas"); var ctx=canvas.getcontext('2d'); canvas.width=500; canvas.height=500; canvas.style.border="1px solid black"; var keypressed=true; var img=new image(); img.src="grass.jpg"; function grass(x,y){ this.x=x; this.y=y; this.image=img; } grass.prototype.draw=function(){ ctx.drawimage(this.image,this.x,this.y); } grass.prototype.hop=function(){ this.y-=200; keypressed=false; } grass.prototype.fall=function(){ this.y+=200; keypressed=true; } var grass1=new grass(30,450); grass1.draw(); document.addeventlistener('keydown',function(e){ ctx.clearrect(0,0,canvas.width,canvas.height); if(keypressed && e.keycode=='38'){ grass1.hop(); } if(grass1.y<0){ return false; }else{ grass1.draw(grass1.x,grass1.y); } },false); </script> </body> </html>
here simple version of want: http://jsfiddle.net/b2sl5/
the key here use requestanimationframe (alternatively, use setinterval). redraw grass every frame (about 60 times second). way, when grass moves (we call grass.y-- move down), shows on screen. then, have velocity variable keep track of how fast we're going.
Comments
Post a Comment