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中查找不以XX字符结尾的单词示例代码
Oct 15 Javascript
jquery放大镜效果超漂亮噢
Nov 15 Javascript
前端必备神器 Snap.svg 弹动效果
Nov 10 Javascript
node.js中的fs.readdirSync方法使用说明
Dec 17 Javascript
JavaScript的变量声明提升问题浅析(Hoisting)
Nov 30 Javascript
js实现PC端根据IP定位当前城市地理位置
Feb 22 Javascript
Vue中的v-cloak使用解读
Mar 27 Javascript
详解如何实现Element树形控件Tree在懒加载模式下的动态更新
Apr 25 Javascript
使vue实现jQuery调用的两种方法
May 12 jQuery
JS实现烟花爆炸效果
Mar 10 Javascript
解决vue+webpack项目接口跨域出现的问题
Aug 10 Javascript
详解Vue slot插槽
Nov 20 Vue.js
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实现数据分页显示的简单实例
2016/05/26 PHP
javascript 用原型继承来实现对象系统
2010/03/22 Javascript
Jquery从头学起第四讲 jquery入门教程
2010/08/01 Javascript
JavaScript中使用构造函数实现继承的代码
2010/08/12 Javascript
jQuery用unbind方法去掉hover事件及其他方法介绍
2013/03/18 Javascript
防止浏览器记住用户名及密码的简单实用方法
2013/04/22 Javascript
jQuery实现简单的网页换肤效果示例
2016/09/18 Javascript
javascript稀疏数组(sparse array)和密集数组用法分析
2016/12/28 Javascript
微信小程序 弹幕功能简单实例
2017/02/14 Javascript
Spring shiro + bootstrap + jquery.validate 实现登录、注册功能
2017/06/02 jQuery
vue 动态绑定背景图片的方法
2018/08/10 Javascript
对angularJs中2种自定义服务的实例讲解
2018/09/30 Javascript
vue基于viewer实现的图片查看器功能
2019/04/12 Javascript
js核心基础之闭包的应用实例分析
2019/05/11 Javascript
解决layui的radio属性或别的属性没显示出来的问题
2019/09/26 Javascript
JS操作字符串转数字的常见方法示例
2019/10/29 Javascript
vue iview实现动态新增和删除
2020/06/17 Javascript
解决vue中的无限循环问题
2020/07/27 Javascript
微信小程序 接入腾讯地图的两种写法
2021/01/12 Javascript
[06:42]DOTA2每周TOP10 精彩击杀集锦vol.1
2014/06/25 DOTA
Python多线程爬虫简单示例
2016/03/04 Python
Python+Turtle动态绘制一棵树实例分享
2018/01/16 Python
详解使用Python写一个向数据库填充数据的小工具(推荐)
2020/09/11 Python
Matplotlib中rcParams使用方法
2021/01/05 Python
税务专业毕业生自荐信
2013/11/10 职场文书
简历中自我评价范文3则
2013/12/14 职场文书
生日派对邀请函
2014/01/13 职场文书
食品安全检查制度
2014/02/03 职场文书
工作分析计划书
2014/04/30 职场文书
保护环境倡议书300字
2014/05/19 职场文书
党员公开承诺书内容
2014/05/20 职场文书
个人总结与自我评价
2014/09/18 职场文书
2014年管理人员工作总结
2014/12/01 职场文书
4S店销售内勤岗位职责
2015/04/13 职场文书
甜美蛋糕店的创业计划书模板,拿来即用!
2019/08/21 职场文书
PyQt5实现多张图片显示并滚动
2021/06/11 Python