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 相关文章推荐
基于jquery1.4.2的仿flash超炫焦点图播放效果
Apr 20 Javascript
jQuery Tools tab使用介绍
Jul 14 Javascript
关于img的href和src取变量及赋值的方法
Apr 28 Javascript
jQuery表单域选择器用法分析
Feb 10 Javascript
jQuery实现在下拉列表选择时获取json数据的方法
Apr 16 Javascript
解决JS组件bootstrap table分页实现过程中遇到的问题
Apr 21 Javascript
扩展Bootstrap Tooltip插件使其可交互的方法
Nov 07 Javascript
JS实现重新加载当前页面
Nov 29 Javascript
微信小程序 页面跳转事件绑定的实例详解
Sep 20 Javascript
详解基于Vue+Koa的pm2配置
Oct 24 Javascript
vue移动端使用appClound拉起支付宝支付的实现方法
Nov 21 Javascript
微信小程序scroll-view点击项自动居中效果的实现
Mar 25 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
让你的网站首页自动选择语言转跳
2006/12/06 PHP
thinkphp多层MVC用法分析
2015/12/30 PHP
JavaScript中也使用$美元符号来代替document.getElementById
2010/06/19 Javascript
可以用来调试JavaScript错误的解决方案
2010/08/07 Javascript
js中prototype用法详细介绍
2013/11/14 Javascript
iframe父页面获取子页面参数的方法
2014/02/21 Javascript
jQuery+jRange实现滑动选取数值范围特效
2015/03/14 Javascript
jquery实现红色竖向多级向右展开的导航菜单效果
2015/08/31 Javascript
基于jquery实现全屏滚动效果
2015/11/26 Javascript
javascript设计模式Constructor(构造器)模式
2016/08/19 Javascript
JavaScript动态检验密码强度的实现方法
2016/11/09 Javascript
Jquery删除css属性的简单方法
2016/12/04 Javascript
vue的mixins属性详解
2018/03/14 Javascript
快速解决bootstrap下拉菜单无法隐藏的问题
2018/08/10 Javascript
深入理解NodeJS 多进程和集群
2018/10/17 NodeJs
vue router 用户登陆功能的实例代码
2019/04/24 Javascript
Vue项目中使用jquery的简单方法
2019/05/16 jQuery
NodeJS和浏览器中this关键字的不同之处
2021/03/03 NodeJs
如何在Python函数执行前后增加额外的行为
2016/10/20 Python
用Python将一个列表分割成小列表的实例讲解
2018/07/02 Python
Django objects的查询结果转化为json的三种方式的方法
2018/11/07 Python
python实现归并排序算法
2018/11/22 Python
python多线程调用exit无法退出的解决方法
2019/02/18 Python
Python 限制线程的最大数量的方法(Semaphore)
2019/02/22 Python
Pandas之ReIndex重新索引的实现
2019/06/25 Python
解决Python3下map函数的显示问题
2019/12/04 Python
解决pip安装tensorflow中出现的no module named tensorflow.python 问题方法
2021/02/20 Python
Brasty波兰:香水、化妆品、手表网上商店
2019/04/15 全球购物
国际贸易毕业生自荐书
2014/06/22 职场文书
教师纪念9.18事件演讲稿范文
2014/09/14 职场文书
2014年小学美术工作总结
2014/12/20 职场文书
毕业论文答辩演讲稿
2015/06/23 职场文书
教师读书笔记
2015/06/29 职场文书
搞笑婚礼主持词开场白
2015/11/24 职场文书
2016党风廉政建设心得体会范文
2016/01/25 职场文书
pnpm对npm及yarn降维打击详解
2022/08/05 Javascript