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 相关文章推荐
Javascript 代码也可以变得优美的实现方法
Jun 22 Javascript
Extjs中ComboBox加载并赋初值的实现方法
Mar 22 Javascript
js验证真实姓名与身份证号是否匹配
Oct 13 Javascript
JavaScript+html5 canvas实现本地截图教程
Apr 16 Javascript
JS实现的自定义显示加载等待图片插件(loading.gif)
Jun 17 Javascript
Angularjs中三种数据的绑定策略(“@”,“=”,“&amp;”)
Dec 23 Javascript
BootstrapValidator实现注册校验和登录错误提示效果
Mar 10 Javascript
关于javascript获取内联样式与嵌入式样式的实例
Jun 01 Javascript
javascript中mouseenter与mouseover的异同
Jun 06 Javascript
Webpack4 使用Babel处理ES6语法的方法示例
Mar 07 Javascript
Javascript 类型转换、封闭函数及常见内置对象操作示例
Nov 15 Javascript
vue实现随机验证码功能(完整代码)
Dec 10 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正确配置mysql(apache环境)
2011/08/28 PHP
PHP开启opcache提升代码性能
2015/04/26 PHP
php中二维数组排序问题方法详解
2015/08/28 PHP
PHP实现HTML页面静态化的方法
2015/11/04 PHP
浅谈PHP中new self()和new static()的区别
2017/08/11 PHP
php回调函数处理数组操作示例
2020/04/13 PHP
JS 分号引起的一段调试问题
2009/06/18 Javascript
javascript克隆对象深度介绍
2012/11/20 Javascript
jQuery使用ajaxSubmit()提交表单示例
2014/04/04 Javascript
使用jquery写个更改表格行顺序的小功能
2014/04/29 Javascript
JavaScript实现鼠标滑过处生成气泡的方法
2015/05/16 Javascript
JQuery菜单效果的两个实例讲解(3)
2015/09/17 Javascript
jQuery Mobile框架中的表单组件基础使用教程
2016/05/17 Javascript
jQuery中$.grep() 过滤函数 数组过滤
2016/11/22 Javascript
浅谈mint-ui loadmore组件注意的问题
2017/11/08 Javascript
如何解决jQuery 和其他JS库的冲突
2020/06/22 jQuery
vuex实现购物车功能
2020/06/28 Javascript
Python端口扫描简单程序
2016/11/10 Python
Python正则表达式使用范例分享
2016/12/04 Python
Flask实现跨域请求的处理方法
2018/09/27 Python
通过shell+python实现企业微信预警
2019/03/07 Python
Python使用到第三方库PyMuPDF图片与pdf相互转换
2019/05/03 Python
python3下载抖音视频的完整代码
2019/06/05 Python
Django中使用CORS实现跨域请求过程解析
2019/08/05 Python
Python实现二叉树的最小深度的两种方法
2019/09/30 Python
Python itertools.product方法代码实例
2020/03/27 Python
pytorch读取图像数据转成opencv格式实例
2020/06/02 Python
Agoda.com官方网站:便宜预订全球酒店,高达80%的折扣
2018/04/04 全球购物
美国智能家居专家:tink
2019/06/04 全球购物
Kiwi.com中国:找到特价机票并发现新目的地
2019/10/27 全球购物
求职自荐书范文
2013/12/04 职场文书
母校寄语大全
2014/04/10 职场文书
车贷收入证明范本
2014/09/14 职场文书
工程催款通知书
2015/04/17 职场文书
入党积极分子党小组意见
2015/06/02 职场文书
pytorch finetuning 自己的图片进行训练操作
2021/06/05 Python