Заставляем игрового персонажа ходить, Javascript - PullRequest
Новая
       5

Заставляем игрового персонажа ходить, Javascript

0 голосов
/ 03 октября 2018

Я пытаюсь сделать простую игру с ходячим персонажем.Когда кнопка нажата, я хочу непрерывно переключаться между двумя изображениями (пока кнопка удерживается), чтобы изображение выглядело так, как будто персонаж движется.Он движется, однако в начале переключение между изображениями происходит только один раз.Может кто-нибудь сказать мне, что я делаю не так?Или предложите способ сделать это.Застрял в этом в течение нескольких часов.

Любая помощь будет высоко ценится.

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

1 Ответ

0 голосов
/ 03 октября 2018

В вашей функции ходьбы вы назначаете вместо сравнения внутри оператора 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;
    }
}

Обратите внимание на тройное равенствовнутри условно.Это должно решить проблему с обменом изображениями.

...