javascript - 在我的贪吃蛇游戏中停止 setTimeout 循环？

Question

我制作了一个蛇游戏，当蛇撞到墙或撞到自己时，它仍然不会停止移动。我发现如果我使用 clearTimeout()，它会有所帮助。但它没有。有没有办法停止循环？或者这是另一个问题？

jQuery(document).ready(function($) {
    init();
});

var move;
function init() {
    board.initBoard();
    drawSnake();
    food.createFood();
}

function play() {
    $('.newGame').css('visibility', 'hidden');
    $('.playgame').css('visibility', 'hidden');
    moveSnake();
    getSnakeDir();
}

function gameover() {
    clearTimeout(move);
    $('.newGame').css('visibility', 'visible');
}

function playGame() {
    $('#gameboard').empty();
    $('.newGame').hide();
    init();
    play();
}

var board = {
    DIM: 20,
    initBoard: function() {
        for (var i = 0; i < board.DIM; i++) {
            var row = $('<div class="row-' + i + '"></div>');
            
            for (var j = 0; j < board.DIM; j++) {
                var col = ('<div class="col-' + j + '-' + i + '"></div>');
                $(row).append(col);
            }
            $("#gameboard").append(row);
        }
    }
}

var snake = {
    position: ['10-10', '10-11', '10-12'],
    direction: 'r',
    speed: 200,
};

function drawSnake() {
    $('.col-10-10').addClass('snake');
    $('.col-11-10').addClass('snake');
}

function getSnakeDir() {
    $(document).keydown(function(event) {
        //event.preventDefault();
        if (event.which == 38) {
            snake.direction = 'u';
        } else if (event.which == 39) {
            snake.direction = 'r';
        } else if (event.which == 40) {
            snake.direction = 'd';
        } else if (event.which == 37) {
            snake.direction = 'l';
        }
    });
}

function moveSnake() {
    var tail = snake.position.pop();
    $('.col-' + tail).removeClass('snake');

    var coords = snake.position[0].split('-');
    var x = parseInt(coords[0]);
    var y = parseInt(coords[1]);

    if (snake.direction == 'r') {
        x = x + 1;
    } else if (snake.direction == 'd') {
        y = y + 1;
    } else if (snake.direction == 'l') {
        x = x - 1;
    } else if (snake.direction == 'u') {
        y = y - 1;
    }
    
    var currentcoords = x + '-' + y;
    snake.position.unshift(currentcoords);

    $('.col-' + currentcoords).addClass('snake');

    //when snake eats food
    if (currentcoords == food.coords) {
        console.log('true');
        $('.col-' + food.coords).removeClass('food');
        snake.position.push(tail);
        food.createFood();
    }

    //game over
    if (x < 0 || y < 0 || x > board.DIM || y > board.DIM) {
        gameover();
    
    }

    //if snake touch itself
    if (hitItself(snake.position) == true) {
        gameover();
    }
    
    move=setTimeout(moveSnake, 200);
}

var food = {
    coords: "",

    createFood: function() {
        var x = Math.floor(Math.random() * (board.DIM-1)) + 1;
        var y = Math.floor(Math.random() * (board.DIM-1)) + 1;
        var fruitCoords = x + '-' + y;
        $('.col-' + fruitCoords).addClass('food');
        food.coords = fruitCoords;
    },
}

function hitItself(array) {
    var valuesSoFar = Object.create(null);
    for (var i = 0; i < array.length; ++i) {
        var value = array[i];
        if (value in valuesSoFar) {
            return true;
        }
        valuesSoFar[value] = true;
    }
    return false;
}

.buttonnewgame {
     position: relative;
}

.newGame {
    position: absolute;
    top: 45%;
    left: 25%;
    padding: 15px;
    font-size: 1em;
    font-family: arial;
    visibility: hidden;
}

.gameContainer{
    width: 100%;
}

#gameboard {
    background-color:#eee;
    padding:3px;
}

.playgame {
    position: absolute;
    top: 45%;
    left: 20%;
    padding: 15px;
    font-size: 1em;
    font-family: arial;    
}

/* styling the board */
div[class^='row'] {
    height: 15px;
    text-align: center;
}

div[class*='col']{
    display: inline-block;
    border: 1px solid grey;
    width: 15px;
    height: 15px;
}

/*display the snake*/
.snake {

    background-color: blue;
    z-index: 99;
}

.food {
    background: red;
    z-index: 99;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="game">
    <div class="buttonnewgame">
        <input type="button" name="new game" value="new game" class="newGame" onclick="playGame()" />
        <button class="playgame" onclick="play()">Play Game</button>
        <div class="gameContainer">
            <div id="gameboard">
                <!-- snake game in here -->
            </div>
        </div>
    </div>
</div>

Answer 1

有一些问题，但这里是“工作版本”(有更多错误)。

1) 我将drawSnake重命名为createSnake。当您调用 init() 时，您并没有完全重新初始化 snake。在之前的 drawSnake 方法中蛇的位置没有被重置，所以看起来游戏无法玩。

之后还有 2 个错误。

2) 您必须在调用 gameOver 后返回，否则游戏永远不会结束，对吗？在 gameover 中清除超时后，您会立即在 moveSnake() 的最后一行设置另一个超时，因为游戏结束后您没有返回。这会导致奇怪的结果，使游戏看起来没有响应。

3) 您正在使用 visibility none 或 visible 和 $.hide() 的组合。 $.hide() 使用 display: none，因此当您尝试通过更改 visibility 样式再次显示它时，它仍然是 display: none 因此新游戏按钮将停止出现。

我对任何游戏编码人员的建议是学习如何分离处理游戏工作方式的代码(游戏逻辑、时钟如何滴答、游戏状态初始化等)，以及它如何显示(html和 CSS)。在干净编写的系统之后对游戏逻辑进行建模很容易阅读和调试。当显示代码与游戏逻辑混合时，代码变得更难理解和修改。理论上，我们的游戏应该可以在没有任何渲染的情况下完美运行。然后我们可以编写一个渲染器来生成 HTML Canvas 、html DOM、命令行中的文本或 OpenGL。

这是一个我从未完成的旧项目，它应该说明模型和 View 之间的分离。

http://tando.us/ganix/ganix.htm

jQuery(document).ready(function($) {
    init();
});

var move;
function init() {
    board.initBoard();
    createSnake();
    food.createFood();
}

function play() {
    $('.newGame').hide();
    $('.playgame').hide();
    moveSnake();
    getSnakeDir();
}

function gameover() {
    clearTimeout(move);
    $('.newGame').show();
}

function playGame() {
    $('#gameboard').empty();
    $('.newGame').hide();
    init();
    play();
}

var board = {
    DIM: 20,
    initBoard: function() {
        for (var i = 0; i < board.DIM; i++) {
            var row = $('<div class="row-' + i + '"></div>');
            
            for (var j = 0; j < board.DIM; j++) {
                var col = ('<div class="col-' + j + '-' + i + '"></div>');
                $(row).append(col);
            }
            $("#gameboard").append(row);
        }
    }
}

var snake = {
    position: ['10-10', '10-11', '10-12'],
    direction: 'r',
    speed: 200,
};

function createSnake() {
    $('.col-10-10').addClass('snake');
    $('.col-11-10').addClass('snake');
    snake.position = ['10-10', '10-11', '10-12'];
}

function getSnakeDir() {
    $(document).keydown(function(event) {
        //event.preventDefault();
        if (event.which == 38) {
            snake.direction = 'u';
        } else if (event.which == 39) {
            snake.direction = 'r';
        } else if (event.which == 40) {
            snake.direction = 'd';
        } else if (event.which == 37) {
            snake.direction = 'l';
        }
    });
}

function moveSnake() {
    var tail = snake.position.pop();
    $('.col-' + tail).removeClass('snake');

    var coords = snake.position[0].split('-');
    var x = parseInt(coords[0]);
    var y = parseInt(coords[1]);

    if (snake.direction == 'r') {
        x = x + 1;
    } else if (snake.direction == 'd') {
        y = y + 1;
    } else if (snake.direction == 'l') {
        x = x - 1;
    } else if (snake.direction == 'u') {
        y = y - 1;
    }
    
    var currentcoords = x + '-' + y;
    snake.position.unshift(currentcoords);

    $('.col-' + currentcoords).addClass('snake');

    //when snake eats food
    if (currentcoords == food.coords) {
        console.log('true');
        $('.col-' + food.coords).removeClass('food');
        snake.position.push(tail);
        food.createFood();
    }

    //game over
    if (x < 0 || y < 0 || x > board.DIM || y > board.DIM) {
        gameover();
        return;
    
    }

    //if snake touch itself
    if (hitItself(snake.position) == true) {
        gameover();
        return;
    }
    
    move=setTimeout(moveSnake, 200);
}

var food = {
    coords: "",

    createFood: function() {
        var x = Math.floor(Math.random() * (board.DIM-1)) + 1;
        var y = Math.floor(Math.random() * (board.DIM-1)) + 1;
        var fruitCoords = x + '-' + y;
        $('.col-' + fruitCoords).addClass('food');
        food.coords = fruitCoords;
    },
}

function hitItself(array) {
    var valuesSoFar = Object.create(null);
    for (var i = 0; i < array.length; ++i) {
        var value = array[i];
        if (value in valuesSoFar) {
            return true;
        }
        valuesSoFar[value] = true;
    }
    return false;
}

.buttonnewgame {
     position: relative;
}

.newGame {
    position: absolute;
    top: 45%;
    left: 25%;
    padding: 15px;
    font-size: 1em;
    font-family: arial;
}

.gameContainer{
    width: 100%;
}

#gameboard {
    background-color:#eee;
    padding:3px;
}

.playgame {
    position: absolute;
    top: 45%;
    left: 20%;
    padding: 15px;
    font-size: 1em;
    font-family: arial;    
}

/* styling the board */
div[class^='row'] {
    height: 15px;
    text-align: center;
}

div[class*='col']{
    display: inline-block;
    border: 1px solid grey;
    width: 15px;
    height: 15px;
}

/*display the snake*/
.snake {

    background-color: blue;
    z-index: 99;
}

.food {
    background: red;
    z-index: 99;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="game">
    <div class="buttonnewgame">
        <input type="button" name="new game" value="new game" class="newGame" style="display:none;" onclick="playGame()" />
        <button class="playgame" onclick="play()">Play Game</button>
        <div class="gameContainer">
            <div id="gameboard">
                <!-- snake game in here -->
            </div>
        </div>
    </div>