方块贪吃蛇Html源码(离线)

无影无踪的青蛙

已于 2024-09-17 12:05:31 修改

阅读量175

点赞数 2

文章标签： html javascript css

于 2024-09-07 20:07:03 首次发布

本文链接：https://blog.csdn.net/t54SB/article/details/142001618

版权

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>贪吃蛇游戏</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            background-color: #f0f0f0;
            margin: 0;
            font-family: Arial, sans-serif;
        }
        #gameCanvas {
            border: 1px solid #000;
            background-color: #fff;
        }
        #score {
            margin-top: 20px;
            font-size: 24px;
        }
    </style>
</head>
<body>
    <canvas id="gameCanvas" width="400" height="400"></canvas>
    <div id="score">得分: 0</div>

    <script>
        const canvas = document.getElementById('gameCanvas');
        const ctx = canvas.getContext('2d');
        const box = 20;
        let snake = [];
        snake[0] = { x: 9 * box, y: 10 * box };
        let food = {
            x: Math.floor(Math.random() * 19 + 1) * box,
            y: Math.floor(Math.random() * 19 + 1) * box
        };
        let score = 0;
        let d;

        document.addEventListener('keydown', direction);

        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';
            }
        }

        function collision(head, array) {
            for (let i = 0; i < array.length; i++) {
                if (head.x == array[i].x && head.y == array[i].y) {
                    return true;
                }
            }
            return false;
        }

        function draw() {
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            for (let i = 0; i < snake.length; i++) {
                ctx.fillStyle = (i == 0) ? 'green' : 'white';
                ctx.fillRect(snake[i].x, snake[i].y, box, box);
                ctx.strokeStyle = 'red';
                ctx.strokeRect(snake[i].x, snake[i].y, box, box);
            }

            ctx.fillStyle = 'red';
            ctx.fillRect(food.x, food.y, box, box);

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

            if (d == 'LEFT') snakeX -= box;
            if (d == 'UP') snakeY -= box;
            if (d == 'RIGHT') snakeX += box;
            if (d == 'DOWN') snakeY += box;

            if (snakeX == food.x && snakeY == food.y) {
                score++;
                document.getElementById('score').innerText = '得分: ' + score;
                food = {
                    x: Math.floor(Math.random() * 19 + 1) * box,
                    y: Math.floor(Math.random() * 19 + 1) * box
                };
            } else {
                snake.pop();
            }

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

            if (snakeX < 0 || snakeY < 0 || snakeX >= canvas.width || snakeY >= canvas.height || collision(newHead, snake)) {
                clearInterval(game);
                alert('游戏结束');
            }

            snake.unshift(newHead);
        }

        let game = setInterval(draw, 100);
    </script>
</body>
</html>

这个代码的话比较简洁, (如food, head, body)物品也都用像素简化了(极简主义患者), 目前正在做的是加一个玩法说明, 有更新承诺秒出[laugh]