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 document.images实例
May 27 Javascript
javascript写的日历类(基于pj)
Dec 28 Javascript
精心挑选的15个jQuery下拉菜单制作教程
Jun 15 Javascript
jQuery中map()方法用法实例
Jan 06 Javascript
JavaScript使用二分查找算法在数组中查找数据的方法
Apr 07 Javascript
javascript中数组方法汇总
Jul 07 Javascript
如何解决谷歌浏览器下jquery无法获取图片的尺寸
Sep 10 Javascript
Javascript中常见的逻辑题和解决方法
Sep 17 Javascript
详解webpack import()动态加载模块踩坑
Jul 17 Javascript
Bootstrap模态对话框中显示动态内容的方法
Aug 10 Javascript
实例讲解JavaScript预编译流程
Jan 24 Javascript
Vue+ElementUI使用vue-pdf实现预览功能
Nov 26 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
使用 PHPStorm 开发 Laravel
2015/03/24 PHP
php+ajax 实现输入读取数据库显示匹配信息
2015/10/08 PHP
jquery blockUI 遮罩不能消失与不能提交的解决方法
2011/09/17 Javascript
JS左右无缝滚动(一般方法+面向对象方法)
2012/08/17 Javascript
javascript实现tabs选项卡切换效果(自写原生js)
2013/03/19 Javascript
jquery 表格的增行删行实现思路
2013/03/21 Javascript
js 利用image对象实现图片的预加载提高访问速度
2013/03/29 Javascript
jQuery获取当前对象标签名称的方法
2014/02/07 Javascript
jQuery插件实现控制网页元素动态居中显示
2015/03/24 Javascript
AngualrJS中的Directive制作一个菜单
2016/01/26 Javascript
在原生不支持的旧环境中添加兼容的Object.keys实现方法
2017/09/11 Javascript
nodejs 图片预览和上传的示例代码
2017/09/30 NodeJs
Vuejs 实现简易 todoList 功能 与 组件实例代码
2018/09/10 Javascript
vue-cli3+typescript新建一个项目的思路分析
2019/08/06 Javascript
vue中的双向数据绑定原理与常见操作技巧详解
2020/03/16 Javascript
Python用GET方法上传文件
2015/03/10 Python
Python类的定义、继承及类对象使用方法简明教程
2015/05/08 Python
简单介绍Python中的几种数据类型
2016/01/02 Python
Python实现列表转换成字典数据结构的方法
2016/03/11 Python
flask + pymysql操作Mysql数据库的实例
2017/11/13 Python
Python变量赋值的秘密分享
2018/04/03 Python
Python实现 PS 图像调整中的亮度调整
2019/06/28 Python
python redis连接 有序集合去重的代码
2019/08/04 Python
Python调用接口合并Excel表代码实例
2020/03/31 Python
详解Django自定义图片和文件上传路径(upload_to)的2种方式
2020/12/01 Python
如何使用html5与css3完成google涂鸦动画
2012/12/16 HTML / CSS
美国知名的隐形眼镜电商:Contacts America
2019/11/19 全球购物
应届大学生求职信
2013/12/01 职场文书
优秀教师工作感言
2014/02/16 职场文书
电工工作职责范本
2014/02/22 职场文书
一年级小学生评语
2014/04/22 职场文书
房屋产权共有协议书范本
2014/11/03 职场文书
秦始皇兵马俑导游词
2015/02/02 职场文书
工程款催款函
2015/06/24 职场文书
SQL写法--行行比较
2021/08/23 SQL Server
python微信智能AI机器人实现多种支付方式
2022/04/12 Python