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 单引号 传递方法
Jun 22 Javascript
window.returnValue使用方法示例介绍
Jul 03 Javascript
jQuery带箭头提示框tooltips插件集锦
Nov 17 Javascript
学习使用jquery iScroll.js移动端滚动条插件
Mar 24 Javascript
JavaScript 实现的checkbox经典实例分享
Oct 16 Javascript
微信小程序链接传参并跳转新页面
Nov 29 Javascript
解决拦截器对ajax请求的拦截实例详解
Dec 21 Javascript
jquery.rotate.js实现可选抽奖次数和中奖内容的转盘抽奖代码
Aug 23 jQuery
4个顶级开源JavaScript图表库
Sep 29 Javascript
vue+iview 兼容IE11浏览器的实现方法
Jan 07 Javascript
详解element-ui动态限定的日期范围选择器代码片段
Jul 03 Javascript
详谈Vue.js框架下main.js,App.vue,page/index.vue之间的区别
Aug 12 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插入中文到sqlserver 2008里出现乱码的解决办法分享
2012/07/19 PHP
header跳转和include包含问题详解
2012/09/08 PHP
一个简单至极的PHP缓存类代码
2015/10/23 PHP
使用PHP similar text计算两个字符串相似度
2015/11/06 PHP
Zend Framework教程之前端控制器Zend_Controller_Front用法详解
2016/03/07 PHP
Joomla开启SEF的方法
2016/05/04 PHP
PHP Header失效的原因分析及解决方法
2016/11/16 PHP
js列举css中所有图标的实现代码
2011/07/04 Javascript
javascript 判断中文字符长度的函数代码
2012/08/27 Javascript
图片翻转效果具体实现代码
2014/01/09 Javascript
jquery.form.js用法之清空form的方法
2014/03/07 Javascript
jQuery实现当前页面标签高亮显示的方法
2015/03/10 Javascript
javascript中eval函数用法分析
2015/04/25 Javascript
JS实现仿新浪微博发布内容为空时提示功能代码
2015/08/19 Javascript
深入浅析AngularJS中的module(模块)
2016/01/04 Javascript
Sortable.js拖拽排序使用方法解析
2016/11/04 Javascript
JS基于面向对象实现的选项卡效果示例
2016/12/20 Javascript
Vue中如何实现轮播图的示例代码
2017/07/27 Javascript
vue axios post发送复杂对象问题
2019/06/04 Javascript
vue中添加与删除关键字搜索功能
2019/10/12 Javascript
JavaScript 自定义html元素鼠标右键菜单功能
2019/12/02 Javascript
微信小程序点击view动态添加样式过程解析
2020/01/21 Javascript
js获取本日、本周、本月的时间代码
2020/02/01 Javascript
Vue Router 实现动态路由和常见问题及解决方法
2020/03/06 Javascript
vue.js 解决v-model让select默认选中不生效的问题
2020/07/28 Javascript
Javascript var变量删除原理及实现
2020/08/26 Javascript
python使用mailbox打印电子邮件的方法
2015/04/30 Python
从运行效率与开发效率比较Python和C++
2018/12/14 Python
解决Pandas的DataFrame输出截断和省略的问题
2019/02/08 Python
Python读取Excel数据并生成图表过程解析
2020/06/18 Python
长曲棍球装备:Lacrosse Monkey
2020/12/02 全球购物
汽车销售员如何做职业生涯规划
2014/02/16 职场文书
余世维讲座观后感
2015/06/11 职场文书
MongoDB日志切割的三种方式总结
2021/09/15 MongoDB
图片批量处理 - 尺寸、格式、水印等
2022/03/07 杂记
我家女友可不止可爱呢 公开OP主题曲无字幕动画MV
2022/04/11 日漫