Question

我正在制作汽车游戏并且需要我的汽车在重力下跳跃，但我不知道如何编码。

到目前为止我发现的所有演示都使用了球，我很难理解我需要将哪些代码应用到图像中。

我希望汽车在我点击鼠标时跳转然后显然会退回。然后左右移动汽车，它是A和D.

请有人帮帮我吗？
我的游戏网址为：http://users.aber.ac.uk/jae36/ftw/Crazy%20Road%20Trip%20Backup.html

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

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

Answer 1

收到输入后，您不应该发生事件。

在renderGame()中，你应该有一个功能（称为update()或animate()或其他），它可以满足所有可以让你的汽车变得有生气的条件。然后，您的所有输入都将设置此更新循环将用于执行实际动画的变量。

注意：时间戳和deltaTime都在毫秒中。您可能希望通过除以1000

将其转换为秒

var game = game || {}; //Give yourself an object to store stuff in.

function doKeyDown(evt) {
  switch (evt.keyCode) {
    case 65:
        bIsMoveLeft = true;
        break;
    case 68:
        bIsMoveRight = true;
    }
}

function doKeyUp(evt) {
  switch (evt.keyCode) {
    case 65:
        bIsMoveLeft = false;
        break;
    case 68:
        bIsMoveRight = false;
    }
}

function doMouseDown(evt) {
  //bCanJump will allow you to prevent infinite-jumps. Logic is for you to find out.
  if (bCanJump) {
    car.verticalSpeed = 500;
  }
}

function doMouseUp(evt) {
  //Nothing needed when mouse is released.
}

function update(deltaTime) {
  if (bIsMoveLeft) {
    if (carx - (deltaTime * speed) > 90) {
            carx -= (deltaTime * speed);
    } else {
      carx = 90;
    }
  }

  if (bIsMoveRight) {
    if (carx + (deltaTime * speed) < 800) {
            carx += (deltaTime * speed);
    }
  }

  //The requested jump logic.
  cary += (deltaTime * car.verticalSpeed);
  car.verticalSpeed += gravity; //Assuming gravity is negative.

  if (cary < 410) {
    car.verticalSpeed = 0;
    cary = 410;

    //Maybe unlock a second jump. Maybe have a cooldown or something.
  }
}

//requestAnimationFrame provides a timestamp.
function renderGame(timestamp) {
  window.requestAnimationFrame(renderGame);

  var deltaTime = timestamp - game.lastUpdate;
  game.lastUpdate = timestamp;

  update(deltaTime);

  //perform all of your necessary draws.
}

window.requestAnimationFrame(renderGame);
game.lastUpdate = window.performance.now();


window.addEventListener('keydown', doKeyDown, true);
window.addEventListener('keyup', doKeyUp, true);
window.addEventListener('mousedown', doMouseDown, true);
window.addEventListener('mouseup', doMouseUp, true);

这显然是不完整的...但它应该告诉你如何做与这个问题相关的部分。

修改

坚持你的旧例子......

doMouseDown()下方需要doKeyDown()功能。

function doMouseDown(evt) { dy = 500; //Adjust this. Also, declare var dy = 0; at the top. }

您需要window.addEventListener('mousedown', doMouseDown, true); window.addEventListener('keydown',doKeyDown,true);以下renderGame()才能在每次按下鼠标按钮时触发该事件。

然后，在renderGame()中，您需要了解自上次(function renderGame() { window.requestAnimationFrame(renderGame); context.clearRect(0, 0, W, H); ...电话以来经过的时间。事实证明，requestAnimationFrame以毫秒为单位为您提供非常高精度的当前时间。

(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; } ...你将拥有。

new = 'this is a bunch of words' new2 = 'this is another bunch of words' unique_words = set(new.split()) unique_words.update(new2.split()) sorted_unique_words = sorted(list(unique_words)) print('\n'.join(sorted_unique_words))

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

1 个答案: