Question

我不知道为什么我的代码不允许我正常跳转。我可以向左和向右移动，但是当我尝试使用向上箭头跳跃时，它会让我达到一个随机的高度，我不会倒退。

我正在尝试构建平台游戏并获得所需的基本代码。

这是我的JavaScript：

var canvas = document.getElementById("mainCanvas");
var context = canvas.getContext("2d");

var keys =[];

var width = 500,
    height = 400,
    speed = 4,
    jumpHeight = 10,
    gravity = 10.0,
    velocity = null;

var player= {
    x:0,
    y:380,
    width:20,
    height:20,
    speed:4,
    velX:0,
    velY:0,
    jumpBoo:false,
};


window.addEventListener("keydown", function(e){
    keys[e.keyCode] = true;
}, false);
window.addEventListener("keyup", function(e){
    delete keys[e.keyCode];
}, false);

/*
    keys
    up-38
    down-40
    right-39
    left-37
*/
function game(){
    update();
    render();
}
function jump(){
    if(keys[38]){
        if(player.y=250){
            player.y+=speed*5;
        }
        if(player.y<250){
            player.y-=speed*3;
        }
    }
}
function update(){
    jump();
    if(keys[37]) player.x-=speed;
    if(keys[39]) player.x+=speed;

    if(player.x <0) player.x=0;
    if(player.y <0) player.y=0;
    if(player.x >= width - player.width) player.x = width - player.width;
    if(player.y >= height - player.height) player.y = height - player.height;
    if(player.y >= height-player.height){
        player.y = height - player.height;
    }
}
function render(){
    context.clearRect(0,0,width,height);
    context.fillRect(player.x, player.y, player.width, player.height);
}
setInterval(function(){
    game();
}, 1000/30);

我的HTML：

<html>
    <head>
        <meta charset="UTF-8"/>
        <title>Game</title>
        <link rel="stylesheet" type="text/css" href="style.css"/>
    </head>
    <body>
        <canvas id="mainCanvas" width="500" height="400"></canvas>
        <script type="text/javascript" src="script.js"></script>
    </body>
</html>

我的CSS：

#mainCanvas{
    background-color: #bcbcbc;
}

Answer 1

你的跳跃功能有些问题。

而不是if(player.y=250){，您应该使用if(player.y==250){

此外，逻辑存在问题，您希望在用户按键时减少y的值，并在用户增加时增加y的值没有按下键就像这样回去：

function jump(){
    if(keys[38]){
        if(player.y>250){
            player.y-=speed*3;
        }
    } else if(player.y<380){
        player.y+=speed*5;
    }
}

仅使用JavaScript创建跳转动画

1 个答案: