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

项目简介：

贪吃蛇作为我们儿时经典的游戏之一，它是一款单机而又好玩的小游戏。今天，就让我们用html5技术实现一个简单的贪吃蛇小游戏！

项目核心技术：

html5的canvas+JS技术

操作步骤：

游戏玩家通过操作键盘的方向键（上下左右键）来控制小蛇的方向，使小蛇吃到红色的食物，然后促使小蛇长大。并且，如果得到的分数在不断上涨，游戏的难度也会不断的上升（小蛇的移动速度会越来越快）。如果小蛇头部撞到墙壁或小蛇自己的身体，就会判定游戏失败。

实现效果图：（不会动态图，将就着看！）

复制以下全部代码，可直接查看效果！！！

实现代码如下：

本项目代码一共分为两个部分：HTML+JS两部分。具体代码如下：

HTML代码：

html5贪吃蛇小游戏
游戏规则：
1.初始分数为=0、初始速度为1！
2.操作蛇移动，使蛇可以吃到红色的食物!
3.每当我的分数每次达到100分时，当前速度就会提高一个等级！
4.最高速度为10.相信能力强的人可以达到最高速度！
5.当蛇的碰到墙体或者自己的身子的时候，会宣布游戏失败！
body{text-align: center;background-color: aqua;}#snake{margin-top: 20px;}.a{margin-top: 50px;margin-left: 680px;width: 600px;font-size: 20px; }
我的得分：0
当前速度：1
var snake = new Snake("snake","score","speed",36,36);snake.init();

js代码：

var Snake = function(ele,scoreele,speedele,x,y){this.cellWidth = 15;//格子的大小this.ele = document.getElementById(ele);this.cxt = this.ele.getContext("2d");this.x=x;this.y=y;this.scoreele = document.getElementById(scoreele);this.speedele = document.getElementById(speedele);//生成canvas大小。边框。this.ele.width = this.cellWidth * this.x;this.ele.height = this.cellWidth * this.y;this.ele.style.border ="2px solid #000";this.changeDiretion();//绑定方向事件。}Snake.prototype = {init:function(){//初始化，重置。恢复js数据以及dom。this.direction = 1;//向右  2下 3左  4 上this.nextDirection = '';this.snakeArr = [[0,parseInt(this.y/2)],[1,parseInt(this.y/2)]];this.speed = 1;this.score = 0;this.cxt.fillStyle ='#fff';this.cxt.fillRect(0,0,this.cellWidth*this.x,this.cellWidth*this.y);this.scoreele.innerHTML="我的得分：0";this.speedele.innerHTML="当前速度：1";this.createCoolPoint();this.drawCell(this.coolPoint,2);this.drawSnake();this.setTimer();},getCellArea:function(pos){//返回一个格子左上角的像素坐标[32,666];return [(pos[0]-1)*this.cellWidth+1,(pos[1]-1)*this.cellWidth+1];},setTimer:function(){var speedArr = [180,160,140,120,100,80,60,40,20];var speed = this.speed;if(speed>8){speed = 8;}(function(theThis){var that = theThis;that.timer = setTimeout(function() {that.moveSnake();}, speedArr[speed]);})(this);},moveSnake:function(){//移动蛇的逻辑。数组处理。this.direction = this.nextDirection == ''" />不会内卷/贪吃蛇小游戏 - 码云 - 开源中国 (gitee.com)
点击贪吃蛇项目代码即可看到相关的所有文件代码！
观看完了，麻烦给个点赞+收藏！！！
谢谢！！！
如果有更好的建议，可以私信或者在评论区留言一起讨论！！！