HTML 贪吃蛇游戏

2025年3月17日 | 阅读 3 分钟

在本文中，我们将了解 HTML 贪吃蛇游戏。

贪吃蛇游戏

这是一款有趣的单人游戏。当蛇吃到食物时，它的身体会变长。玩家必须拯救蛇，使其不触碰到墙壁的边界，也不要碰到自己的身体；否则，游戏将结束。

贪吃蛇游戏规则

蛇不能碰到边界。
蛇不能碰到自己的身体。

我们将使用 HTML、CSS 和 JavaScript 来构建一个贪吃蛇游戏。

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Snake Game</title>
    <style>
        body {
            text-align: center;
        }
        .jtp {
            font-size: 40px;
            font-weight: bold;
            color: red;
        }
    </style>
    <script>
        let brickSize = 25;
        let total_row = 17;
        let total_col = 17;
        let board;
        let context;
        
        let snakeA = brickSize * 5;
        let snakeB = brickSize * 5;
        
        let speedA = 0;
        let speedB = 0;
        
        let serpentBody = [];
        
        let breadA;
        let breadB
        ;
        
        let gameOver = false;
        
        window.onload = function () {
            board = document.getElementById("board");
            board.height = total_row * brickSize;
            board.width = total_col * brickSize;
            context = board.getContext("2d");
        
            placeBread();
            document.addEventListener("keyup", changeDirection);
            setInterval(update, 1000 / 10);
        }
        
        function update() {
            if (gameOver) {
                return;
            }
        
            context.fillStyle = "red";
            context.fillRect(0, 0, board.width, board.height);
        
            context.fillStyle = "black";
            context.fillRect(breadA, breadB, brickSize, brickSize);
        
            if (snakeA == breadA && snakeB == breadB
            ) {
                serpentBody.push([breadA, breadB
            ]);
                placeBread();
            }
        
            for (let i = serpentBody.length - 1; i > 0; i--) {
                serpentBody[i] = serpentBody[i - 1];
            }
            if (serpentBody.length) {
                serpentBody[0] = [snakeA, snakeB];
            }
        
            context.fillStyle = "white";
            snakeA += speedA * brickSize; 
            snakeB += speedB * brickSize; 
            context.fillRect(snakeA, snakeB, brickSize, brickSize);
            for (let i = 0; i < serpentBody.length; i++) {
                context.fillRect(serpentBody[i][0], serpentBody[i][1], brickSize, brickSize);
            }
        
            if (snakeA < 0 
                || snakeA > total_col * brickSize 
                || snakeB < 0 
                || snakeB > total_row * brickSize) { 
                
                gameOver = true;
                alert("Game Over");
            }
        
            for (let i = 0; i < serpentBody.length; i++) {
                if (snakeA == serpentBody[i][0] && snakeB == serpentBody[i][1]) { 
                    
                    gameOver = true;
                    alert("Game Over");
                }
            }
        }
        
        function changeDirection(e) {
            if (e.code == "ArrowUp" && speedB != 1) { 
                speedA = 0;
                speedB = -1;
            }
            else if (e.code == "ArrowDown" && speedB != -1) {
                speedA = 0;
                speedB = 1;
            }
            else if (e.code == "ArrowLeft" && speedA != 1) {
                speedA = -1;
                speedB = 0;
            }
            else if (e.code == "ArrowRight" && speedA != -1) { 
                speedA = 1;
                speedB = 0;
            }
        }
        
        function placeBread() {
        
            breadA = Math.floor(Math.random() * total_col) * brickSize; 
            
            breadB
             = Math.floor(Math.random() * total_row) * brickSize; 
        }
    </script>
</head>
 
<body>
    <h1>Snake Game</h1>
    <canvas id="board"></canvas>
</body>
</html>

说明

我们使用了 <canvas> HTML 标签，它允许我们在屏幕上绘制图形。
我们使用 JavaScript 为 canvas 添加了功能。
我们使用 filestyle() 方法构建了贪吃蛇游戏的背景。
我们使用 random() 函数将食物放在棋盘上。
我们使用 setInterval() 方法来控制蛇的速度。

输出

这是我们可以看到 HTML 贪吃蛇游戏的输出。

当蛇碰到墙壁时，游戏结束。

下一主题HTML 制表符

HTML 贪吃蛇游戏

贪吃蛇游戏

贪吃蛇游戏规则

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

HTML 教程

HTML 属性

HTML 标签列表

HTML5 高级

HTML API

HTML 颜色名称

HTML 杂项

选择题

面试题

HTML 贪吃蛇游戏

贪吃蛇游戏

贪吃蛇游戏规则

相关帖子

Web 2.0

如何在 HTML 中使用 PHP

HTML 扩展名

public_html 目录是什么

如何在 HTML 中插入图片

HTML 中的结束标签包含

HTML 中 class 和 id 的区别

HTML 工具提示

HTML Datalist

HTML 的用途

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器