точка останова не останавливает поток программы на приемнике событий - PullRequest
Новая
       50

точка останова не останавливает поток программы на приемнике событий

0 голосов
/ 12 января 2019

Привет всем, я делаю учебник по игре JS змея. Я хотел установить точку останова на прослушивателе событий, который прослушивал событие «keydown». Я хочу видеть все, что происходит после этого события. Таким образом, используя мои инструменты Chrome, я пометил ту строку, в которой был код. Затем я обновил страницу, чтобы увидеть, где программа останавливается; до загрузки HTML. Я хочу, чтобы моя игровая доска сначала загружалась, затем я хочу сделать паузу, когда нажимаю клавишу со стрелкой. Как мне это сделать? 

let food = {
    x : Math.floor(Math.random()*17+1) * box,
    y : Math.floor(Math.random()*15+3) * box
}

//create the score

let score = 0;

//control snake direction
document.addEventListener('keydown', direction);//ADD-BREAKPOINT-HERE-------------------------------------------------------------

//declare the global variable to hold the direction
let d;

function direction(event) {
    if(event.keyCode == 37 && d != 'RIGHT') {
        d = 'LEFT';
    }
    else if(event.keyCode == 38 && d != 'DOWN') {
        d = 'UP';
    }
    else if(event.keyCode == 39 && d != 'LEFT') {
        d = 'RIGHT';
    }
    else if(event.keyCode == 40 && d != 'UP') {
        d = 'DOWN';
    }
}

//draw the board
function draw() {
    //uses drawImage() method to draw background image to canvas
    ctx.drawImage(ground, 0, 0);

    for (let i = 0; i < snake.length; i++) {
        //use ternary operator if current iteration is of index 0 - style = green else style =  white
        ctx.fillStyle = (i === 0)? 'green' : 'white';
        // fill with chosen color
        ctx.fillRect(snake[i].x, snake[i].y, box, box);
        // set stroke or outline to red
        ctx.strokeStyle = 'red';
        // draw outline
        ctx.strokeRect(snake[i].x, snake[i].y, box, box);
    }
    //draw food image
    ctx.drawImage(foodImg, food.x, food.y);
    //draw score
    ctx.fillStyle = 'white';
    ctx.font = '45px Orbitron';
    ctx.fillText(score, 2 * box, 1.6 * box);

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

    //move to chosen direction
    if(d == 'LEFT') snakeX -= box;
    if(d == 'UP') snakeY -= box;
    if(d == 'RIGHT') snakeX += box;
    if(d == 'DOWN') snakeY += box;

    //remove the tail
    snake.pop();

    //create new head
    let newHead = {
        x : snakeX,
        y : snakeY
    }

    //add new head
    snake.unshift(newHead);
}

let game = setInterval(draw, 100);
<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Snake Game</title>
        <style>
            canvas{
                display: block;
                margin: 0 auto;
            }
        </style>
        <link href="https://fonts.googleapis.com/css?family=Orbitron" rel="stylesheet">
    </head>
    <canvas id="snake" width="608" height="608"></canvas>
    <script src="script.js"></script>
</html>

1 Ответ

0 голосов
/ 12 января 2019

Я думаю это , что вам нужно.

...