基于HTML5的贪吃蛇游戏的设计与实现

最新推荐文章于 2024-09-10 16:01:03 发布

YQEMMMM

最新推荐文章于 2024-09-10 16:01:03 发布

阅读量5.9k

点赞数 7

分类专栏： HTML专栏文章标签：游戏 js css html5

本文链接：https://blog.csdn.net/YQEMMMM/article/details/109296104

版权

HTML专栏专栏收录该内容

15 篇文章 9 订阅

订阅专栏

基于HTML5的贪吃蛇游戏的设计与实现

功能要求：
贪吃蛇游戏是一款经典的单机休闲游戏，玩家通过上下左右按键控制蛇头的移动方向使其向指定方向前进，并吃掉随机位置上产生食物来获得分数。每吃掉一次食物，贪吃蛇的蛇身都会变长，并且会继续在随机位置上产生下一个食物。如果蛇头撞到墙壁或蛇身，则判定游戏失败。根据游戏的难度可以设置不同的游戏速度，蛇的爬行速度越快，游戏难度越大。
实现效果：

一、界面布局设计

1. 整体界面设计
1）使用<div>划分区域
2）CSS外部样式表snake.css

2. 信息展示区设计

使用<div>划分区域
 <!--状态信息栏-->
    <div id="status">
        <!--历史最高分-->
        <div class="box">
            历史最高分：<span id="bestScore">0</span>
        </div>
        <!--当前分数-->
        <div class="box">
            当前分数：<span id="currentScore">0</span>
        </div>
    </div>

3.主游戏界面设计
1）使用<canvas>元素制作游戏画面
2）使用<button>元素制作按钮

二、数据模型设计

1. 创建贪吃蛇模型
2. 蛇身移动模型
3. 蛇吃食物模型

三、游戏逻辑实现

1. 游戏准备
1）设置贪吃蛇的初始状态，包括蛇身长度、首次出现的位置和移动方向等。
2）在游戏启动方法GameStart()
随机生成贪吃蛇的蛇头坐标

x = Math.floor(Math.random() * width / w) * w;
y = Math.floor(Math.random() * height / w) * w;

随机生成蛇的前进方向

direction = 37 + Math.floor(Math.random() * 4);

2. 绘制蛇身
1）自定义drawSnake()专门用于绘制贪吃蛇。

    ctx.fillRect(x, y, w, w) //填充最新位置的矩形蛇身
    var lastBox = snakeMap.shift(); //删除第一个坐标记录
    ctx.clearRect(lastBox[‘x’], lastBox[‘y’], w, w); //清除蛇尾最后一个矩形蛇身，以达到移动效果

2）自定义gameRefresh()刷新画面（每200毫秒刷新一次）

3. 处理蛇头移动
1）使用document对象的onkeydown方法监听并获取用户按键

document.onkeydown = function(e) {
        // 根据按键更新前进方向code：左37，上38，右39，下40
        if(e.keyCode==37||e.keyCode==38||e.keyCode==39||e.keyCode==40)
            direction = e.keyCode;
    }

4.绘制随机位置的食物
1）声明drawFood()方法用于在游戏画布的随机位置绘制食物

function drawFood() {
    //随机生成食物坐标
        foodX = Math.floor(Math.random() * width / w) * w;
        foodY = Math.floor(Math.random() * height / w) * w;
//内部填充颜色
        ctx.fillStyle = "#FF0000";
        //绘制矩形
        ctx.fillRect(foodX, foodY, w, w);
     }

5. 吃到食物判定
1）修改gameRefresh()方法，追加吃到食物判定

        //吃到食物判定
        if (foodX == x && foodY == y) {
            //吃到一次食物加10分
            //更新状态栏中的当前分数
            //在随机位置绘制下一个食物
            //蛇身长度加1
       }

6. 碰撞检测
1）首先创建detectCollision()函数用于进行蛇与障碍物的碰撞检测

function detectCollision() {
        //蛇头碰撞到了四周的墙壁，则游戏失败
        //蛇头碰撞到了蛇身，则游戏失败
}

2）修改gameRefresh()方法，在根据方向移动蛇头位置的switch语句后面添加游戏失败判定的相关代码，通过判断detectCollision()函数的返回值确定当前的游戏状态。

        //碰撞检测，返回值0表示没有撞到障碍物
       //如果返回值不为0，表示游戏失败
        if (code != 0) {
            //如果当前得分高于历史最高分，则更新历史最高分记录
            //返回值1表示撞到墙壁
            //返回值2表示撞到蛇身
            //重新加载页面
       }

7. 显示历史最高分
1）使用HTML5 Web存储API中的localStorage进行历史最高分记录的读取。
2）声明showBestScore()方法用于获取并在状态栏展示历史最高分。

 function showBestScore() {
        //从本地存储数据中读取历史最高分
        bestScore = localStorage.getItem("bestScore");
        //如果尚未记录最高分，则重置为0
        if (bestScore == null)  bestScore = 0;
        //将历史最高分更新到状态栏中
        var best = document.getElementById("bestScore");
        best.innerHTML = bestScore;
    }

8. 游戏重新开始
玩家重新开始游戏有两种方式：
1）一是当蛇碰撞到墙壁或者自身导致游戏失败时会自动重新开始游戏

 function gameRefresh() {
         ……代码略……
        //如果返回值不为0，表示游戏失败
        if (code != 0) {
            ……代码略……
             window.location.reload(); //重新加载页面
        }
}

2）二是点击“重新开始”按钮强制重新开始游戏。

<button onclick="window.location.reload()">重新开始</button>

四、部分代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>贪吃蛇游戏的设计与实现</title>
        <link rel="stylesheet" href="css/snake.css">
    </head>
    <body>
        <div id="container">
            <h3>基于HTML5的贪吃蛇小游戏</h3>
            <hr>
            <!--状态信息栏-->
            <div id="status">
                <!--历史最高分-->
                <div class="box">
                    历史最高分：<span id="bestScore">0</span>
                </div>
                <!--当前分数-->
                <div class="box">
                    当前分数：<span id="currentScore">0</span>
                </div>
            </div>
            <!--设置游戏画布-->
            <canvas id="myCanvas" width="400" height="400" style="border:1px solid"></canvas>
            <div>
                <button onclick="window.location.reload()">
                    重新开始
                </button>
            </div>
        </div>
        <script>
            //=====================
            // 游戏参数设置
            //=====================
            //游戏界面刷新的间隔时间（数字越大，蛇的速度越慢）
            var time = 200;
            //蛇身长
            var t = 3;
            //记录蛇运行轨迹，用数组记录每一个坐标点
            var snakeMap = [];
            //蛇身单元大小
            var w = 10;
            // 方向代码：左37，上38，右39，下40
            var direction = 37;
            //蛇的初始坐标
            var x = 0;
            var y = 0;
            //食物的初始化坐标
            var foodX = 0;
            var foodY = 0;
            //当前得分
            var score = 0;
            //历史最高分纪录
            var bestScore = 0;
            //画布的宽和高
            var width = 400;
            var height = 400;
            //根据id找到指定的画布
            var c = document.getElementById("myCanvas");
            //创建2D的context对象
            var ctx = c.getContext("2d");

            // 获得历史最高分记录
            showBestScore();

            //开始游戏
            GameStart();

            //=====================
            // 显示历史最高分记录
            //=====================
            function showBestScore() {
                //从本地存储数据中读取历史最高分
                bestScore = localStorage.getItem("bestScore");
                //如果尚未记录最高分，则重置为0
                if (bestScore == null)
                    bestScore = 0;
                //将历史最高分更新到状态栏中
                var best = document.getElementById("bestScore");
                best.innerHTML = bestScore;
            }

备注：完整代码请下载附件

https://download.csdn.net/download/YQEMMMM/13055758