Время setInterval увеличивается при каждом нажатии - PullRequest
Новая
       10

Время setInterval увеличивается при каждом нажатии

0 голосов
/ 11 декабря 2018

Я создал простую игру со змеями, используя HTML5 и Javascript.Я добавил кнопку, чтобы начать / приостановить игру.Но проблема в том, что всякий раз, когда я делаю паузу и запускаю игру, нажимая кнопку, скорость змеи увеличивается.Я новичок в JavaScript.Так что я не знаю точно, как работает функция setinterval.Код ниже:

snake.html 

<!DOCTYPE html>
<html>
<head>
    <title>Snake game</title>
    <style type="text/css">
        #snakeBoard {
            background-color: black;
        }
        #score {
            text-align: left;
            font-size: 40px;
            font-family: 'Arial', 'Helvetica', sans-serif;
      }
    </style>
</head>
<body>
    <div id="score">0</div>
    <canvas id="snakeBoard" width="250" height="250"></canvas>
    <script type="text/javascript" src="snake.js"></script>
    <div><button type="submit" id="play" onclick="javascript:game();">Play</button></div>

</body>
</html>

snake.js 

var play = document.getElementById("play");
var isPaused = false;
function game() {
        setInterval(draw,200);
        isPaused = !isPaused;
    }

    var canvas = document.getElementById("snakeBoard");
    var cxt = canvas.getContext("2d");

    var canvasW = canvas.width;
    var canvasH = canvas.height;

    var snakeW = 10;
    var snakeH = 10;

    var score = 0;

    // deafult direction
    var direction = "right";


    //to color snake
    function drawSnake (x, y) {
        cxt.fillStyle = "#FFF";
        cxt.fillRect(x*snakeW,y*snakeH,snakeW,snakeH);

        cxt.strokeStyle = "#000";
        cxt.strokeRect(x*snakeW,y*snakeH,snakeW,snakeH);
    }

    //drawSnake(4,4);

    //create snake as array. By default contains four cells
    var len = 4;
    var snake = [];

    for(var i = len-1; i>=0; i--) {
        snake.push({x:i, y:0});
    }

    //create food   
        food = {
            x: Math.round(Math.random()*(canvasW/snakeW-2)+1),
            y: Math.round(Math.random()*(canvasH/snakeH-2)+1)
        };


    function createFood (x,y) {

        for (var i=0; i<snake.length; i++) {
            if (x==snake[i].x && y==snake[i].y) {
                food = {
                    x: Math.round(Math.random()*(canvasW/snakeW-2)+1),
                    y: Math.round(Math.random()*(canvasH/snakeH-2)+1)
                };
                createFood(food.x, food.y);
            }

        }

        cxt.fillStyle = "red";
        cxt.fillRect(x*snakeW,y*snakeH,snakeW,snakeH);

        cxt.strokeStyle = "#000";
        cxt.strokeRect(x*snakeW,y*snakeH,snakeW,snakeH);
    }

    //add user inputs
    document.addEventListener("keydown",getDirection);

    function getDirection(e) {
        if (e.keyCode == 37 && direction != "right") {
            direction = "left";
        } else if (e.keyCode == 38 && direction != "down") {
            direction = "up";
        } else if (e.keyCode == 39 && direction != "left") {
            direction = "right";
        } else if (e.keyCode == 40 && direction != "up") {
            direction = "down";
        }
    }

    // check when the snake hits itself
    function checkSelfHit(x,y,snakeArray) {
        // for(var i=0; i<snakeArray.length-2; i++) {
        //  if(snakeArray[snakeArray.length-1].x==snakeArray[i].x && snakeArray[snakeArray.length-1].y==snakeArray[i].y) {
        //      return true;
        //  }
        //  return false;
        // }
        for (var i=0; i<snakeArray.length; i++) {
            if(x==snakeArray[i].x && y==snakeArray[i].y) {
                return true;
            }

        }
        return false;

    }

     // function drawScore(score) {
        // cxt.fillStyle = "blue";
        // cxt.fillText("Score: ",10,50);
     // }

    function draw() {

        if (isPaused) {
            return;
        }

        cxt.clearRect(0,0,canvasW,canvasH);
        for(var i=0; i<snake.length; i++) {
            var x = snake[i].x;
            var y = snake[i].y;
            drawSnake(x,y);
        }


        createFood(food.x, food.y);


        // snake head
        let snakeX = snake[0].x;
        let snakeY = snake[0].y;


        if (direction == "left") snakeX--;
        else if (direction == "up") snakeY--;
        else if (direction == "right") snakeX++;
        else if (direction == "down") snakeY++;

        // if the snake hits the wall....... and for self hit checkSelfHit(snakeX,snakeY,snake)
        if (snakeX < 0 || snakeY < 0 || snakeX >= canvasW/snakeW || snakeY >= canvasH/snakeH || checkSelfHit(snakeX,snakeY,snake)) {
            return;
        }


        if (snakeX == food.x && snakeY == food.y) {
            let newHead = {x: snakeX, y: snakeY};
            snake.unshift(newHead);
            score++;
            food = {
                x: Math.round(Math.random()*(canvasW/snakeW-2)+1),
                y: Math.round(Math.random()*(canvasH/snakeH-2)+1)
            }


        }
        else {
            // remove tail
            snake.pop();
            let newHead = {x: snakeX, y: snakeY};
            snake.unshift(newHead);
        }


        document.getElementById('score').innerHTML = score;

    }

Также это мойпервый игровой проект и первый проект javascript.Так что любые другие входные данные или ошибки в коде приветствуются.Примечание: пожалуйста, игнорируйте некоторые комментарии в файле js.Это были мои ошибки.Для справки.

1 Ответ

0 голосов
/ 11 декабря 2018

Поскольку @fredrik уже настроен, вы создаете новый интервал с каждым выполнением game.

Один из способов - это контролировать интервал, сохранив его в переменной и очистив его перед созданием нового:

var play = document.getElementById("play");
var isPaused = false;
var ticker = null;
function game() {
    if (ticker) {
        clearInterval(ticker);
        ticker = null;
    } else {
        ticker = setInterval(draw,200);
    }
    // isPaused = !isPaused; No need for this anymore
}

// ....

Другой способ - позволить isPaused выполнять всю работу следующим образом: 

var play = document.getElementById("play");
var isPaused = true; // should be paused before clicking “play” in this case
var ticker = setInterval(draw,200);
function game() {
    isPaused = !isPaused;
}

// ....
...