当前位置: 首页 > 图文教程 > 网络编程 > Javascript > javascript 贪吃蛇实现代码

Javascript
javascript radio list的实现细节(多浏览器兼容)
IE在DOM操作有表单控件时的bug
trim原型函数看js正则表达式的性能
js 禁用浏览器的后退功能的简单方法
IE和Firefox下javascript的兼容写法小结
兼容ie和firefox js关闭代码
用tip解决Ext列宽度不够的问题
firefox getyear() getFullYear数获取年份的问题
javascript iFrame研究
FLASH 广告之外的链接
firefox TBODY 用js显示和隐藏时出现错位的解决方法
Javascript 获取LI里的内容
比较全的JS checkbox全选、取消全选、删除功能代码
JS checkbox控制操作代码
document.all与getElementById、getElementsByName、getElementsByTagName用法区别-document.all
document.all与getElementById、getElementsByName、getElementsByTagName用法区别-getElementById
简单通用的JS滑动门代码
Javascript select控件操作大全(新增、修改、删除、选中、清空、判断存在等)
js 提交和设置表单的值
flash javascript之间的通讯方法小结

Javascript 中的 javascript 贪吃蛇实现代码


出处:互联网   整理: 软晨网(RuanChen.com)   发布: 2009-09-12   浏览: 74 ::
收藏到网摘: n/a

最近在学Javascript,花了半个月的时间终于把《Javascript权威指南》(推荐此书,入门级) 扫完。 在学习的过程中发现使用JS实现动态效果挺有趣的。 在习作的过程中尝试着贪吃蛇游戏用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文件即可。