JS写的贪吃蛇游戏(个人练习)


Posted in Javascript onJuly 08, 2013

JS贪吃蛇游戏,个人练习之用,放在这备份一下,
JS写的贪吃蛇游戏(个人练习) 

<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>JS贪吃蛇-练习</title> 
<style type="text/css"> 
#pannel table { 
border-collapse: collapse; 
} 
#pannel table td { 
border: 1px solid #808080; 
width: 10px; 
height: 10px; 
font-size: 0; 
line-height: 0; 
overflow: hidden; 
} 
#pannel table .snake { 
background-color: green; 
} 
#pannel table .food { 
background-color: blue; 
} 
</style> 
<script type="text/javascript"> 
var Direction = new function () { 
this.UP = 38; 
this.RIGHT = 39; 
this.DOWN = 40; 
this.LEFT = 37; 
}; 
var Common = new function () { 
this.width = 20; /*水平方向方格数*/ 
this.height = 20; /*垂直方向方格数*/ 
this.speed = 250; /*速度 值越小越快*/ 
this.workThread = null; 
}; 
var Main = new function () { 
var control = new Control(); 
window.onload = function () { 
control.Init("pannel"); 
/*开始按钮*/ 
document.getElementById("btnStart").onclick = function () { 
control.Start(); 
this.disabled = true; 
document.getElementById("selSpeed").disabled = true; 
document.getElementById("selSize").disabled = true; 
}; 
/*调速度按钮*/ 
document.getElementById("selSpeed").onchange = function () { 
Common.speed = this.value; 
} 
/*调大小按钮*/ 
document.getElementById("selSize").onchange = function () { 
Common.width = this.value; 
Common.height = this.value; 
control.Init("pannel"); 
} 
}; 
}; 
/*控制器*/ 
function Control() { 
this.snake = new Snake(); 
this.food = new Food(); 
/*初始化函数,创建表格*/ 
this.Init = function (pid) { 
var html = []; 
html.push("<table>"); 
for (var y = 0; y < Common.height; y++) { 
html.push("<tr>"); 
for (var x = 0; x < Common.width; x++) { 
html.push('<td id="box_' + x + "_" + y + '"> </td>'); 
} 
html.push("</tr>"); 
} 
html.push("</table>"); 
this.pannel = document.getElementById(pid); 
this.pannel.innerHTML = html.join(""); 
}; 
/*开始游戏 - 监听键盘、创建食物、刷新界面线程*/ 
this.Start = function () { 
var me = this; 
this.MoveSnake = function (ev) { 
var evt = window.event || ev; 
me.snake.SetDir(evt.keyCode); 
}; 
try { 
document.attachEvent("onkeydown", this.MoveSnake); 
} catch (e) { 
document.addEventListener("keydown", this.MoveSnake, false); 
} 
this.food.Create(); 
Common.workThread = setInterval(function () { 
me.snake.Eat(me.food); me.snake.Move(); 
}, Common.speed); 
}; 
} 
/*蛇*/ 
function Snake() { 
this.isDone = false; 
this.dir = Direction.RIGHT; 
this.pos = new Array(new Position()); 
/*移动 - 擦除尾部,向前移动,判断游戏结束(咬到自己或者移出边界)*/ 
this.Move = function () { 
document.getElementById("box_" + this.pos[0].X + "_" + this.pos[0].Y).className = ""; 
//所有 向前移动一步 
for (var i = 0; i < this.pos.length - 1; i++) { 
this.pos[i].X = this.pos[i + 1].X; 
this.pos[i].Y = this.pos[i + 1].Y; 
} 
//重新设置头的位置 
var head = this.pos[this.pos.length - 1]; 
switch (this.dir) { 
case Direction.UP: 
head.Y--; 
break; 
case Direction.RIGHT: 
head.X++; 
break; 
case Direction.DOWN: 
head.Y++; 
break; 
case Direction.LEFT: 
head.X--; 
break; 
} 
this.pos[this.pos.length - 1] = head; 
//遍历画蛇,同时判断游戏结束 
for (var i = 0; i < this.pos.length; i++) { 
var isExits = false; 
for (var j = i + 1; j < this.pos.length; j++) 
if (this.pos[j].X == this.pos[i].X && this.pos[j].Y == this.pos[i].Y) { 
isExits = true; 
break; 
} 
if (isExits) { this.Over();/*咬自己*/ break; } 
var obj = document.getElementById("box_" + this.pos[i].X + "_" + this.pos[i].Y); 
if (obj) obj.className = "snake"; else { this.Over();/*移出边界*/ break; } 
} 
this.isDone = true; 
}; 
/*游戏结束*/ 
this.Over = function () { 
clearInterval(Common.workThread); 
alert("游戏结束!"); 
} 
/*吃食物*/ 
this.Eat = function (food) { 
var head = this.pos[this.pos.length - 1]; 
var isEat = false; 
switch (this.dir) { 
case Direction.UP: 
if (head.X == food.pos.X && head.Y == food.pos.Y + 1) isEat = true; 
break; 
case Direction.RIGHT: 
if (head.Y == food.pos.Y && head.X == food.pos.X - 1) isEat = true; 
break; 
case Direction.DOWN: 
if (head.X == food.pos.X && head.Y == food.pos.Y - 1) isEat = true; 
break; 
case Direction.LEFT: 
if (head.Y == food.pos.Y && head.X == food.pos.X + 1) isEat = true; 
break; 
} 
if (isEat) { 
this.pos[this.pos.length] = new Position(food.pos.X, food.pos.Y); 
food.Create(this.pos); 
} 
}; 
/*控制移动方向*/ 
this.SetDir = function (dir) { 
switch (dir) { 
case Direction.UP: 
if (this.isDone && this.dir != Direction.DOWN) { this.dir = dir; this.isDone = false; } 
break; 
case Direction.RIGHT: 
if (this.isDone && this.dir != Direction.LEFT) { this.dir = dir; this.isDone = false; } 
break; 
case Direction.DOWN: 
if (this.isDone && this.dir != Direction.UP) { this.dir = dir; this.isDone = false; } 
break; 
case Direction.LEFT: 
if (this.isDone && this.dir != Direction.RIGHT) { this.dir = dir; this.isDone = false; } 
break; 
} 
}; 
} 
/*食物*/ 
function Food() { 
this.pos = new Position(); 
/*创建食物 - 随机位置创建立*/ 
this.Create = function (pos) { 
document.getElementById("box_" + this.pos.X + "_" + this.pos.Y).className = ""; 
var x = 0, y = 0, isCover = false; 
/*排除蛇的位置*/ 
do { 
x = parseInt(Math.random() * (Common.width - 1)); 
y = parseInt(Math.random() * (Common.height - 1)); 
isCover = false; 
if (pos instanceof Array) { 
for (var i = 0; i < pos.length; i++) { 
if (x == pos[i].X && y == pos[i].Y) { 
isCover = true; 
break; 
} 
} 
} 
} while (isCover); 
this.pos = new Position(x, y); 
document.getElementById("box_" + x + "_" + y).className = "food"; 
}; 
} 
function Position(x, y) { 
this.X = 0; 
this.Y = 0; 
if (arguments.length >= 1) this.X = x; 
if (arguments.length >= 2) this.Y = y; 
} 
</script> 
</head> 
<body> 
<div id="pannel" style="margin-bottom: 10px;"></div> 
<select id="selSize"> 
<option value="20">20*20</option> 
<option value="30">30*30</option> 
<option value="40">40*40</option> 
</select> 
<select id="selSpeed"> 
<option value="500">速度-慢</option> 
<option value="250" selected="selected">速度-中</option> 
<option value="100">速度-快</option> 
</select> 
<input type="button" id="btnStart" value="开始" /> 
</body> 
</html>
Javascript 相关文章推荐
Javascript学习笔记5 类和对象
Jan 11 Javascript
js点击页面其它地方将某个显示的DIV隐藏
Jul 12 Javascript
jquery实现简单的自动播放幻灯片效果
Jun 13 Javascript
js实现文本框宽度自适应文本宽度的方法
Aug 13 Javascript
javascript创建含数字字母的随机字符串方法总结
Aug 01 Javascript
图文详解JavaScript的原型对象及原型链
Aug 02 Javascript
浅谈es6语法 (Proxy和Reflect的对比)
Oct 24 Javascript
vue select组件的使用与禁用实现代码
Apr 10 Javascript
js计算最大公约数和最小公倍数代码实例
Sep 11 Javascript
何时/使用 Vue3 render 函数的教程详解
Jul 25 Javascript
jQuery插件实现图片轮播效果
Oct 19 jQuery
二维码条形码生成的JavaScript脚本库
Jul 07 Javascript
jquery click([data],fn)使用方法实例介绍
Jul 08 #Javascript
js 得到文件后缀(通过正则实现)
Jul 08 #Javascript
php 中序列化和json使用介绍
Jul 08 #Javascript
浅析JS刷新框架中的其他页面 &amp;&amp; JS刷新窗口方法汇总
Jul 08 #Javascript
解析javascript 浏览器关闭事件
Jul 08 #Javascript
JS Jquery 遍历,筛选页面元素 自动完成(实现代码)
Jul 08 #Javascript
如何使用JS获取IE上传文件路径(IE7,8)
Jul 08 #Javascript
You might like
地球防卫队:陪着奥特曼打小怪兽的人类力量 那些经典队服
2020/03/08 日漫
php中如何同时使用session和cookie来保存用户登录信息
2013/07/05 PHP
php实现压缩多个CSS与JS文件的方法
2014/11/11 PHP
PHP学习笔记(一):基本语法之标记、空白、和注释
2015/04/17 PHP
php数据访问之查询关键字
2016/05/09 PHP
php curl获取到json对象并转成数组array的方法
2018/05/31 PHP
针对PHP开发安全问题的相关总结
2019/03/22 PHP
PHP获取php,mysql,apche的版本信息及更多服务器信息
2021/03/09 PHP
25个优雅的jQuery Tooltip插件推荐
2011/05/25 Javascript
分享几个超级震憾的图片特效
2012/01/08 Javascript
alert中断settimeout计时功能
2013/07/26 Javascript
表单元素与非表单元素刷新区别详细解析
2013/11/06 Javascript
javascript跨浏览器的属性判断方法
2014/03/16 Javascript
jquery 按键盘上的enter事件
2014/05/11 Javascript
初识Node.js
2015/03/20 Javascript
JQuery实现的图文自动轮播效果插件
2015/06/19 Javascript
AngularJS中如何使用$parse或$eval在运行时对Scope变量赋值
2016/01/25 Javascript
简单谈谈require模块化jquery和angular的问题
2017/06/23 jQuery
jQuery实现的模仿雨滴下落动画效果
2018/12/11 jQuery
vue.js的双向数据绑定Object.defineProperty方法的神奇之处
2019/01/18 Javascript
详解Puppeteer前端自动化测试实践
2019/02/21 Javascript
使用webpack搭建vue项目实现脚手架功能
2019/03/15 Javascript
[04:44]DOTA2英雄梦之声_第12期_矮人直升机
2014/06/21 DOTA
详细解读Python的web.py框架下的application.py模块
2015/05/02 Python
解析Python中while true的使用
2015/10/13 Python
Python实现删除文件中含“指定内容”的行示例
2017/06/09 Python
python3+PyQt5 实现Rich文本的行编辑方法
2019/06/17 Python
Django logging配置及使用详解
2019/07/23 Python
keras模型可视化,层可视化及kernel可视化实例
2020/01/24 Python
Roots加拿大官网:加拿大休闲服饰品牌
2016/10/24 全球购物
LN-CC美国:伦敦时尚生活的缩影
2019/02/19 全球购物
我为自己代言广告词
2014/03/18 职场文书
铁路安全反思材料
2014/12/24 职场文书
计划生育个人总结
2015/03/02 职场文书
李白经典诗之一:全文无一“月”字,却句句有月
2019/07/12 职场文书
请求模块urllib之PYTHON爬虫的基本使用
2022/04/08 Python