zoukankan html css js c++ java

JavaScript-实现简单的贪吃蛇小游戏

实现逻辑：

//获取Html中的格子（行，列）

//建立数组存储所有格子（x，y）

//建立数组用于存储蛇身（x，y）

//生成随机坐标（x，y）的函数

//随机创建蛇身并存储到蛇身数组

//创建食物（不能与蛇身重合，利用不等于蛇身数组中任何数值实现）

//方向键控制蛇身运动方向

//蛇身运动规则---运动方式，判断是否碰到食物，判断是否撞墙

//游戏结束后清盘规则

一、Html，Css

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5     <title></title>
 6     <meta charset="utf-8" />
 7     <style>
 8         * { padding: 0; margin: 0; }
 9         body { position: relative; width: 100%; height: 100%; background-color: #0c3857; font-family: 'Microsoft YaHei'; }
10         .gameBg { position: absolute; top: 20px; left: 50%; margin-left: -25%; width: 50%; height: 630px; background-color: #045994; }
11         .gameBg .title { margin-bottom: 15px; width: 100%; height: 30px; line-height: 30px; text-align: center; color: #ffffff; font-size: 30px; }
12         .gameBg .snakeAll { margin: 0 auto; width: 621px; height: 400px; }
13         .gameBg .snakeAll div {width: 100%; height: 100%; }
14         .gameBg .snakeAll .table ul { width: 100%; height: 20px; text-align: center; }
15         .gameBg .snakeAll .table ul li { display: inline-block; width: 20px; height: 20px; border: 1px solid #ffffff; border-right: none; border-bottom: none; }
16         .gameBg .snakeAll .table ul li:last-child { border-right: 1px solid #ffffff; width: 19px; }
17         .gameBg .snakeAll .table ul:last-child li { border-bottom: 1px solid #ffffff; height: 19px; }
18 
19         /*食物蛇头*/
20         .gameBg .snakeAll .table span {display: inline-block; width: 100%; height: 100%; }
21         span.food { background-color: #58890c; }
22         span.Snake { background-color: #00ffff; }
23 
24         /*控制按钮*/
25         .gameBg .button { margin-top: 15px; width: 100%; height: 30px; line-height: 30px; text-align: center; }
26         .gameBg .button button { width: 150px; height: 30px; border: none; font-size: 16px; outline: none; }
27         .gameBg .button button#start { background-color: greenyellow; }
28         .gameBg .button button#start:hover { background-color: #58890c; }
29         .gameBg .button button#reset { background-color: sandybrown; }
30         .gameBg .button button#reset:hover { background-color: #b0570c; }
31         .gameBg .button button:active { transform: translate(2px,2px); -ms-transform: translate(2px,2px); /* IE 9 */ -webkit-transform: translate(2px,2px); /* Safari and Chrome */ }
32     </style>
33 </head>
34 <body>
35     <div class="gameBg">
36         <div class="title">贪吃蛇游戏</div>
37        <p style="color:#00ffff; text-align:center"><span>当前时速:</span><span id="shut">800</span></p>
38         <div class="snakeAll">
39             <div class="table" id="tab">
40                 <ul><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li></ul>
41                 <ul><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li></ul>
42                 <ul><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li></ul>
43                 <ul><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li></ul>
44                 <ul><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li></ul>
45                 <ul><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li></ul>
46                 <ul><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li></ul>
47                 <ul><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li></ul>
48                 <ul><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li></ul>
49                 <ul><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li></ul>
50                 <ul><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li></ul>
51                 <ul><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li></ul>
52                 <ul><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li></ul>
53                 <ul><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li></ul>
54                 <ul><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li></ul>
55                 <ul><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li></ul>
56                 <ul><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li></ul>
57                 <ul><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li></ul>
58                 <ul><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li></ul>
59                 <ul><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li></ul>
60             </div>
61         </div>
62         <div class="button">
63             <button id="start" type="button" onclick = "csnake();">开始游戏</button>
64             <button id="reset" type="button" onclick="GameOver('你主动放弃了这场对决')">重新游戏</button>
65         </div>
66     </div>
67     <script src="snake.js"></script>
68 </body>
69 </html>

二、JavaScript

  1 var table = document.getElementById("tab");//获取表格
  2 var ul = table.getElementsByTagName("ul");//获取行
  3 var li = ul[0].getElementsByTagName("li");//获取列
  4 var c = [li.length, ul.length];//存储坐标x，y
  5 var sn;//用于存储蛇身的数组
  6 
  7 /*
  8 cr    生成随机坐标x，y函数
  9 coor  获取坐标对象方法函数
 10 cn    新建节点函数
 11 food  随机生成食物函数
 12 */
 13 cr = function () { return r = [Math.floor(Math.random() * c[0]), Math.floor(Math.random() * c[1])]; }
 14 coor = function (x, y) { return ul[y].childNodes[x]; }
 15 cn = function (name) { sf = document.createElement("span"); sf.className = name; return sf; }
 16 food = function () {
 17     cr();
 18     for (i = 0; i < sn.length / 2 - 1; i++) {
 19         if (r[0] == sn[2 * i] && r[1] == sn[2 * i + 1]) {
 20             cr();
 21         } else {
 22             break;
 23         }
 24     }
 25     coor(r[0], r[1]).appendChild(cn("food"));
 26 }
 27 
 28 function csnake() {
 29     //随机创建蛇身并存储蛇身坐标
 30     cr(); sn = [r[0], r[1]]; coor(sn[0], sn[1]).appendChild(cn("Snake"));
 31 
 32     //创建食物
 33     food();
 34 
 35     //方向键改变运动方向
 36     var direction = "up";
 37     document.onkeydown = function (e) {
 38         e = window.event || e;
 39         switch (e.keyCode) {
 40             case 37: direction = "left"; return false; break;//左
 41             case 38: direction = "up"; return false; break;//上
 42             case 39: direction = "right"; return false; break;//右
 43             case 40: direction = "down"; return false; break;//下
 44             default: break;
 45         }
 46     }
 47 
 48     //蛇规则运动函数
 49     snakeGo = function () {
 50         //判断运动方向并得到即将改变的坐标x，y
 51         var cx, cy;
 52         switch (direction) {
 53             case "left": cx = sn[sn.length - 2] - 1; cy = sn[sn.length - 1]; break;
 54             case "right": cx = sn[sn.length - 2] + 1; cy = sn[sn.length - 1]; break;
 55             case "up": cx = sn[sn.length - 2]; cy = sn[sn.length - 1] - 1; break;
 56             case "down": cx = sn[sn.length - 2]; cy = sn[sn.length - 1] + 1; break;
 57             default: break;
 58         }
 59         //删除蛇尾
 60         coor(sn[0], sn[1]).childNodes[0].remove();
 61         //判断是否碰到蛇身
 62         for (i = 0; i < sn.length / 2 - 1; i++) {
 63             if (cx == sn[2 * i] && cy == sn[2 * i + 1]) {
 64                 GameOver("亲，你是不是头晕撞到自己了");
 65                 return false;
 66             };
 67         }
 68         //向数组增加蛇头下一轨迹坐标
 69         sn.push(cx, cy);
 70         console.log(cy);
 71         //判断蛇头是否撞墙
 72         if (cx < 0 || cx > c[0]-1 || cy < 0 || cy > c[1]-1) {
 73             GameOver("宝贝，你撞墙自裁了");
 74             return false;
 75         }
 76         //判断是否吃到食物
 77         if (cx == r[0] && cy == r[1]) {
 78             coor(r[0], r[1]).childNodes[0].remove();//删除食物
 79             coor(sn[0], sn[1]).appendChild(cn("Snake"));
 80             coor(cx, cy).appendChild(cn("Snake"));
 81             food();
 82         } else {//删除蛇尾
 83             sn.splice(0, 2);
 84             coor(cx, cy).appendChild(cn("Snake"));
 85         }
 86     }
 87 
 88     var t = 800;//存储蛇跑的速度
 89     snakeItl = setInterval(function () {
 90         snakeGo();
 91     }, t)
 92     weGo = setInterval(function () { 
 93         t -= 20;
 94         if (t <= 5) { t = 5; }
 95         clearInterval(snakeItl);
 96         snakeItl = setInterval(function () {
 97             snakeGo();
 98         }, t);
 99         document.getElementById("shut").innerHTML = t;
100     }, 5000);
101     weGo;
102 }
103 
104 
105 function GameOver(text) {
106     clearInterval(snakeItl);
107     clearInterval(weGo);
108     alert(text);
109     //循环遍历删除所有蛇身
110     for (u in ul) {
111         if (!isNaN(u)) {
112             var temp = ul[u].getElementsByTagName("li");
113             for (l in temp) {
114                 if (!isNaN(l)) {
115                     var span = ul[u].getElementsByTagName("li")[l].childNodes;
116                     if (span != undefined && span.length) {
117                         span[0].remove();
118                     }
119                 }
120             }
121         }
122     }
123 
124 
125 }

游戏demo下载地址：https://share.weiyun.com/bc9fbd4d0b83ac2c76fa3115522230fe （密码：ztLv）

作者：leona

原文链接：http://www.cnblogs.com/leona-d/p/6259488.html

查看全文

相关阅读:
校园网络安全CTF 第一题和你真了解我吗？
href="#" 链接到当前页面
 Redis的Set无序集合命令
 Redis的List链表类型命令
 Redis的String、Hash类型命令
 redis2.8.xx安装配置
 ZendFramework安装配置
 复选框的全选、反选
 列表中被点击的行加亮背景色
 SQL中的替换函数replace()使用

原文地址：https://www.cnblogs.com/leona-d/p/6259488.html