欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

JS贪吃蛇小游戏

程序员文章站 2022-06-19 08:39:45
效果图展示: 具体实现代码如下: (1)html部分 (2)main.css文件代码 注意:具体图片可以自行改动 (3)game.js文件代码 1 /* 全局变量 */ 2 3 var WIDTH = 24; 4 var HEIGHT = 24; 5 var len ;//蛇的长度 6 var sp ......

效果图展示:

JS贪吃蛇小游戏

 

具体实现代码如下:

(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文件代码

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 }
View Code