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 相关文章推荐
为Extjs加加速(javascript加速)
Aug 19 Javascript
jquery 与NVelocity 产生冲突的解决方法
Jun 13 Javascript
关于setInterval、setTimeout在jQuery中的使用注意事项
Sep 28 Javascript
js函数调用常用方法详解
Dec 03 Javascript
jQuery绑定事件不执行但alert后可以正常执行
Jun 03 Javascript
使用jQuery在对象中缓存选择器的简单方法
Jun 30 Javascript
js跨浏览器的事件侦听器和事件对象的使用方法
Dec 17 Javascript
Vue.js移动端左滑删除组件的实现代码
Sep 08 Javascript
JS实现div模块的截图并下载功能
Oct 17 Javascript
Vue的路由动态重定向和导航守卫实例
Mar 17 Javascript
node.js express框架实现文件上传与下载功能实例详解
Oct 15 Javascript
利用JS如何获取form表单数据
Dec 19 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
shopex主机报错误请求解决方案(No such file or directory)
2011/12/27 PHP
php代码调试利器firephp安装与使用方法分析
2018/08/21 PHP
Code:loadScript( )加载js的功能函数
2007/02/02 Javascript
JavaScript入门教程(9) Document文档对象
2009/01/31 Javascript
一些常用弹出窗口/拖放/异步文件上传等实用代码
2013/01/06 Javascript
网站如何做到完全不需要jQuery也可以满足简单需求
2013/06/27 Javascript
JavaScript 数组详解
2013/10/10 Javascript
jquery操作select方法汇总
2015/02/05 Javascript
JavaScript通过prototype给对象定义属性用法实例
2015/03/23 Javascript
Nodejs实战心得之eventproxy模块控制并发
2015/10/27 NodeJs
探究Javascript模板引擎mustache.js使用方法
2016/01/26 Javascript
微信小程序 石头剪刀布实例代码
2017/01/04 Javascript
js数组与字符串常用方法总结
2017/01/13 Javascript
vue防止花括号{{}}闪烁v-text和v-html、v-cloak用法示例
2019/03/13 Javascript
vue组件数据传递、父子组件数据获取,slot,router路由功能示例
2019/03/19 Javascript
Python使用Paramiko模块编写脚本进行远程服务器操作
2016/05/05 Python
python anaconda 安装 环境变量 升级 以及特殊库安装的方法
2017/06/21 Python
Python 删除整个文本中的空格,并实现按行显示
2018/07/24 Python
Python3.5 Json与pickle实现数据序列化与反序列化操作示例
2019/04/29 Python
python3实现小球转动抽奖小游戏
2020/04/15 Python
python 求定积分和不定积分示例
2019/11/20 Python
在python中求分布函数相关的包实例
2020/04/15 Python
基于Python的图像阈值化分割(迭代法)
2020/11/20 Python
Python结合百度语音识别实现实时翻译软件的实现
2021/01/18 Python
python3.9和pycharm的安装教程并创建简单项目的步骤
2021/02/03 Python
Perfume’s Club美国官网:西班牙第一家在线美容店
2020/06/10 全球购物
95%的面试官都会问到的50道Java线程题,附答案
2012/08/03 面试题
请介绍一下WSDL的文档结构
2013/03/17 面试题
申请任职学生会干部自荐书范文
2014/02/13 职场文书
艺术设计专业毕业生推荐信
2014/07/08 职场文书
小学生五年级大队长竞选发言稿
2014/09/12 职场文书
党员干部形式主义个人整改措施
2014/09/17 职场文书
2014年城市管理工作总结
2014/12/02 职场文书
《一面五星红旗》教学反思
2016/02/23 职场文书
Java中常用解析工具jackson及fastjson的使用
2021/06/28 Java/Android
九大龙王魂骨,山龙王留下躯干骨,榜首死的最憋屈(被捏碎)
2022/03/18 国漫