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

Javascript
javascript秒数倒计时自动跳转代码
js动态生成按钮并动态生成8位随机数
JS旋转图片阵类
javascript md5加密代码
window.onload的页面加载技巧
javascript显示隐藏层比较不错的方法分析
javascript优先加载笔记代码
JavaScript for in锚点的动态创建
初学JavaScript第二章
javascript类型File的Input按钮功能研究
JavaScript下申明对象的几种方法小结
一个jquery的弹出层的插件
IE与firefox之jquery用法区别
判断JavaScript对象是否可用的最正确方法分析
javascript布局查看器效果代码
js模拟画笔效果
无废话JavaScript教程(全集)
执行iframe中的javascript方法
解决function函数内的循环变量
jQuery弹出层插件简化版代码

Javascript 中的 javascript 贪吃蛇实现代码


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