贪吃蛇小游戏（html、javascript）

显示效果：

代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>贪吃蛇游戏</title>
<style>
    body {
        margin: 0;
        padding: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh;
        background-color: #f0f0f0;
        position: relative;
    }

    canvas {
        border: 1px solid #000;
    }

    button {
        padding: 10px 20px;
        font-size: 18px;
        border: none;
        border-radius: 5px;
        background-color: #007bff;
        color: #fff;
        cursor: pointer;
        position: absolute;
        top: calc(50% + 40px);
        left: calc(50% - 60px);
    }
</style>
</head>
<body>
<canvas id="gameCanvas" width="400" height="400"></canvas>
<button id="startBtn">Start Game</button>
<script>
window.onload = function () {
    var canvas = document.getElementById("gameCanvas");
    var context = canvas.getContext("2d");

    var blockSize = 20;
    var widthInBlocks = canvas.width / blockSize;
    var heightInBlocks = canvas.height / blockSize;

    var score = 0;

    var snake = [];
    snake[0] = {
        x: Math.floor(widthInBlocks / 2),
        y: Math.floor(heightInBlocks / 2)
    };

    var apple = {
        x: Math.floor(Math.random() * widthInBlocks),
        y: Math.floor(Math.random() * heightInBlocks)
    };

    // 确保蛇和苹果的初始位置不同
    while (apple.x === snake[0].x && apple.y === snake[0].y) {
        apple = {
            x: Math.floor(Math.random() * widthInBlocks),
            y: Math.floor(Math.random() * heightInBlocks)
        };
    }

    var dx = 1; // 初始方向向右
    var dy = 0;

    function drawBlock(context, position, color) {
        var x = position.x * blockSize;
        var y = position.y * blockSize;
        context.fillStyle = color;
        context.fillRect(x, y, blockSize, blockSize);
    }

    function drawSnake() {
        for (var i = 0; i < snake.length; i++) {
            var color = (i === 0) ? "#00F" : "#00C";
            drawBlock(context, snake[i], color);
        }
    }

    function drawApple() {
        drawBlock(context, apple, "#F00");
    }

    function checkCollision(position, array) {
        return array.some(function (element) {
            return position.x === element.x && position.y === element.y;
        });
    }

    function gameOver() {
        clearInterval(intervalId);
        context.fillStyle = "#000";
        context.font = "30px Arial";
        context.fillText("Game Over!", canvas.width / 2 - 90, canvas.height / 2);
        startBtn.style.display = "block"; // 游戏结束后显示开始按钮
    }

    function drawScore() {
        context.fillStyle = "#000";
        context.font = "20px Arial";
        context.fillText("score: " + score, 5, 25);
    }

    function update() {
        context.clearRect(0, 0, canvas.width, canvas.height);

        drawSnake();
        drawApple();
        drawScore();

        var snakeX = snake[0].x;
        var snakeY = snake[0].y;

        snakeX += dx;
        snakeY += dy;

        // 检查蛇头是否与边界或蛇身相撞
        if (snakeX < 0 || snakeX >= widthInBlocks || snakeY < 0 || snakeY >= heightInBlocks || checkCollision({x: snakeX, y: snakeY}, snake)) {
            gameOver();
            return;
        }

        var newHead = {
            x: snakeX,
            y: snakeY
        };

        snake.unshift(newHead);

        // 如果蛇头与苹果重合，则得分加1，并重新生成苹果
        if (snakeX === apple.x && snakeY === apple.y) {
            score++;
            apple = {
                x: Math.floor(Math.random() * widthInBlocks),
                y: Math.floor(Math.random() * heightInBlocks)
            };
        } else {
            // 否则蛇尾移除
            snake.pop();
        }
    }

    document.addEventListener("keydown", function (e) {
    if (e.keyCode === 37 && dx === 0) {
        dx = -1; // 左
        dy = 0;
    } else if (e.keyCode === 38 && dy === 0) {
        dx = 0;
        dy = -1; // 上
    } else if (e.keyCode === 39 && dx === 0) {
        dx = 1; // 右
        dy = 0;
    } else if (e.keyCode === 40 && dy === 0) {
        dx = 0;
        dy = 1; // 下
    }
});

    var intervalId; // 游戏循环间隔ID

    startBtn.addEventListener("click", function() {
        // 点击开始按钮后隐藏按钮，并开始游戏循环
        this.style.display = "none";
        // 重置游戏状态
        score = 0;
        snake = [{ x: Math.floor(widthInBlocks / 2), y: Math.floor(heightInBlocks / 2) }];
        dx = 1;
        dy = 0;
        intervalId = setInterval(update, 150); // 调整蛇的移动速度
    });
};
</script>
</body>
</html>