一款简单的贪吃蛇小游戏（html+js）实现

短命女 2024-03-30 13:54 62阅读 0赞

**游戏规则：**

> 1.初始分数为=0、初始速度为1！
> 
> 2.操作蛇移动，使蛇可以吃到红色的食物!
> 
> 3.每当我的分数每次达到100分时，当前速度就会提高一个等级！
> 
> 4.最高速度为10.相信能力强的人可以达到最高速度！
> 
> 5.当蛇的碰到墙体或者自己的身子的时候，会宣布游戏失败！

![b7e0c9a6be8946ddb0ecc813f8f642b8.png][]![8b885ee0482948e080d3ff8c05866eb2.png][]

开发需求：  
需求⼤家玩过贪吃蛇应该都了解，⽤上下左右控制蛇的⽅向移动，吃到闪动的⼩⾍就增长⼀段并加分。直到撞到四壁或吃到⾃⼰游戏结束。  
设计思路：  
⾸先要有⼀个地图供蛇爬⾏。由于蛇的形状长度均会改变，如果⽤图⽚表⽰的话肯定不⾏，其实蛇的移动可以看做是背景⾊的⿊⽩变化，蛇  
头的前⼀个html元素变⿊，蛇为变⽩，则可看成是向前移动了⼀步。你整个地图的移动则需将整个地图分为多个⼩的html元素，这⾥我们  
选择table做地图框架，⾥⾯包含的td做蛇的位移就可以了。我们可以做⼀个30\*30的表格做地图。然后通过改变900个td的背景⾊的变化  
来控制蛇的位移。

初始构思是这样画出⽅格阵做地图，然后3个⽅格是⿊⾊背景表⽰的蛇。第四个变⿊，第⼀个变⽩则可看做是向前移动了⼀步。怎样控制前  
后变⾊呢？开始我想到的是⽤js获取当前元素的前后兄弟元素的⽅法控制⾸尾的td背景颜⾊改变，但这种⽅法后来失败，只能适⽤于直线前  
⾏的移动，如果向下掉头的户js获取下⽅的td就难了。其实等把整个地图画出来就想到了，应该⽤⼆维数组。⼆维数组的⼀维表⽰tr⾏，⼆  
维表⽰每⾏的td，这样把地图的每个元素都存⼊⼆维数组，可以按a\[x\]\[y\]的x,y算法很快的调⽤到要移动的位置。  
其它的蛇怎么动怎么吃⾍⼦先不考虑，先做出这个table和数组。

不多说了，代码很简单，直接上代码。

**代码部分：**

直接copy就可以用，html放在贪吃蛇.html里，js文件copy到贪吃蛇.js里，运行html文件即可运行。

html部分：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <html>
    <head>
    	<meta charset="utf-8">
    	<title>html5贪吃蛇小游戏</title>
    	<script type="text/javascript" src="贪吃蛇.js"></script>
    
    	<script>
    
    	</script>
    </head>
    <body>
    	<h1>html5贪吃蛇小游戏</h1>
    	<div align="left" class="a">
    		游戏规则：<br>
    		1.初始分数为=0、初始速度为1！<br>
    		2.操作蛇移动，使蛇可以吃到红色的食物!<br>
    		3.每当我的分数每次达到100分时，当前速度就会提高一个等级！<br>
    		4.最高速度为10.相信能力强的人可以达到最高速度！<br>
    		5.当蛇的碰到墙体或者自己的身子的时候，会宣布游戏失败！<br>
    	</div>
    	<style>
    body{
    	text-align: center;
    	background-color: aqua;
    }
    #snake{
    	margin-top: 20px;
    }
    .a{
    	margin-top: 50px;
    	margin-left: 680px;
    	width: 600px;
    	font-size: 20px;
     
    }
    
    	</style>
    	<canvas id="snake" width="" height=""></canvas>
    
    	<h3 id="score">我的得分：0</h3>
    	<h3 id="speed">当前速度：1</h3>
    
    	<script>
    	var snake = new Snake("snake","score","speed",36,36);
    		snake.init();
    
    	</script>
    </body>

js部分：

[b7e0c9a6be8946ddb0ecc813f8f642b8.png]: https://img-blog.csdnimg.cn/b7e0c9a6be8946ddb0ecc813f8f642b8.png
[8b885ee0482948e080d3ff8c05866eb2.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/0b2760b600774c6e8fa66cf3a4c02e35.png