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

Javascript
一个js写的日历(代码部分网摘)
IE,firefox(火狐)浏览器无提示关闭窗口js实现代码小结
jquery 子窗口操作父窗口的代码
用JavaScript隐藏控件的方法
js 冒泡事件与事件监听使用分析
ie与ff下的event事件
比较全面的event对像在IE与FF中的区别 推荐
js 获取中文拼音,Select自动匹配字母获取值的代码
JavaScript 变量命名规则
没有form表单情况下敲回车键提交表单的js代码
jQuery 使用手册(四)
jQuery 使用手册(六)
jQuery 使用手册(七)
Javascript 数组添加一个 indexOf 方法的实现代码
Javascript 数组添加 shuffle 方法的实现代码
Javascript 两个窗体之间传值实现代码
Javascript showModalDialog两个窗体之间传值
js 覆盖和重载 函数
JavaScript中Object和Function的关系小结
javascript parseInt 大改造

Javascript 中的 javascript 贪吃蛇实现代码


出处:互联网   整理: 软晨网(RuanChen.com)   发布: 2009-09-12   浏览: 314 ::
收藏到网摘: 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文件即可。