Question

这里我创建了一个草对象，它有两个方法jump和fall.it当用户按下键盘上的向上键时跳转。跳跃，它没问题。但是我希望它回落到之前的位置.. < / p>

我创建了一个keypressed变量，其值为false.it将确定对象跳转的边界。

每次跳跃后，物体应该回到原来的位置。我无法做到这一点。跳也不够现实 ......这些问题怎么解决

完整代码：

<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>

Answer 1

以下是您想要的简单版本：http://jsfiddle.net/B2SL5/

这里的关键是使用requestAnimationFrame（或者，您可以使用setInterval）。我们每帧重绘草（大约每秒60次）。这样，当草移动时（我们调用grass.y--将其移动），它将显示在屏幕上。然后，我们有一个velocity变量来跟踪我们的速度。

Answer 2

这可以通过插入现有的easing或根据您的喜好导出的一个来解决，并通过重复增加函数的自变量来应用它。

我建议在这里搞乱：http://www.timotheegroleau.com/Flash/experiments/easing_function_generator.htm

只是抬头。这可能很快变得复杂。

PS：我无法提供准确的解决方案，因为这些内容非常主观。

为对象创建跳跃效果

2 个答案: