码迷,mamicode.com
首页 > 编程语言 > 详细

JavaScript实现简单贪吃蛇小游戏

时间:2016-11-29 22:54:06      阅读:340      评论:0      收藏:0      [点我收藏+]

标签:维数   简单   restart   log   pre   change   渲染   hid   个数   

  之前上Web课,学到JavaScript的时候,老师要求写几个静态页面,要用到JavaScript。想了想就写个贪吃蛇吧。其实之前用pygame写过一次GUI的贪吃蛇,素材都是自己拿画图画的,其丑无比。所以这次还是老老实实用字符吧。

 

  首先,是一些全局变量的定义:

技术分享
 1 <script>
 2         var state = 0;//0 wait 1 run 2 over
 3     var width = 40;
 4     var height = 25;
 5     var update = false;
 6     var dir = 3; 
 7     var ndir = 3;
 8     //0 top 1 down 2 left 3 right
 9     //l 37 r 39 u 38 d 40  space 32
10 
11     var waittime = 50;
12 
13     //△▽○◇□☆●◆■★?◎¤?卍卐
14     var snakebody="■";//
15     var food = "★";//
16     var foodX;
17     var foodY;
18     var space = "□";
19     var snakeX;
20     var snakeY;
21     var length;
22 
23     var map;
24 
25     var drawMap;
26 
27     function debugInfo(str)
28     {
29         //document.getElementById("debug").innerHTML=str;
30         console.log(str);
31     }    
32 
33 ...
34 </script>
全局变量部分

在这里定义了游戏的状态(等待、运行、结束),其实也可以简化成只有等待和运行,不过为了逻辑上通顺再方便拓展还是这样好一点。width和height是游戏界面的大小。update本来设计是与游戏循环有关,但是实际上没用到。dir、ndir是控制蛇的移动,也在后面说。snakebody、food、space地图上会出现的三种形状,就是蛇、食物、空地。foodX、foodY是食物的位置,snakeX、snakeY则表示蛇,二者都是个数组,length就表示当前蛇的长度。map是当前地图,drawMap本来打算用来辅助渲染,最后还是没用到。debugInfo函数嘛,当时我还不知道有console.log()这玩意儿,就自己写了这样一个函数,用来在页面上显示错误信息。

 

  然后是游戏的初始化:

技术分享
        function Init()
    {
        dir = 3;
        length = 2;

        map = new Array(width);
        for(var i = 0; i < width; ++i)
        {
            map[i] = new Array(height);

            for(var j = 0; j < height; ++j)
                map[i][j] = space;
        }

        snakeX = new Array(width * height);
        snakeY = new Array(width * height);
        for(i = 0; i < width * height; ++i)
        {
            snakeX[i] = 0;
            snakeX[i] = 0;
        }
        snakeX[1] = 0;
        snakeX[0] = 0;
        snakeY[0] = 1;
        snakeY[0] = 0;
           map[1][0] = snakebody;
           map[0][0] = snakebody;

        document.getElementById("msg").innerHTML="Press Space Start";
        Draw();
    }    
初始化部分

在Init函数中完成游戏的初始化。默认蛇一开始长度为2,位于地图的左上角,然后方向朝右。然后把map new成一个二维数组。蛇坐标x、y new成两个数组,大小就是地图的大小。然后调用一次Draw画出默认的样子。Init函数一开始会放在页面的onload。

 

  游戏的渲染部分:

技术分享
function Draw()
{
    var str = "";
    for(i = 0; i < height; ++i)
    {
        for(j = 0; j < width; ++j)
        {
            str += map[j][i];
        }
        str += "<br/>";
    }

    document.getElementById("gameArea").innerHTML=str;
}
渲染部分

就只是简单的把map变成一个字符串放到页面上。

 

  游戏的开始和结束:

技术分享
 1 function Start()
 2 {
 3     state = 1;
 4     update=true;
 5     SpawnFood();
 6     Update();
 7 }
 8 
 9 function dead()
10 {
11     state = 2;
12     document.getElementById("msg").innerHTML="Your Score: " + length + ", Press Space to ReStart.";
13  }
开始和结束部分

游戏开始,变更状态为运行,生成食物并开始更新游戏。游戏结束,变更状态为结束,显示分数。

 

  生成食物:

技术分享
 1 function SpawnFood()
 2 {
 3     loop = true;
 4     while(loop)
 5     {
 6         foodX = parseInt(Math.random() * width);
 7         foodY = parseInt(Math.random() * height);
 8         for(i = 0; i < length; ++i)
 9         {
10             if(foodX == snakeX[i] && foodY == snakeY[i])
11             {}
12             else
13                 loop = false;
14         }
15     }
16 }
生成食物

生成食物就直接随机一个坐标,检查一下跟蛇的身体有没有重合,毕竟食物要出现在一个空地啊,免得蛇太长的时候可能走半天都不知道食物在哪。

 

  主循环:

技术分享
 1 function Update()
 2 {
 3     //0 top 1 down 2 left 3 right
 4     var nextx = snakeX[0];
 5     var nexty = snakeY[0];
 6     dir = ndir;
 7     if(dir == 0)
 8     {
 9         --nexty;
10     }
11     else if(dir == 1)
12     {
13         ++nexty;
14     }
15     else if(dir == 2)
16     {
17         --nextx;
18     }
19     else if(dir == 3)
20     {
21         ++nextx;
22     }
23     for(i = 0; i < length; ++i)
24     {
25         if(nextx == snakeX[i] && snakeY[i] == nexty)
26         {
27             debugInfo("Eat Self" + nextx + "," + nexty + "<br/>head" + snakeX[0] + "," + snakeY[0]);
28             dead();
29             return;
30         }
31     }
32 
33     if(nextx < 0 || nextx >= width || nexty < 0 || nexty >= height)
34     {
35         debugInfo("Eat Wall");
36         dead();
37         return;
38     }
39 
40     if(nextx == foodX && nexty == foodY)
41     {
42         ++length;
43         snakeX.unshift(nextx);
44         snakeY.unshift(nexty);
45         map[foodX][foodY] = snakebody;
46         SpawnFood();
47     }
48     else
49     {
50         snakeX.unshift(nextx);
51         snakeY.unshift(nexty);
52         lastx = snakeX[length];
53         lasty = snakeY[length];
54         //debugInfo("Next Pos:" + nextx + "," + nexty + "<br/>Last Pos: " + lastx + "," + lasty);
55         map[lastx][lasty] = space;
56         map[nextx][nexty] = snakebody;
57     }
58 
59 
60 
61     map[foodX][foodY] = food;
62     debugInfo("food Pos:" + foodX + "," + nexty);
63     Draw();
64 
65 
66         document.getElementById("msg").innerHTML="Your Score: " + length;
67     setTimeout("Update()", waittime);
68 }    
主循环

Update函数是游戏的主循环。本来在Windows程序中他是要放在一个while(true)循环当中的,JS不太一样,想了想用setTimeout以设定好的速率更新游戏。

  在update函数中首先对蛇进行了移动。蛇的移动很简单,根据当前蛇头的位置(也就是蛇坐标(snakeX[0], snakeY[0]) )和当前爬行方向算出接下来到达的位置(nextx,nexty)。首先检查这个位置是否是蛇身体某一部分,如果是,那么表明他吃到自己了,游戏结束。然后检查这个位置是否超出我们设置的地图大小了,如果是,那么蛇撞墙,游戏结束。如果都没有,说明移动是正常的,然后检查这个位置是否是食物的位置。如果是,说明吃到食物,直接把这个坐标放到蛇坐标数组的最前面,也就是蛇头,蛇的长度+1,然后生成新的食物。否则,也把这个坐标放到蛇坐标数组的最前面,然后把蛇的最末端去掉。这样就完成了蛇的移动。

  之后调用Draw更新页面,并显示当前分数。

 

  输入处理:

技术分享
 1 function keyDown()
 2 {
 3     //alert("You Press " + event.keyCode);
 4     //l 37 r 39 u 38 d 40  space 32
 5     if(state == 0)
 6     {
 7         //wait
 8         if(event.keyCode == 32)
 9         {
10             Start();
11         }
12     }
13     if(state == 1)
14     {
15         //0 top 1 down 2 left 3 right
16         //l 37 r 39 u 38 d 40  space 32
17         if(event.keyCode ==  37 && dir != 3)
18         {
19             ndir = 2;
20             debugInfo("Change Dir to left");
21         }
22         else if(event.keyCode == 39 && dir != 2)
23         {
24             ndir = 3;
25             debugInfo("Change Dir to right");
26         }
27         else if(event.keyCode == 38 && dir != 1)
28         {
29             ndir = 0;
30             debugInfo("Change Dir to top");
31         }    
32         else if(event.keyCode == 40 && dir != 0)
33         {
34             ndir = 1;
35             debugInfo("Change Dir to down");
36         }
37     }
38     if(state == 2)
39     {
40         if(event.keyCode == 32)
41         {
42             Init();
43             Start();
44         }
45     }
46 }
47 document.onkeydown = keyDown;
输入处理

这里定义了一个keydown函数处理键盘输入,用document.onkeydown = keyDown;把他作为页面的keydown事件处理函数。

  在这个键盘处理程序里,首先判断游戏状态。等待状态下按下空格键(keyCode:32),调用start函数游戏开始。游戏结束状态下按下空格键,调用init和start函数,游戏重开。游戏运行状态下,按下四个方向键,改变蛇爬行方向。

 

  于是,这就是贪吃蛇全部JavaScript代码了。当然还有页面和样式,这是全部代码:

技术分享
  1 <html>
  2 
  3 <head>
  4 <title>贪吃蛇</title>
  5 <meta charset="utf-8">
  6 
  7 <style>
  8 #msg
  9 {
 10     color:#ff0000;
 11 }
 12 h1
 13 {
 14     text-align: center;
 15     color: #ffffff;
 16     font-size: 64px;
 17     font-family: "Consolas";
 18 }
 19 body
 20 {
 21 
 22     background-color: #dddddd;
 23 }
 24 table
 25 {
 26     border: solid 1px, #66ccff;
 27 }
 28 td
 29 {
 30     border: solid 1px, #66ccff;
 31 }
 32 </style>
 33 
 34 <script type="text/javascript">
 35     var state = 0;//0 wait 1 run 2 over
 36     var width = 40;
 37     var height = 25;
 38     var update = false;
 39     var dir = 3; 
 40     var ndir = 3;
 41     //0 top 1 down 2 left 3 right
 42     //l 37 r 39 u 38 d 40  space 32
 43 
 44     var waittime = 50;
 45 
 46     //△▽○◇□☆●◆■★?◎¤?卍卐
 47     var snakebody="";//
 48     var food = "";//
 49     var foodX;
 50     var foodY;
 51     var space = "";
 52     var snakeX;
 53     var snakeY;
 54     var length;
 55 
 56     var map;
 57 
 58     var drawMap;
 59 
 60     function debugInfo(str)
 61     {
 62         //document.getElementById("debug").innerHTML=str;
 63         console.log(str);
 64     }
 65 
 66     function Draw()
 67     {
 68         var str = "";
 69         for(i = 0; i < height; ++i)
 70         {
 71             for(j = 0; j < width; ++j)
 72             {
 73                 str += map[j][i];
 74             }
 75             str += "<br/>";
 76         }
 77 
 78         document.getElementById("gameArea").innerHTML=str;
 79     }
 80 
 81     function dead()
 82     {
 83            state = 2;
 84         document.getElementById("msg").innerHTML="Your Score: " + length + ", Press Space to ReStart.";
 85        }
 86 
 87     function Update()
 88    {
 89         //0 top 1 down 2 left 3 right
 90         var nextx = snakeX[0];
 91         var nexty = snakeY[0];
 92         dir = ndir;
 93            if(dir == 0)
 94            {
 95                --nexty;
 96            }
 97            else if(dir == 1)
 98            {
 99                ++nexty;
100            }
101            else if(dir == 2)
102            {
103                --nextx;
104            }
105            else if(dir == 3)
106            {
107                ++nextx;
108            }
109 
110            for(i = 0; i < length; ++i)
111            {
112                if(nextx == snakeX[i] && snakeY[i] == nexty)
113                {
114                    debugInfo("Eat Self" + nextx + "," + nexty + "<br/>head" + snakeX[0] + "," + snakeY[0]);
115                    dead();
116                    return;
117                }
118            }
119 
120            if(nextx < 0 || nextx >= width || nexty < 0 || nexty >= height)
121            {
122                debugInfo("Eat Wall");
123                dead();
124                return;
125            }
126 
127            if(nextx == foodX && nexty == foodY)
128            {
129                ++length;
130                snakeX.unshift(nextx);
131                snakeY.unshift(nexty);
132                map[foodX][foodY] = snakebody;
133                SpawnFood();
134            }
135            else
136            {
137                snakeX.unshift(nextx);
138                snakeY.unshift(nexty);
139                lastx = snakeX[length];
140                lasty = snakeY[length];
141                //debugInfo("Next Pos:" + nextx + "," + nexty + "<br/>Last Pos: " + lastx + "," + lasty);
142                map[lastx][lasty] = space;
143                map[nextx][nexty] = snakebody;
144            }
145 
146 
147 
148         map[foodX][foodY] = food;
149            debugInfo("food Pos:" + foodX + "," + nexty);
150            Draw();
151 
152 
153         document.getElementById("msg").innerHTML="Your Score: " + length;
154            setTimeout("Update()", waittime);
155     }
156 
157     function SpawnFood()
158     {
159         loop = true;
160         while(loop)
161         {
162             foodX = parseInt(Math.random() * width);
163             foodY = parseInt(Math.random() * height);
164             for(i = 0; i < length; ++i)
165             {
166                 if(foodX == snakeX[i] && foodY == snakeY[i])
167                 {}
168                 else
169                     loop = false;
170             }
171         }
172     }
173 
174     function Start()
175     {
176         state = 1;
177         update=true;
178         SpawnFood();
179         Update();
180     }
181 
182     function Init()
183     {
184         dir = 3;
185         length = 2;
186 
187         map = new Array(width);
188         for(var i = 0; i < width; ++i)
189         {
190             map[i] = new Array(height);
191 
192             for(var j = 0; j < height; ++j)
193                 map[i][j] = space;
194         }
195 
196         snakeX = new Array(width * height);
197         snakeY = new Array(width * height);
198         for(i = 0; i < width * height; ++i)
199         {
200             snakeX[i] = 0;
201             snakeX[i] = 0;
202         }
203         snakeX[1] = 0;
204         snakeX[0] = 0;
205         snakeY[0] = 1;
206         snakeY[0] = 0;
207            map[1][0] = snakebody;
208            map[0][0] = snakebody;
209 
210         document.getElementById("msg").innerHTML="Press Space Start";
211         Draw();
212     }
213     function keyDown()
214     {
215         //alert("You Press " + event.keyCode);
216         //l 37 r 39 u 38 d 40  space 32
217         if(state == 0)
218         {
219             //wait
220             if(event.keyCode == 32)
221             {
222                 Start();
223             }
224         }
225         if(state == 1)
226         {
227             //0 top 1 down 2 left 3 right
228             //l 37 r 39 u 38 d 40  space 32
229             if(event.keyCode ==  37 && dir != 3)
230             {
231                 ndir = 2;
232                 debugInfo("Change Dir to left");
233             }
234             else if(event.keyCode == 39 && dir != 2)
235             {
236                 ndir = 3;
237                 debugInfo("Change Dir to right");
238             }
239             else if(event.keyCode == 38 && dir != 1)
240             {
241                 ndir = 0;
242                 debugInfo("Change Dir to top");
243             }    
244             else if(event.keyCode == 40 && dir != 0)
245             {
246                 ndir = 1;
247                 debugInfo("Change Dir to down");
248             }
249         }
250         if(state == 2)
251         {
252             if(event.keyCode == 32)
253             {
254                 Init();
255                 Start();
256             }
257         }
258 
259     }
260     document.onkeydown = keyDown;
261 </script>
262 
263 </head>
264 
265 <body onload="Init()">
266     <table>
267         <tr>
268             <td>
269                 <h1 id="title">贪吃蛇</h1>
270             </td>
271         </tr>
272         <tr>
273             <td>
274                 <span id="debug">
275                 </span>
276             </td>
277         </tr>
278         <tr>
279             <td align=center>
280                 <span id="msg">
281                 </span>
282             </td>
283         <tr>
284         <tr>
285             <td>
286                 <span id="gameArea">
287                 </span>
288             </td>
289         </tr>
290     </table>
291 </body>
292 
293 </html>
全部代码

 

运行截图如下:

技术分享

 

JavaScript实现简单贪吃蛇小游戏

标签:维数   简单   restart   log   pre   change   渲染   hid   个数   

原文地址:http://www.cnblogs.com/o--o/p/6115355.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!