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; break105 ????????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长度增加1135 ????carrier[headX][headY] = "cover";//cover代表为蛇身，此时将标志false改为正常caver136 ????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 }