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 入门·JavaScript 具有全范围的运算符
Oct 01 Javascript
jquery ajax提交表单数据的两种实现方法
Apr 29 Javascript
基于jquery的blockui插件显示弹出层
Apr 14 Javascript
jqGrid jQuery 表格插件测试代码
Aug 23 Javascript
JavaScript获取和设置CheckBox状态的简单方法
Jul 05 Javascript
iframe父页面获取子页面参数的方法
Feb 21 Javascript
javascript判断数组内是否重复的方法
Apr 21 Javascript
jquery动态添加文本并获取值的方法
Oct 12 Javascript
layui分页效果实现代码
May 19 Javascript
Node.js实现一个HTTP服务器的方法示例
May 13 Javascript
Vue实现开心消消乐游戏算法
Oct 22 Javascript
vue 通过 Prop 向子组件传递数据的实现方法
Oct 30 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
PHP 的 __FILE__ 常量
2007/01/15 PHP
PHP多线程抓取网页实现代码
2010/07/22 PHP
PHP时间戳与日期之间转换的实例介绍
2013/04/19 PHP
php正则表达式使用的详细介绍
2013/04/27 PHP
理解Javascript_15_作用域分配与变量访问规则,再送个闭包
2010/10/20 Javascript
jquery对dom的操作常用方法整理
2013/06/25 Javascript
随鼠标移动的时钟非常漂亮遗憾的是只支持IE
2014/08/12 Javascript
Java File类的常用方法总结
2015/03/18 Javascript
JavaScript实现简单的tab选项卡切换
2016/01/05 Javascript
bootstrap flask登录页面编写实例
2016/11/01 Javascript
webpack+vue中使用别名路径引用静态图片地址
2017/11/20 Javascript
vue+element 模态框表格形式的可编辑表单实现
2019/06/07 Javascript
微信小程序实现多行文字滚动
2020/11/18 Javascript
python使用fileinput模块实现逐行读取文件的方法
2015/04/29 Python
Python利用正则表达式匹配并截取指定子串及去重的方法
2015/07/30 Python
Pycharm学习教程(6) Pycharm作为Vim编辑器使用
2017/05/03 Python
mac 安装python网络请求包requests方法
2018/06/13 Python
python 循环读取txt文档 并转换成csv的方法
2018/10/26 Python
Python 离线工作环境搭建的方法步骤
2019/07/29 Python
详解Python绘图Turtle库
2019/10/12 Python
Python爬取新型冠状病毒“谣言”新闻进行数据分析
2020/02/16 Python
TensorFlow2.X使用图片制作简单的数据集训练模型
2020/04/08 Python
Python使用Numpy模块读取文件并绘制图片
2020/05/13 Python
Python页面加载的等待方式总结
2021/02/28 Python
越南电子产品购物网站:FPT Shop
2017/12/02 全球购物
Seavenger官网:潜水服、浮潜、靴子和袜子
2020/03/05 全球购物
为什么要做架构设计
2015/07/08 面试题
应届大专毕业生个人自荐信
2013/09/22 职场文书
人事专员工作职责
2014/02/22 职场文书
给全校老师的建议书
2014/03/13 职场文书
幽默自我介绍演讲稿
2014/08/21 职场文书
保险公司客户经理岗位职责
2015/04/09 职场文书
2015国庆66周年宣传语
2015/07/14 职场文书
深度学习tensorflow基础mnist
2021/04/14 Python
比较node.js和Deno
2021/04/27 Javascript
VMware虚拟机安装 Windows Server 2022的详细图文教程
2022/09/23 Servers