JS写怀旧小游戏系列（四）贪吃蛇

来源：互联网发布：js删除数组指定对象编辑：程序博客网时间：2024/04/28 06:40
直接copy代码到html文件下直接可以运行玩。
Tips: (老鸟跳过，希望对新手有所帮助)
IE: element.innerText = FF: element.textContent；
setAttribute("cellpadding","0")在IE中无效，正确写法cellPadding (一不小心就犯错了)；
FF中，使用绑定在某元素上的键盘事件前，先让它获得焦点，document也不例外，这容易疏忽；
在IE中create table element，记得加tbody。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>贪吃蛇 - by CNwander</title><style type="text/css">* {margin:0; padding:0}body {background:#333; -moz-user-select:none; text-align:center; font-size:12px}table {margin:80px auto 10px auto; overflow:hidden; border-collapse:collapse; }td {width:20px; height:20px; border:1px solid #eee; background:#f4f4f4}.cover {background:#39c;}.food {background:#093}.block {background:#333}.brake {background:#f00}.skate {background:#00f}#say {margin-top:50px; color:white}#help {width:420px; margin:0 auto; line-height:17px; color:white}#help span {float:left; margin-right:10px}#help .box {width:15px; height:15px; margin-right:5px; border:1px solid white}#btnStart {clear:both; width:100px; height:30px; margin-top:10px; padding:0; background:#bbb; color:#222; border:1px solid #fff; border-bottom-color:#000; border-right-color:#000; cursor:pointer}</style><script type="text/javascript">// code by CNwander.// common function $(str) {return document.getElementById(str);}function $tag(str,target) {target = target || document;return target.getElementsByTagName(str);}// global// constvar WIDTH = 20, //网格宽度HEIGHT = 20, //网格高度SAY = ["相当不错，虽然说和CNwander还不是一个级别的","可以啊，再加点油都可以和CNwander媲美了！","一个字，牛，连CNwander都甘拜下风了","差不多行了，别把游戏玩爆了"];var len = 3, //蛇的长度speed, //爬行速度gridElems = multiArray(WIDTH,HEIGHT), //单元格对象carrier, //承载对象(食物，障碍，滑板，刹车)snake, //蛇每节的坐标点info, //交互对话btnStart, //开始按钮topScore = len,snakeTimer, //蛇行走计时器brakeTimers = [], //随机刹车skateTimers = [], //随机滑板directkey; // 方向键值 37-40 左上右下window.onload = function(){info = $("say");btnStart = $("btnStart");initGrid(); //网格初始化document.onkeydown = attachEvents; //绑定方向事件btnStart.onclick = function (e) {btnStart.blur(); //firefox中必须释放焦点start(); //游戏开始btnStart.setAttribute("disabled",true);btnStart.style.color = "#aaa";}}//开始游戏function start() {len = 3;speed = 10;directkey = 39;carrier = multiArray(WIDTH,HEIGHT);snake = new Array();clear();initSnake(); //蛇初始化addObject("food");walk();addRandomBrake();}//创建网格function initGrid() {var body = $tag("body")[0];var table = document.createElement("table"),tbody = document.createElement("tbody")for(var j = 0; j < HEIGHT; j++) {  var col = document.createElement("tr");  for(var i = 0; i < WIDTH; i++) {  var row = document.createElement("td");gridElems[i][j] = col.appendChild(row);  }tbody.appendChild(col);  }table.appendChild(tbody);$("snakeWrap").appendChild(table);}//创建蛇function initSnake() {var pointer = randomPointer(len-1, len-1, WIDTH/2);for(var i = 0; i < len; i++) {var x = pointer[0] - i,y = pointer[1];snake.push([x,y]);carrier[x][y] = "cover";}}//添加键盘事件function attachEvents(e) {e = e || event;directkey = Math.abs(e.keyCode - directkey) != 2 && e.keyCode > 36 && e.keyCode < 41 ? e.keyCode : directkey; //非方向键、反向无效return false;}function walk() {if(snakeTimer) window.clearInterval(snakeTimer);snakeTimer = window.setInterval(step, Math.floor(3000/speed));}function step() {//获取目标点var headX = snake[0][0],headY = snake[0][1];switch(directkey) {case 37: headX -= 1; break;case 38: headY -= 1; break;case 39: headX += 1; breakcase 40: headY += 1; break;}//碰到边界，阻挡物，则结束游戏if(headX >= WIDTH || headX < 0 || headY >= HEIGHT || headY < 0 || carrier[headX][headY] == "block" || carrier[headX][headY] == "cover" ) {trace("GAME OVER");if(getText($("score"))*1 < len) trace(len,$("score"));btnStart.removeAttribute("disabled");btnStart.style.color = "#000";window.clearInterval(snakeTimer);for(var i = 0; i < brakeTimers.length; i++) window.clearTimeout(brakeTimers[i]);for(var i = 0; i < skateTimers.length; i++) window.clearTimeout(skateTimers[i]);return;}//加速if(len % 4 == 0 && speed < 60 && carrier[headX][headY] == "food") {speed += 5;walk();trace("加速！");}//捡到刹车if(carrier[headX][headY] == "brake") {speed = 5;walk();trace("恭喜！捡到刹车一个。");}//遭遇滑板if(carrier[headX][headY] == "skate") {speed += 20;walk();trace("遭遇滑板！");}//添加阻挡物if(len % 6 == 0 && len < 60 && carrier[headX][headY] == "food") {addObject("block");}//对话if(len <= 40 && len % 10 == 0) {var cheer = SAY[len/10-1];trace(cheer);}//吃东西if(carrier[headX][headY] != "food") {var lastX = snake[snake.length-1][0],lastY = snake[snake.length-1][1];carrier[lastX][lastY] = false;gridElems[lastX][lastY].className = "";snake.pop();} else {carrier[headX][headY] = false;trace("吃到食物");addObject("food");}snake.unshift([headX,headY]);carrier[headX][headY] = "cover";gridElems[headX][headY].className = "cover";len = snake.length;}//添加物品function addObject(name) {var p = randomPointer();carrier[p[0]][p[1]] = name;gridElems[p[0]][p[1]].className = name;}//添加随机数量刹车和滑板function addRandomBrake() {var num = randowNum(1,5);for(var i = 0; i < num; i++) {brakeTimers.push( window.setTimeout(function(){addObject("brake")},randowNum(10000,100000)) );skateTimers.push( window.setTimeout(function(){addObject("skate")},randowNum(5000,100000)) );} }//输出信息function trace(sth,who) {who = who || info;if(document.all) who.innerText = sth;else who.textContent = sth;}//获取信息function getText(target) {if(document.all) return target.innerText;else return target.textContent;}//创建二维数组function multiArray(m,n) {var arr =  new Array(n);for(var i=0; i<m; i++) arr[i] = new Array(m);return arr;}//清除画面function clear() {for(var y = 0; y < gridElems.length; y++) {for(var x = 0; x < gridElems[y].length; x++) {gridElems[x][y].className = "";}}}//产生指定范围随机点function randomPointer(startX,startY,endX,endY) {startX = startX || 0;startY = startY || 0;endX = endX || WIDTH;endY = endY || HEIGHT;var p = [],x = Math.floor(Math.random()*(endX - startX)) + startX,y = Math.floor(Math.random()*(endY - startY)) + startY;if(carrier[x][y]) return randomPointer(startX,startY,endX,endY);p[0] = x;p[1] = y;return p;}//产生随机整数function randowNum(start,end) {return Math.floor(Math.random()*(end - start)) + start;}</script></head><body onselectstart="return false"><div id="say">贪吃蛇</div>    <div id="snakeWrap"></div>    <div id="help">    <span class="box food"></span><span>绿色食物</span>        <span class="box block"></span><span>灰色毒品</span>        <span class="box skate"></span><span>蓝色滑板</span>        <span class="box brake"></span><span>红色刹车</span>        <span style="float:right">最高分：<strong id="score">0</strong></span>        <input type="button" id="btnStart" value="开始游戏" />    </div></body></html>