标签：tin chrome rem translate 速度 循环 class relative size
实现逻辑：
//获取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）
标签：tin chrome rem translate 速度 循环 class relative size
原文地址：http://www.cnblogs.com/leona-d/p/6259488.html
