Javascript 将重力应用于玩家（图像）

我正在做一个汽车游戏，需要我的汽车在重力作用下跳跃，尽管我不知道如何编写代码

到目前为止，我发现的所有演示都使用了balls，我正在努力理解将其应用于图像所需的代码位

当我点击鼠标时，我想让汽车跳跃，然后明显地落下。然后左右移动汽车，它是A和D

有人能帮我吗
我的游戏URL是：

我目前整个游戏的代码如下：

<script>

    var context = document.getElementById('canv').getContext("2d");
    var roadx = 0;
    var backgroundx = 0;
    var dx = 10;
    var combinex = 0;
    var W = canv.width;
    var H = canv.height;
    var carx = 180;
    var cary = 410;
    var score = 0;

    var canvback = new Image();
    canvback.src = "canvback.png";

    var canvroad = new Image();
    canvroad.src = "canvroad.png";

    var car = new Image();
    car.src = "car2.png";

    var rock = new Image();
    rock.src = "rock.png";

    var combine = new Image();
    combine.src = "combine.png";

    (function renderGame() {
        window.requestAnimationFrame(renderGame);
        context.clearRect(0, 0, W, H);

        context.drawImage(canvback, backgroundx, 0);
        context.drawImage(canvback, canvback.width-Math.abs(backgroundx), 0);
        context.drawImage(canvroad, roadx, 465);
        context.drawImage(canvroad, canvroad.width-Math.abs(roadx), 465);
        context.drawImage(combine, canv.width-Math.abs(combinex)+200, 420);

        if (Math.abs(backgroundx) > canvback.width) {
            backgroundx = 0;
        }

        backgroundx -= 0.5;

        if (Math.abs(roadx) > canvroad.width) {
            roadx = 0;
        }

        roadx -= 4;


        if (Math.abs(combinex) > context.canvas.width+600) {
            combinex = 0;
        }

        combinex -= 2;


        context.drawImage(car, carx, cary);

        scoring();
        context.font = "17px Times New Roman";
        context.fillStyle = "black";
        context.fillText("Score = " + score, 20, 30);
    }());

    function init() {
        canv = document.getElementById("canv");
        ctx = canv.getContext("2d");
        return setInterval(drawcar, 10);
    }

    function doKeyDown(evt){
        switch (evt.keyCode) {
        case 65:
            if (carx - dx > 90) {
                carx -= dx;
            }
            break;
        case 68:
            if (carx + dx < 800) {
                carx += dx;
            }
        }
    }


    function drawcar() {

        context.drawImage(car, carx, cary);
    }

    init();
    window.addEventListener('keydown',doKeyDown,true);

    function scoring() {
        setInterval(scores, 100);
    }

    function scores(){
        score += 0.001;
    }

</script>

var context=document.getElementById（'canv'）.getContext（“2d”）；
var-roadx=0；
var-backgroundx=0；
var dx=10；
var-combinex=0；
var W=canv.宽度；
var H=canv高度；
var-carx=180；
var-cary=410；
var得分=0；
var canvback=新图像（）；
canvback.src=“canvback.png”；
var canvroad=新图像（）；
canvroad.src=“canvroad.png”；
var car=新图像（）；
car.src=“car2.png”；
var rock=新图像（）；
rock.src=“rock.png”；
var combine=新图像（）；
combine.src=“combine.png”；
（函数renderGame（）{
window.requestAnimationFrame（renderGame）；
clearRect（0，0，W，H）；
drawImage（canvback，backgroundx，0）；
context.drawImage（canvback，canvback.width Math.abs（backgroundx），0）；
背景。drawImage（canvroad，roadx，465）；
背景图（canvroad，canvroad.width Math.abs（roadx），465）；
context.drawImage（combine，canv.width Math.abs（combinex）+200420）；
if（Math.abs（backgroundx）>canvback.width）{
背景x=0；
}
背景x-=0.5；
if（数学防抱死制动系统（roadx）>canvroad.width）{
roadx=0；
}
roadx-=4；
if（Math.abs（combinex）>context.canvas.width+600）{
combinex=0；
}
combinex-=2；
背景。drawImage（car、carx、cary）；
评分（）；
context.font=“17px时代新罗马”；
context.fillStyle=“黑色”；
context.fillText（“Score=“+Score，20,30”）；
}());
函数init（）{
canv=document.getElementById（“canv”）；
ctx=canv.getContext（“2d”）；
返回设置间隔（牵引车，10）；
}
功能doKeyDown（evt）{
开关（evt.keyCode）{
案例65：
如果（carx-dx>90）{
carx-=dx；
}
打破
案例68：
如果（carx+dx<800）{
carx+=dx；
}
}
}
函数drawcar（）{
背景。drawImage（car、carx、cary）；
}
init（）；
window.addEventListener（'keydown'，doKeyDown，true）；
功能评分（）{
设置间隔（分数100）；
}
函数分数（）{
得分+=0.001；
}

您不应该在收到输入时使事件发生

在

renderGame（）。然后，所有输入将设置此更新循环将用于执行实际动画的变量

注意：时间戳和deltaTime的单位为毫秒。您可能希望将其除以1000，将其转换为秒

然后需要
window.addEventListener（'mousedown'，doMouseDown，true）窗口。addEventListener（'keydown'，doKeyDown，true）
使该事件在每次按下鼠标按钮时触发

然后，在
renderGame（）
中，您需要获得自上次
renderGame（）调用以来经过的时间。事实证明，requestAnimationFrame以毫秒为单位提供了非常高的精度的当前时间

(function renderGame() {
  window.requestAnimationFrame(renderGame);
  context.clearRect(0, 0, W, H);
  ...

变成：

(function renderGame(time) {
  window.requestAnimationFrame(renderGame);
  var deltaTime = time - window.lastTime;
  window.lastTime = time;

  context.clearRect(0, 0, W, H);
  ...

稍后在
renderGame（time）
中，您将拥有

...

cary += deltaTime * dy;
dy += -10; //Adjust this number in testing.

if (cary < 410) {
  dy = 0;
  cary = 410;
}

...

。。。
cary+=deltaTime*dy；
dy+=-10//在测试中调整此数字。
如果（卡里<410）{
dy=0；
cary=410；
}
...
更清楚地说明：
汽车。垂直速度是确定汽车应该以多快的速度向上移动的值。在路上，这将是0。当鼠标按钮将垂直速度更改为某个值时，现在假设为500，汽车将随着每帧开始爬升。同时，重力（比如说-10，尽管我在答案中没有定义它）会减慢它的爬升速度，并最终把它拉下来。当它击中时，
汽车。垂直速度将再次为0。根据需要调整数字。顺便说一句，地球重力是
-9.8米/秒^2
。谢谢你的帮助，但我不知道该用什么代码。。这是一项任务，最后期限是11小时。基本上，你需要一个mousedown事件来启动一个函数，该函数将垂直速度设置为某个可以使汽车上升的速度（我称之为car.verticalSpeed，但
dy
更适合你的命名方案）。然后，每次调用
renderGame（）
时，您都需要通过该垂直速度变量来调整
cary
。此外，每次调用
renderGame（）
，您还需要通过一定的重力降低垂直速度变量。这与我的答案中的代码不同，我还修复了来回移动。Mousedown：设置初始
dy
renderGame（）
使用
dy
调整
cary
少量，然后使用
gravity
值调整
dy
直到汽车开始坠落并最终着陆。很抱歉，我不知道如何启动此功能。。我需要重新编写代码。。我只是没有技能和时间。。谢谢你的麻烦。
(function renderGame(time) {
  window.requestAnimationFrame(renderGame);
  var deltaTime = time - window.lastTime;
  window.lastTime = time;

  context.clearRect(0, 0, W, H);
  ...

...

cary += deltaTime * dy;
dy += -10; //Adjust this number in testing.

if (cary < 410) {
  dy = 0;
  cary = 410;
}

...