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

Javascript
颜色变换 像字符逐字输入的欢迎词
CSS 伪类实现的鼠标滑动图片链接
百度用到的Js日历 大家可以看看
CSS 渐变背景的6个演示代码
Jquery 弹出层插件实现代码
Javascript 模式实例 观察者模式
[原创]javascript 指定区域内图片等比例缩放实现代码 脚本之家整合版
javascript window对象属性整理
JavaScript弹簧振子超简洁版 完全符合能量守恒,胡克定理
WEB页子窗口(showModalDialog和showModelessDialog)使用说明
用JavaScript实现 铁甲无敌奖门人 “开口中”猜数游戏
理解 JavaScript 预解析
理解JavaScript变量作用域更轻松
JavaScript的变量作用域深入理解
javascript写的一个链表实现代码
Js 打字效果 逐一出现的文字
javascript 走马灯效果的链接提示
CSS 动态链接提示
JavaScript 事件的一些重要说明
JavaScript 三种不同位置代码的写法

Javascript 中的 javascript 贪吃蛇实现代码


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