javascript 贪吃蛇实现代码


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 相关文章推荐
用js实现的检测浏览器和系统的函数
Apr 09 Javascript
关于jquery ajax 调用带参数的webservice返回XML数据一个小细节
Jul 31 Javascript
密码强度检测效果实现原理与代码
Jan 04 Javascript
JS分页控件 可用于无刷新分页
Jul 23 Javascript
js获取本机的外网/广域网ip地址完整源码
Aug 12 Javascript
jQuery圆形统计图开发实例
Jan 04 Javascript
JS获取图片lowsrc属性的方法
Apr 01 Javascript
微信小程序开发(二)图片上传+服务端接收详解
Jan 11 Javascript
基于JavaScript实现类名的添加与移除
Apr 23 Javascript
浅谈JS中几种轻松处理'this'指向方式
Sep 16 Javascript
使用webpack搭建vue环境的教程详解
Dec 31 Javascript
JavaScript实时更新当前的时间的示例代码
Jul 15 Javascript
js利用div背景,做一个竖线的效果。
Nov 22 #Javascript
JavaScript使用技巧精萃[代码非常实用]
Nov 21 #Javascript
FireFox与IE 下js兼容触发click事件的代码
Nov 20 #Javascript
js刷新框架子页面的七种方法代码
Nov 20 #Javascript
拖拉表格的JS函数
Nov 20 #Javascript
设置下载不需要倒计时cookie(倒计时代码)
Nov 19 #Javascript
JavaScript在IE中“意外地调用了方法或属性访问”
Nov 19 #Javascript
You might like
两个强悍的php 图像处理类1
2009/06/15 PHP
php+mysql 实现身份验证代码
2010/03/24 PHP
php 文本文件的读取效率
2012/02/10 PHP
解析curl提交GET,POST,Cookie的简单方法
2013/06/29 PHP
PHP fastcgi模式上传大文件(大约有300多K)报错
2014/09/28 PHP
PHP hex2bin()函数用法讲解
2019/02/25 PHP
Laravel5.1 框架表单验证操作实例详解
2020/01/07 PHP
js动态为代码着色显示行号
2013/05/29 Javascript
用javascript关闭本窗口技巧小结
2014/09/05 Javascript
JavaScript数组常用操作技巧汇总
2014/11/17 Javascript
JavaScript通过function定义对象并给对象添加toString()方法实例分析
2015/03/23 Javascript
JS中使用变量保存arguments对象的方法
2016/06/03 Javascript
JS基于构造函数实现的菜单滑动显隐效果【测试可用】
2016/06/21 Javascript
彻底学会Angular.js中的transclusion
2017/03/12 Javascript
基于nodejs+express4.X实现文件下载的实例代码
2017/07/13 NodeJs
微信小程序-滚动消息通知的实例代码
2017/08/03 Javascript
Javascript中将变量转换为字符串的三种方法
2017/09/19 Javascript
JavaScript 异步调用
2017/10/25 Javascript
js实现掷骰子小游戏
2019/10/24 Javascript
微信小程序全选多选效果实现代码解析
2020/01/21 Javascript
微信小程序实现简单购物车功能
2020/12/30 Javascript
利用QT写一个极简单的图形化Python闹钟程序
2015/04/07 Python
Python编程中time模块的一些关键用法解析
2016/01/19 Python
Python读取Json字典写入Excel表格的方法
2018/01/03 Python
python实现多层感知器
2019/01/18 Python
python 调用pyautogui 实时获取鼠标的位置、移动鼠标的方法
2019/08/27 Python
pygame库实现移动底座弹球小游戏
2020/04/14 Python
使用pytorch实现论文中的unet网络
2020/06/24 Python
KEETSA环保床垫:更好的睡眠,更好的生活!
2016/11/24 全球购物
美国标志性加大尺码时装品牌:Ashley Stewart
2016/12/15 全球购物
来自世界各地的优质葡萄酒:VineShop24
2018/07/09 全球购物
简述Linux文件系统通过i节点把文件的逻辑结构和物理结构转换的工作过程
2012/04/17 面试题
施工安全协议书
2013/12/11 职场文书
受伤赔偿协议书
2014/09/24 职场文书
鲁迅故居导游词
2015/02/05 职场文书
Python排序算法之插入排序及其优化方案详解
2021/06/11 Python