软件开发定制定制HTML实现简单的贪吃蛇小游戏（附完整源码）

 基于HTML5软件开发定制定制技术的小游戏的设计与实现

项目简介：

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

项目核心技术：

        html5的canvas+JS技术

操作步骤：

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

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

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

实现代码如下：

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

HTML代码：

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

js代码：

  1. var Snake = function(ele,scoreele,speedele,x,y){
  2.  
  3. 	this.cellWidth = 15;//格子的大小
  4. 	this.ele = document.getElementById(ele);
  5. 	this.cxt = this.ele.getContext("2d");
  6. 	this.x=x;
  7. 	this.y=y;
  8. 	this.scoreele = document.getElementById(scoreele);
  9. 	this.speedele = document.getElementById(speedele);
  10.  
  11. 	//生成canvas大小。边框。
  12. 	this.ele.width = this.cellWidth * this.x;
  13. 	this.ele.height = this.cellWidth * this.y;
  14. 	this.ele.style.border ="2px solid #000";
  15.  
  16. 	this.changeDiretion();//绑定方向事件。
  17. }
  18.  
  19. Snake.prototype = {
  20.  
  21. 	init:function(){
  22. 		//初始化，重置。恢复js数据以及dom。
  23.  
  24. 		this.direction = 1;//向右  2下 3左  4 上
  25. 		this.nextDirection = '';
  26. 		this.snakeArr = [[0,parseInt(this.y/2)],[1,parseInt(this.y/2)]];
  27. 		this.speed = 1;
  28. 		this.score = 0;
  29.  
  30. 		this.cxt.fillStyle ='#fff';
  31. 		this.cxt.fillRect(0,0,this.cellWidth*this.x,this.cellWidth*this.y);
  32. 		this.scoreele.innerHTML="我的得分：0";
  33. 		this.speedele.innerHTML="当前速度：1";
  34.  
  35. 		this.createCoolPoint();
  36. 		this.drawCell(this.coolPoint,2);
  37. 		this.drawSnake();
  38. 		this.setTimer();
  39. 	},
  40. 	getCellArea:function(pos){//返回一个格子左上角的像素坐标[32,666];		
  41. 		return [(pos[0]-1)*this.cellWidth+1,(pos[1]-1)*this.cellWidth+1];
  42. 	},
  43. 	setTimer:function(){
  44. 		var speedArr = [180,160,140,120,100,80,60,40,20];
  45. 		var speed = this.speed;
  46. 		if(speed>8){
  47. 			speed = 8;
  48. 		}
  49. 		(function(theThis){
  50. 			var that = theThis;
  51. 			that.timer = setTimeout(function() {
  52. 				that.moveSnake();			
  53. 			}, speedArr[speed]);
  54. 		})(this);
  55.  
  56. 	},
  57. 	moveSnake:function(){
  58. 		//移动蛇的逻辑。数组处理。
  59.  
  60. 		this.direction = this.nextDirection == ''?this.direction:this.nextDirection;//当前移动方向，和下一个移动方向。这样处理能避免一个bug.
  61. 		var direction = this.direction;
  62. 		var snakeArr = this.snakeArr;
  63. 		var snakeHead = snakeArr[snakeArr.length-1];
  64. 		switch(direction){
  65. 			case 1 ://向右
  66. 			snakeHead = [snakeHead[0]+1,snakeHead[1]];
  67. 			break;
  68. 			case 2 ://向下
  69. 			snakeHead = [snakeHead[0],snakeHead[1]+1];
  70. 			break;
  71. 			case 3 ://向左
  72. 			snakeHead = [snakeHead[0]-1,snakeHead[1]];
  73. 			break;
  74. 			case 4 ://向上
  75. 			snakeHead = [snakeHead[0],snakeHead[1]-1];
  76. 			break;
  77. 		}
  78.  
  79. 		//超界，或撞上自己。结束，重置。
  80. 		if(in_array(snakeHead,snakeArr) || snakeHead[0]<0 || snakeHead[0]>this.x || snakeHead[1]<0 || snakeHead[1]>this.y){
  81. 			window.clearInterval(this.timer);
  82. 			alert('虽然失败了，不过没关系，还可以再来一局！本局得分：'+this.score);
  83. 			this.init();
  84. 			return;
  85. 		}
  86.  
  87. 		 snakeArr.push(snakeHead);//将蛇头放入数组
  88.  
  89.  
  90. 		 this.drawCell(snakeHead,1);
  91. 		 if(snakeHead.toString() != this.coolPoint.toString()){
  92. 			var tail = snakeArr.shift();//移除蛇尾。
  93. 			this.drawCell(tail,0);
  94.  
  95. 		}else{//撞到coolPoint
  96. 			this.createCoolPoint();
  97. 			this.drawCell(this.coolPoint,2);
  98. 			this.score = this.score + 10;
  99. 			this.scoreele.innerHTML="我的得分："+this.score;
  100. 			this.speed =  Math.ceil((this.score + 1)/100);
  101. 			this.speedele.innerHTML="当前速度："+this.speed;
  102. 		}
  103.  
  104. 		this.setTimer();
  105.  
  106. 	},
  107.  
  108. 	createCoolPoint:function(){//随机生成coolPoint,不在代表snakeArr的数组中。		
  109. 		do{
  110. 			this.coolPoint = [getRandom(this.x),getRandom(this.y)];
  111. 		}while(in_array(this.coolPoint,this.snakeArr));
  112. 	},
  113. 	changeDiretion:function(){
  114. 		//更换移动方向。下一步的移动方向。
  115. 		var that = this;
  116. 		document.onkeydown=function(event){
  117. 			var e = event || window.event || arguments.callee.caller.arguments[0];
  118. 			var direction = that.direction;
  119. 			var keyCode = e.keyCode;
  120.  
  121. 			switch(keyCode){
  122. 				case 39://右
  123. 				if(direction!=1 && direction !=3){
  124. 					that.nextDirection = 1;
  125. 				}
  126.  
  127. 				break;
  128. 				case 40://下
  129. 				if(direction!=2 && direction !=4){
  130. 					that.nextDirection = 2;
  131. 				}
  132. 				break;
  133. 				case 37://左
  134. 				if(direction!=1 && direction !=3){
  135. 					that.nextDirection = 3;
  136. 				}
  137. 				break;
  138. 				case 38://上
  139. 				if(direction!=2 && direction !=4){
  140. 					that.nextDirection = 4;
  141. 				}
  142. 				break;
  143.  
  144. 				default:
  145. 				break;
  146. 			}
  147. 		}; 
  148. 	},
  149. 	drawSnake:function(){
  150. 		//绘制初始小蛇。
  151. 		var snakeArr = this.snakeArr;
  152. 		for (var i = 0,sLen=snakeArr.length; i < sLen; i++) {
  153. 			this.drawCell(snakeArr[i],1);
  154. 		};
  155.  
  156. 	},
  157. 	drawCell:function(pos,type){//绘制会用到的几种颜色的图。
  158.  
  159. 		var colorArr = ['#fff','rgb(0, 0, 0)',"red"];
  160. 		var cxt = this.cxt;
  161. 		var area;
  162. 		cxt.fillStyle = colorArr[type];
  163. 		area = this.getCellArea(pos);
  164. 		cxt.fillRect(area[0],area[1],this.cellWidth-1,this.cellWidth-1);
  165. 	}
  166. }
  167.  
  168. function moveClock() {
  169.     moveSnake(head.d);
  170. }
  171. var isMove = false;
  172. function beginGame() {
  173.     !isMove && setInterval(moveClock, 300);
  174.     isMove = true;
  175. }
  176. //生成随机正整数 1到n之间。
  177. function getRandom(n){
  178. 	return Math.floor(Math.random()*n+1)
  179. }
  180.  
  181. //判断一个数组是否在另一个数组中。注意toString()
  182. function in_array(stringToSearch, arrayToSearch) {
  183. 	for (s = 0; s < arrayToSearch.length; s++) {
  184. 		thisEntry = arrayToSearch[s].toString();
  185. 		if (thisEntry == stringToSearch.toString()) {
  186. 			return true;
  187. 		}
  188. 	}
  189. 	return false;
  190. }

想直接下载代码的，请点击以下链接进入下载：

点击贪吃蛇项目代码即可看到相关的所有文件代码！

观看完了，麻烦给个点赞+收藏！！！

谢谢！！！

如果有更好的建议，可以私信或者在评论区留言一起讨论！！！

网站建设定制开发 软件系统开发定制 定制软件开发 软件开发定制 定制app开发 app开发定制 app开发定制公司 电商商城定制开发 定制小程序开发 定制开发小程序 客户管理系统开发定制 定制网站 定制开发 crm开发定制 开发公司 小程序开发定制 定制软件 收款定制开发 企业网站定制开发 定制化开发 android系统定制开发 定制小程序开发费用 定制设计 专注app软件定制开发 软件开发定制定制 知名网站建设定制 软件定制开发供应商 应用系统定制开发 软件系统定制开发 企业管理系统定制开发 系统定制开发