JS贪吃蛇小游戏
程序员文章站
2022-03-06 10:25:44
效果图展示： 具体实现代码如下： （1）html部分 （2）main.css文件代码 注意：具体图片可以自行改动 （3）game.js文件代码 1 /* 全局变量 */ 2 3 var WIDTH = 24; 4 var HEIGHT = 24; 5 var len ;//蛇的长度 6 var sp ......
效果图展示：
具体实现代码如下：
（1）html部分
1 !DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8" /> 5 <title>贪吃蛇</title> 6 <link rel="stylesheet" type="text/css" href="main.css"> 7 </head> 8 <body onselectstart="return false"> 9 <h1 id="alerts">贪吃蛇</h1> 10 <div id="help"> 11 <span style="float:left">当前得分：<strong id="nowscore">0</strong></span> 12 <span style="float:right">最高分：<strong id="score">0</strong></span> 13 </div> 14 <div id="map"></div> 15 <input type="button" id="btnStart" value="开始游戏" /> 16 <script type="text/javascript" src="gamejs.js"></script> 17 </body> 18 </html>
（2）main.css文件代码
1 * {margin:0; padding:0}
2 body {
3 background:white;
4 -moz-user-select:none;
5 text-align:center;
6 font-size:12px;
7 }
8
9 table{
10 margin:30px auto 10px auto;
11 overflow:hidden;
12 box-shadow:0px 0px 30px #4EFE93;
13 border:10px solid yellowgreen;
14 border-image: url(border.png);
15 border-image-slice:10;
16 border-image-width:10px;
17 border-image-outset:0;
18 border-image-repeat:repeat;
19 }
20 td {
21 width:20px;
22 height:20px;
23 border:1px solid white;
24 background:white;
25 }
26 .cover {background:url(body1.png);}
27 .food {
28 background:url(food.png);
29 background-repeat:no-repeat;
30 }
31
32
33 #nowscore{
34 font-size:20px;
35 font-weight: 800;
36 color:blue;
37 }
38 #score{
39 font-size:20px;
40 font-weight: 800;
41 color:red;
42 }
43 #alerts{
44 margin-top:50px;
45 color:brown;
46 font-size:30px;
47 font-weight: 800;
48 }
49 #help {
50 width:420px;
51 margin:0 auto;
52 line-height:17px;
53 color:green;
54 }
55 #help span {
56 float:left;
57 font-size:15px;
58 font-weight: 800;
59 margin-right:10px}
60 #help .box {
61 width:15px;
62 height:15px;
63 margin-right:5px;
64 border:1px solid white;}
65 #btnStart {
66 clear:both;
67 width:100px;
68 height:30px;
69 margin-top:10px;
70 padding:0;
71 background:#4EFE93;
72 color:green;
73 border:1px solid #fff;
74 border-bottom-color:#000;
75 border-right-color:#000;
76 border-radius:15px;
77 cursor:pointer}
注意：具体图片可以自行改动
（3）game.js文件代码
1 /* 全局变量 */
2
3 var WIDTH = 24;
4 var HEIGHT = 24;
5 var len ;//蛇的长度
6 var speed; //爬行速度
7 var gridElems = multiArray(WIDTH,HEIGHT); //地图坐标，table对应的数组
8 var carrier; //蛇标志二维数组
9 var snake; //蛇每节的坐标点
10 var btnStart;
11 var snakeTimer;//蛇行走计时器
12 var directkey; // 键盘按键类型
13
14 /* 其中gridElems和snake，carrier三个数组是完成表格和数组映射的关键 */
15
16 window.onload = function(){
17 //info = document.getElementById("alerts");
18 btnStart = document.getElementById("btnStart");
19 initGrid();
20 document.onkeydown = attachEvents; //键盘事件获取，跨浏览器事件处理
21 btnStart.onclick = function (e) {
22 start();
23 btnStart.setAttribute("disabled",true);
24 btnStart.style.color = "gray";
25 }
26 }
27
28
29
30
31
32
33
34
35
36
37
38 //开始游戏
39 function start() {
40 len = 3;
41 speed = 10;
42 directkey = 39;
43 carrier = multiArray(WIDTH,HEIGHT);
44 snake = new Array();
45 clear();
46 initSnake(); //蛇初始化
47 addObject("food");
48 walk();
49
50 }
51
52
53 //创建地图，DOM节点创建增加
54 function initGrid() {
55 var body = document.getElementsByTagName("body")[0];
56 var table = document.createElement("table");
57 var tbody = document.createElement("tbody");
58 for(var j = 0; j < HEIGHT; j++) {
59 var col = document.createElement("tr");
60 for(var i = 0; i < WIDTH; i++) {
61 var row = document.createElement("td");
62 gridElems[i][j] = col.appendChild(row); //完成表格和二维数组的映射
63 }
64 tbody.appendChild(col);
65 }
66 table.appendChild(tbody);
67 document.getElementById("map").appendChild(table);//向div中添加创建好的表格
68 }
69
70
71 //一开始创建蛇
72 function initSnake() {
73 var pointer = randomPointer(len-1, len-1, WIDTH/2);
74 for(var i = 0; i < len; i++) {
75 var x = pointer[0] - i;//产生三个相连的表格
76 var y = pointer[1];
77 snake.push([x,y]);//采用数组压栈方法（js数组自带方法）将产生的蛇坐标压入坐标数组中
78 carrier[x][y] = "cover";
79 }
80 }
81
82
83 //添加键盘事件，防止浏览器不兼容
84 function attachEvents(e) {
85 e = e || event;
86 directkey = Math.abs(e.keyCode - directkey) != 2 && e.keyCode > 36 && e.keyCode < 41 ? e.keyCode : directkey; //非方向键、反向无效
87 return false;
88 }
89
90 //设置间隔计时器，使蛇运动
91 function walk() {
92 if(snakeTimer) window.clearInterval(snakeTimer);
93 snakeTimer = window.setInterval(step, Math.floor(3000/speed));//3000/speed呈现速度效果
94 }
95
96 //核心部分
97 function step() {
98 //获取目标点
99 var headX = snake[0][0];//从坐标数组中获取蛇头坐标
100 var headY = snake[0][1];
101 switch(directkey) { //进行按键位判断，蛇转向
102 case 37: headX -= 1; break;
103 case 38: headY -= 1; break;
104 case 39: headX += 1; break
105 case 40: headY += 1; break;
106 }
107 //死亡检测
108 if(headX >= WIDTH || headX < 0 || headY >= HEIGHT || headY < 0 || carrier[headX][headY] == "cover" ) {
109 alert("辣鸡高城，你挂了！");
110 if((document.getElementById("score").innerHTML)*1 < len)
111 {document.getElementById("score").innerHTML=len;}//最高分信息
112 btnStart.removeAttribute("disabled");//释放“开始游戏”按钮
113 btnStart.style.color = "#000";//释放“开始游戏”按钮
114 window.clearInterval(snakeTimer);//清屏
115 return;
116 }
117 //加速，吃到食物后提速
118 if(len % 4 == 0 && speed < 60 && carrier[headX][headY] == "food") {
119 speed += 5;
120 walk();
121 }
122 if(carrier[headX][headY] != "food") {
123 var lastX = snake[snake.length-1][0];//提取蛇的尾部坐标
124 var lastY = snake[snake.length-1][1];//提取蛇的尾部坐标
125 carrier[lastX][lastY] = false;//蛇尾移动
126 gridElems[lastX][lastY].className = "";//制空单元格背景色
127 snake.pop();//删除蛇尾坐标
128 }
129 else {
130 carrier[headX][headY] = false;//记录蛇头和食物重叠，碰撞处，碰撞后：蛇尾不减，false标志重叠
131
132 addObject("food");//添加新的食物；
133 }
134 snake.unshift([headX,headY]);//将食物作为新的蛇头坐标压入蛇坐标数组，unshift函数为头压入数据，snake长度增加1
135 carrier[headX][headY] = "cover";//cover代表为蛇身，此时将标志false改为正常caver
136 gridElems[headX][headY].className = "cover";//给移动后的蛇身修改相应的表格单元格颜色
137 len = snake.length;
138 document.getElementById('nowscore').innerHTML = len;
139 }
140
141 //添加物品
142 function addObject(name) {
143 var p = randomPointer();
144 carrier[p[0]][p[1]] = name;
145 gridElems[p[0]][p[1]].className = name;//封装投放食物函数
146 }
147
148 //产生指定范围随机点，食物和蛇的初始值产生
149 function randomPointer(startX,startY,endX,endY) {
150 startX = startX || 0;
151 startY = startY || 0;
152 endX = endX || WIDTH;
153 endY = endY || HEIGHT;
154 var p = [];
155 var x = Math.floor(Math.random()*(endX - startX)) + startX;//控制产生数据在WIDTH即表格横向范围内
156 var y = Math.floor(Math.random()*(endY - startY)) + startY;//控制产生数据在HEIGHT即表格纵向范围内
157 if(carrier[x][y]) //如果产生数据和蛇身重复了，则递归再次产生
158 {return randomPointer(startX,startY,endX,endY);}
159 p[0] = x;
160 p[1] = y;
161 return p;//返回一个一维数组，仅两个数（坐标），传至坐标数组
162 }
163
164 //产生随机整数
165 function randowNum(start,end) {
166 return Math.floor(Math.random()*(end - start)) + start;
167 }
168
169 //创建二维数组
170 function multiArray(m,n) {
171 var arr = new Array(n);
172 for(var i=0; i<m; i++)
173 arr[i] = new Array(m);//数组套数组
174 return arr;
175 }
176
177 //清除画面，游戏开始时和死亡后刷新使用
178 function clear() {
179 for(var y = 0; y < gridElems.length; y++) {
180 for(var x = 0; x < gridElems[y].length; x++) {
181 gridElems[x][y].className = "";
182 }
183 }
184 }
上一篇： PHP中的日期相关函数（二）
下一篇： webpack缓存