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 相关文章推荐
window.onbeforeunload方法在IE下无法正常工作的解决办法
Jan 23 Javascript
javascript cookie操作类的实现代码小结附使用方法
Jun 02 Javascript
jQuery实现切换页面布局使用介绍
Oct 09 Javascript
利用js(jquery)操作Cookie的方法说明
Dec 19 Javascript
javascript计算用户打开网页的停留时间
Jan 09 Javascript
JavaScript实现控制打开文件另存为对话框的方法
Apr 17 Javascript
JQuery实现超链接鼠标提示效果的方法
Jun 10 Javascript
JavaScript html5 canvas画布中删除一个块区域的方法
Jan 26 Javascript
jquery form表单获取内容以及绑定数据
Feb 24 Javascript
详解Vue+ElementUI从零开始搭建自己的网站(一、环境搭建)
Apr 30 Javascript
Vue多环境代理配置方法思路详解
Jun 21 Javascript
Vue Router的手写实现方法实现
Mar 02 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
模板引擎Smarty深入浅出介绍
2006/12/06 PHP
destoon实现不同会员组公司名称显示不同的颜色的方法
2014/08/22 PHP
PHP在线打包下载功能示例
2016/10/15 PHP
php实现与python进行socket通信的方法示例
2017/08/30 PHP
php利用ob_start()清除输出和选择性输出的方法
2018/01/18 PHP
PHP pthreads v3下worker和pool的使用方法示例
2020/02/21 PHP
JavaScript prototype属性使用说明
2010/05/13 Javascript
Jquery ui css framework
2010/06/28 Javascript
jquery text(),val(),html()方法区别总结
2013/11/04 Javascript
setTimeout内不支持jquery的选择器的解决方案
2015/04/28 Javascript
jquery实现手风琴效果
2015/11/20 Javascript
AngularJS基础 ng-href 指令用法
2016/08/01 Javascript
用VueJS写一个Chrome浏览器插件的实现方法
2019/02/27 Javascript
Nodejs让异步变成同步的方法
2019/03/02 NodeJs
Vue.use()在new Vue() 之前使用的原因浅析
2019/08/26 Javascript
JavaScript逻辑运算符相关总结
2020/09/04 Javascript
[49:20]2014 DOTA2国际邀请赛中国区预选赛5.21 CIS VS TongFu
2014/05/22 DOTA
忘记ftp密码使用python ftplib库暴力破解密码的方法示例
2014/01/22 Python
python的random模块及加权随机算法的python实现方法
2017/01/04 Python
Python 专题三 字符串的基础知识
2017/03/19 Python
python框架中flask知识点总结
2018/08/17 Python
详解Python Matplot中文显示完美解决方案
2019/03/07 Python
Python minidom模块用法示例【DOM写入和解析XML】
2019/03/25 Python
Window系统下Python如何安装OpenCV库
2020/03/05 Python
CSS实现定位元素居中的方法
2015/06/23 HTML / CSS
土耳其新趋势女装购物网站:Addax
2020/01/07 全球购物
中国京东和泰国中央集团合资的网站:JD CENTRAL
2020/08/22 全球购物
如何进行Linux分区优化
2016/09/13 面试题
Linux中如何用命令创建目录
2016/12/02 面试题
小学母亲节活动方案
2014/03/14 职场文书
小学班长竞选演讲稿
2014/04/24 职场文书
六查六看剖析材料
2014/10/06 职场文书
信息合作协议书
2014/10/09 职场文书
党的群众路线教育实践活动实施方案
2014/10/31 职场文书
2016年度优秀辅导员事迹材料
2016/02/26 职场文书
解析redis hash应用场景和常用命令
2021/08/04 Redis