HTML5+JavaScript贪吃蛇游戏代码

最新推荐文章于 2024-03-29 12:03:24 发布

hello141219

最新推荐文章于 2024-03-29 12:03:24 发布

阅读量259

点赞数 2

分类专栏： HTML网页代码文章标签： html5 javascript 游戏

本文链接：https://blog.csdn.net/lamchichentao/article/details/136128108

版权

HTML网页代码专栏收录该内容

7 篇文章 0 订阅

订阅专栏

代码
运行结果

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>贪吃蛇游戏</title>
    <style>
        canvas {
            border: 1px solid black;
        }
    </style>
</head>
<body>
    <canvas id="game" width="400" height="400"></canvas>
    <script>
        var speed=prompt("请输入蛇的速度(单位:毫秒)");
        speed=parseInt(speed);
        const canvas = document.getElementById('game');
        const context = 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 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() {
            context.fillStyle = "white";
            context.fillRect(0, 0, canvas.width, canvas.height);
            for (let i = 0; i < snake.length; i++) {
                context.fillStyle = (i == 0) ? "black" : "gray";
                context.fillRect(snake[i].x, snake[i].y, box, box);
            }
            context.fillStyle = "red";
            context.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) {
                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 || snakeX > 19 * box || snakeY < 0 || snakeY > 19 * box || collision(newHead, snake)) {
              draw();
              clearInterval(game);
              alert("游戏结束！");
            }
            snake.unshift(newHead);
        }
        let game = setInterval(draw, speed);
    </script>
</body>
</html>