Javascript 为对象创建跳跃效果_Javascript

Javascript 为对象创建跳跃效果

javascript

Javascript 为对象创建跳跃效果,javascript,Javascript,在这里，我创建了一个草对象，它有两种方法跳跃和下降。当用户按下键盘上的向上键时，它会跳跃。它跳跃，没关系。但我希望它回落到以前的位置我创建了一个按键变量，该变量的值要么为真，要么为假。它将确定对象可以跳多高的边界每次跳转后，对象应返回到其以前的位置。我无法做到这一点。跳转也不够现实。…如何解决此问题完整代码： <html> <body> <canvas id="mycanvas"></canvas> <script> var

在这里，我创建了一个草对象，它有两种方法跳跃和下降。当用户按下键盘上的向上键时，它会跳跃。它跳跃，没关系。但我希望它回落到以前的位置

我创建了一个按键变量，该变量的值要么为真，要么为假。它将确定对象可以跳多高的边界

每次跳转后，对象应返回到其以前的位置。我无法做到这一点。跳转也不够现实。…如何解决此问题

完整代码：

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


var canvas=document.getElementById（“mycanvas”）；
var ctx=canvas.getContext（'2d'）；
画布宽度=500；
帆布。高度=500；
canvas.style.border=“1px纯黑”；
var键按下=真；
var img=新图像（）；
img.src=“grass.jpg”；
功能草（x，y）{
这个.x=x；
这个。y=y；
这个.image=img；
}
grass.prototype.draw=function（）{
ctx.drawImage（this.image，this.x，this.y）；
}
grass.prototype.hop=function（）{
这个.y-=200；
按键=假；
}
grass.prototype.fall=function（）{
这个.y+=200；
按键=真；
}
var grass1=新草（30450）；
图1.draw（）；
文档.添加的事件列表器（'keydown'，函数（e）{
clearRect（0,0，canvas.width，canvas.height）；
如果（按下键（&e.keyCode=='38'）{
草1.啤酒花（）；
}
如果（grass1.y，则可以通过插值现有的easing
或根据您的喜好导出的值来解决此问题，并通过反复增加函数的自变量来应用该值
我建议在这里混日子：
只是提醒一下。这会很快变得复杂
PS：我无法提供一个精确的解决方案，因为这类问题非常主观。
以下是您想要的简单版本：
这里的关键是使用requestAnimationFrame
（或者，您可以使用setInterval）。我们每帧重新绘制一次草（大约每秒60次）。这样，当草移动时（我们调用grass.y--
将其向下移动），它显示在屏幕上。然后，我们有一个velocity
变量来跟踪我们的速度。
检查函数setInterval。这应该有助于下降/跳跃的动画。请建议一些合适的标记。我使用对象构造函数创建对象。所以我想我应该使用标记！！@KJPrice我使用了setInterval.但不影响代码。