让游戏角色行走，Javascript

Question

我正在尝试制作一个带有行走角色的简单游戏。当按下一个按钮时，我想在两个图像之间连续切换（当按钮被按住时），这将使它看起来像角色在移动。它确实移动了，但是图片之间的切换只在开始时发生一次。谁能告诉我我做错了什么？或者建议一种方法。坚持了几个小时。

任何帮助将不胜感激。

<!DOCTYPE html>
<html>
<head>
    <link href="./styles/style.css" rel="stylesheet" type="text/css"><link>
    <meta charset="utf-8" />
    <title>Playa Haters</title>
    <style>
     * { padding: 0; margin: 0; }
    </style>
</head>
<body>

<canvas id="myCanvas" width="800" height="450"></canvas>
<img id="step1" src="media/step1.jpg" width="120" height="150">
<img id="step2" src="media/step2.jpg" width="120" height="150">

<script>
    var canvas = document.getElementById("myCanvas");
    var ctx = canvas.getContext("2d");  //get content 

    var step1 = document.getElementById("step1");
    var step2 = document.getElementById("step2");
    var currentStep =  step1;

    document.addEventListener("keydown", keyDownHandler, false);
    document.addEventListener("keyup", keyUpHandler, false);
    
    var rightPressed = false;
    var leftPressed = false;
    var step = 5;
    var distance = null;

    function keyDownHandler(e) {
        if(e.keyCode == 39){
            rightPressed = true;
        }
        else if(e.keyCode = 37){
            leftPressed = true;
        }
    }

    function keyUpHandler(e) {
    if(e.keyCode == 39) {
        rightPressed = false;
    }
    else if(e.keyCode == 37) {
        leftPressed = false;
        }
    }

    //initial position
    var x = canvas.width/2;
    var y = canvas.height/2 - 100;

    function drawShooter(){
        ctx.drawImage(currentStep, x, y);
    }

    function walk(){
        if (currentStep = step1){
            currentStep = step2;
        }
        else if (currentStep = step2){
            currentStep = step1;
        }
    }

    function draw(){
        ctx.clearRect(0, 0, canvas.width, canvas.height); 
        drawShooter();
        if(rightPressed) {
        x += step;
        setInterval(walk, 500);
        } 
        else if(leftPressed) {
        x -= step;
        setInterval(walk, 500);
        } 
    }

    setInterval(draw, 20);

</script>

</body>
</html>

Answer 1

在您的 walk 函数中，您正在分配而不是在 if 语句中进行比较...您有：

function walk(){
    if (currentStep = step1){
        currentStep = step2;
    }
    else if (currentStep = step2){
        currentStep = step1;
    }
}

你应该改为：

function walk(){
    if (currentStep === step1){
        currentStep = step2;
    }
    else if (currentStep === step2){
        currentStep = step1;
    }
}

注意条件语句中的三重等号。这应该可以解决交换图像的问题。

让游戏角色行走，Javascript

Making game character walk, Javascript

html

javascript

game-development