Posted in Javascript onNovember 22, 2008
在习作的过程中尝试着贪吃蛇游戏用JS实现了。竟然成功了。
思路:使用10px*10px的div层担当“像素”,然后使用40*40矩阵160个“像素”构成了游戏的界面。
下面是代码:
// JavaScript Document alert("键盘的方向键控制方向,空格键暂停。\nLIFE制作\nhttp://blog.csdn.net/anhulife"); // 添加基本的图形块,即160个10 * 10的层组成的二维矩阵 var rowindex = new Array(40); var colindex; var cell; // 图像单元的定义 var backcolor = "black"; for(var i = 0; i < 40; i ++ ) { colindex = new Array(40); for(var j = 0; j < 40; j ++ ) { // 设置每个单元的属性 cell = document.createElement("div"); cell.style.backgroundColor = backcolor; cell.style.width = "10px"; cell.style.height = "10px"; cell.style.position = "absolute"; cell.style.left = "" + (j * 10 + 100) + "px"; cell.style.top = "" + (i * 10 + 100) + "px"; cell.style.overflow = "hidden"; // 添加单元 document.body.appendChild(cell); // 填充列组 colindex[j] = cell; } // 填充行组 rowindex[i] = colindex; } // 贪吃蛇类的定义,基于基本的图像单元 function snake() { // 定义蛇的身体,并初始化 this.bodycolor = "white"; this.bodys = new Array(); for(var i = 20; i < 25; i ++ ) { rowindex[20][i].style.backgroundColor = this.bodycolor; // rowindex的第一个坐标是行标,第二是列标 this.bodys.push(rowindex[20][i]); } // 定义蛇的头部坐标,第一个是行标, 第二个是列标 this.head = [20, 20]; // 定义蛇的前进方向,0代表左、1代表下、2代表右、3代表上 this.direct = 0; } // 移动模块 function move() { // 根据前进方向计算头部的坐标 switch(this.direct) { case 0 : this.head[1] -= 1; break; case 1 : this.head[0] += 1; break; case 2 : this.head[1] += 1; break; case 3 : this.head[0] -= 1; break; } // 判断是否越界 if(this.head[0] < 0 || this.head[0] > 39 || this.head[1] < 0 || this.head[1] > 39) { // 如果越界则返回false return false; } else // 如果没有越界则检查下一个元素的性质,如果是食物则吃掉,并再生成食物。如果是其自身则返回false if(this.head[0] == food[0] && this.head[1] == food[1]) { // 如果是食物 rowindex[this.head[0]][this.head[1]].style.backgroundColor = this.bodycolor; this.bodys.unshift(rowindex[this.head[0]][this.head[1]]); score++; makefood(); return true; } else // 如果是它自身 if(rowindex[this.head[0]][this.head[1]].style.backgroundColor == this.bodycolor) { if(rowindex[this.head[0]][this.head[1]] == this.bodys.pop())// 如果是它的尾部 { this.bodys.unshift(rowindex[this.head[0]][this.head[1]]); return true; } // 如果不是尾部 return false; } // 以上情况都不是 this.bodys.pop().style.backgroundColor = backcolor; rowindex[this.head[0]][this.head[1]].style.backgroundColor = this.bodycolor; this.bodys.unshift(rowindex[this.head[0]][this.head[1]]); return true; } snake.prototype.move = move; // 生成食物模块 var foodcolor = "blue"; var food = [20, 17]; rowindex[food[0]][food[1]].style.backgroundColor = foodcolor; function makefood() { var tempfood; var tempelement; out : while(true) { tempfood = [Math.round(Math.random() * 39), Math.round(Math.random() * 39)]; tempelement = rowindex[tempfood[0]][tempfood[1]]; for(var i in s.bodys) { if(s.bodys[i] == tempelement) { // 如果随机生成的食物在蛇的身体上,则跳出继续 continue out; } // 生成食物成功 break out; } } food = tempfood; rowindex[food[0]][food[1]].style.backgroundColor = foodcolor; } // 转向模块和暂停模块 document.onkeydown = turnorstop; function turnorstop(event) { if(window.event != undefined) { if(parseInt(window.event.keyCode)==32) { alert("休息一下"); } else { switch(parseInt(window.event.keyCode)) { case 37 : if(s.direct!=2) s.direct = 0; break; case 38 : if(s.direct!=1) s.direct = 3; break; case 39 : if(s.direct!=0) s.direct = 2; break; case 40 : if(s.direct!=3) s.direct = 1; break; } } } else { if(parseInt(event.which)==32) { alert("休息一下"); } else { switch(parseInt(event.which)) { case 37 : if(s.direct!=2) s.direct = 0; break; case 38 : if(s.direct!=1) s.direct = 3; break; case 39 : if(s.direct!=0) s.direct = 2; break; case 40 : if(s.direct!=3) s.direct = 1; break; } } } } // 启动游戏模块 var s = new snake(); var time = 60;//蛇的速度指数 function startmove() { if(s.move()) { setTimeout(startmove, time); } else { alert("GAME OVER\n您的分数是:"+score+"分"); } } //分数设置 var score = -1; //运行游戏 startmove();
在网页中连接该JS文件即可。
javascript 贪吃蛇实现代码
声明:登载此文出于传递更多信息之目的,并不意味着赞同其观点或证实其描述。
Reply on: @reply_date@
@reply_contents@