html贪吃蛇游戏源码_注释全（修改版）

编码旅者

于 2024-04-19 22:45:37 发布

阅读量486

点赞数 5

文章标签： html 游戏前端

本文链接：https://blog.csdn.net/qq_44640575/article/details/137979555

版权

本文详细介绍了如何使用HTML、CSS和JavaScript实现一个贪吃蛇游戏，包括游戏面板、蛇和食物的样式，以及键盘控制和得分系统。代码中包含了注释，适合初学者学习和参考。

摘要由CSDN通过智能技术生成

导言

前面贪吃蛇游戏的源码，修改后的完整版，注释全，可以直接用。

在这里插入图片描述

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>贪吃蛇游戏</title>
    <style>
        /* 将 body 的 display 属性设置为 flex，使其可以垂直和水平居中 */
        body {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            height: 100vh;
            margin: 0;
            padding: 0;
            background-color: #f5f5f5;
        }

        /* 游戏区域的样式 */
        #game-board {
            width: 400px;
            height: 400px;
            /*border: 1px solid black;*/
            position: relative;
            background-image: url("gezi.png");
            background-size: cover; /*让图片填满整个方块 */
            /*border-radius: 50%; !*圆形*!*/
        }

        /*
        将绿色的方块改成图片，可以使用 CSS 的 background-image 属性来实现。具体的步骤如下：

准备好要用作蛇身的图片，可以是本地图片或者网络图片。
将蛇身的 CSS 样式中的 background-color 属性改为 background-image，并将值设置为要使用的图片的路径。
根据需要设置图片的大小和位置。
以下是示例代码：
        */
        /* 蛇的样式 */
        .snake {
            width: 20px;
            height: 20px;
            /*border: 1px solid black;*/
            /*background-image: url("微信图片_20231023145327.jpg"); !* 将图片的路径替换成实际的路径，这里使用的是七牛云的 *!*/
            background-image: url("touxiang.png"); /*将图片的路径替换成实际的路径，这里使用的是七牛云的 */
            background-size: cover; /*让图片填满整个方块 */
            background-color:  orangered;
            position: absolute;
            top: 0;
            left: 0;
            /*border-radius: 50%; !*圆形*!*/
        }

        /* 食物的样式 */
        .food {
            width: 20px;
            height: 20px;
            /*width: 25px;*/
            /*height: 25px;*/
            background-color: #01FE00;
            position: absolute;
            top: 0;
            left: 0;
            /*border-radius: 50%; !*圆形*!*/
        }

        /* 游戏结束界面的样式 */
        #game-over {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            display: none;
        }

        /* 重新开始按钮的样式 */
        #restart-btn {
            background-color: #00bcd4;
            border: none;
            border-radius: 8px;
            color: white;
            padding: 10px 20px;
            font-size: 16px;
            cursor: pointer;
            margin-top: 20px;
        }

        /* 游戏规则的样式 */
        #game-rule {
            margin-top: 20px;
            font-size: 16px;
            text-align: center;
            color: #666;
        }
    </style>
</head>
<body>
 <!-- 游戏面板 -->
    <div id="game-board"></div>

    <!-- 游戏结束界面 -->
    <div id="game-over">
        <h2>游戏结束！</h2>
        <p>你的得分是 <span id="score"></span> 分。</p>
        <button id="restart-btn">重新开始</button>
    </div>

    <!-- 游戏规则 -->
    <div id="game-rule">
        <p>游戏规则：</p>
        <p>1. 使用方向键控制小蛇的移动方向，吃掉食物增加得分。</p>
        <p>2. 小蛇撞墙或者撞到自己的身体，游戏结束。</p>
        <p>3. 点击重新开始按钮可以重新开始游戏。</p>
    </div>
</body>
</html>
<script>
    // 获取游戏面板元素
var gameBoard = document.getElementById("game-board");

// 创建蛇元素，并为其添加类名
var snake = document.createElement("div");
snake.classList.add("snake");

// 将蛇元素添加到游戏面板中
gameBoard.appendChild(snake);

// 创建食物元素，并为其添加类名
var food = document.createElement("div");
food.classList.add("food");

// 将食物元素添加到游戏面板中
gameBoard.appendChild(food);

// 随机生成食物的初始位置
var foodX = Math.floor(Math.random() * 20) * 20;
var foodY = Math.floor(Math.random() * 20) * 20;

// 设置食物的位置
food.style.top = foodY + "px";
food.style.left = foodX + "px";

// 设置蛇的初始位置
var snakeX = 0;
var snakeY = 0;

// 设置蛇的移动速度
var speed = 200;
//var speed = 10; //值越低的话速度越高

// 设置蛇的初始移动方向
var direction = "right";

// 储存蛇身体的数组，初始时只包含蛇头
var snakeBody = [snake];

// 记录得分
var score = 0;


  function moveSnake() {
    // 储存尾部的位置
    var tailX = snakeBody[snakeBody.length - 1].offsetLeft;
    var tailY = snakeBody[snakeBody.length - 1].offsetTop;

    // 更新蛇身体的位置
    for (var i = snakeBody.length - 1; i > 0; i--) {
        snakeBody[i].style.top = snakeBody[i - 1].style.top;
        snakeBody[i].style.left = snakeBody[i - 1].style.left;
    }

    // 根据移动方向更新蛇头的位置
    if (direction === "right") {
        snakeX += 20;
    } else if (direction === "left") {
        snakeX -= 20;
    } else if (direction === "up") {
        snakeY -= 20;
    } else if (direction === "down") {
        snakeY += 20;
    }

    // 判断蛇是否撞墙，若是则游戏结束
    if (snakeX < 0 || snakeX >= 400 || snakeY < 0 || snakeY >= 400) {
        gameOver();
        return;
    }

    // 更新蛇头的位置
    snakeBody[0].style.top = snakeY + "px";
    snakeBody[0].style.left = snakeX + "px";

    // 判断蛇是否吃到食物，若是则增加得分、生成新的食物和蛇身体部分
    if (snakeX === foodX && snakeY === foodY) {
        foodX = Math.floor(Math.random() * 20) * 20;
        foodY = Math.floor(Math.random() * 20) * 20;
        food.style.top = foodY + "px";
        food.style.left = foodX + "px";
        var newSnakePart = document.createElement("div");
        newSnakePart.classList.add("snake");
        newSnakePart.style.top = tailY + "px";
        newSnakePart.style.left = tailX + "px";
        snakeBody.push(newSnakePart);
        gameBoard.appendChild(newSnakePart);
        score++;
    }

    // 通过递归调用setTimeout来实现蛇的持续移动
    setTimeout(moveSnake, speed);
}



  document.addEventListener("keydown", function (event) {
    // 监听按键事件，根据按下的键码来改变蛇的移动方向
    // 37: 左箭头键，38: 上箭头键，39: 右箭头键，40: 下箭头键
    if (event.keyCode === 37 && direction !== "right") {
        direction = "left";
    } else if (event.keyCode === 38 && direction !== "down") {
        direction = "up";
    } else if (event.keyCode === 39 && direction !== "left") {
        direction = "right";
    } else if (event.keyCode === 40 && direction !== "up") {
        direction = "down";
    }
});


   function gameOver() {
    clearTimeout(moveSnakeTimeout); // 清除蛇移动的定时器
    var gameOverDiv = document.getElementById("game-over"); // 获取游戏结束界面的元素
    var scoreSpan = document.getElementById("score"); // 获取得分显示的元素
    scoreSpan.innerText = score; // 设置得分显示的文本内容为当前得分
    gameOverDiv.style.display = "block"; // 显示游戏结束界面
}


    var restartBtn = document.getElementById("restart-btn");
restartBtn.addEventListener("click", function () {
    // 重新开始按钮的点击事件处理函数
    var gameOverDiv = document.getElementById("game-over"); // 获取游戏结束界面的元素
    gameOverDiv.style.display = "none"; // 隐藏游戏结束界面
    snakeX = 0; // 重置蛇的初始横坐标
    snakeY = 0; // 重置蛇的初始纵坐标
    direction = "right"; // 重置蛇的初始移动方向
    score = 0; // 重置得分为0
    var currentSnakeLength = snakeBody.length; // 当前蛇身体的长度
    for (var i = 1; i < currentSnakeLength; i++) {
        // 移除多余的蛇身体部分
        gameBoard.removeChild(snakeBody[1]);
        snakeBody.splice(1, 1);
    }
    snake.style.top = 0; // 将蛇的位置重置到初始位置
    snake.style.left = 0;
    foodX = Math.floor(Math.random() * 20) * 20; // 随机生成新的食物位置
    foodY = Math.floor(Math.random() * 20) * 20;
    food.style.top = foodY + "px"; // 设置食物的位置
    food.style.left = foodX + "px";
    moveSnake(); // 重新开始蛇的移动
});

var moveSnakeTimeout = setTimeout(moveSnake, speed); // 设置蛇的移动定时器


</script>

欢迎交流和反馈。