JS贪吃蛇

Js实现贪吃蛇小游戏。

程序解析：

	画表格，画出相对应大小的表格速度的快慢调节随机生成事物的位置使用键盘的方向键控制移动位置当贪吃蛇碰到四周游戏结束，弹框显示

效果演示
在这里插入图片描述

代码演示

html内容

<!DOCTYPE html>
<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title></title></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>

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;}

js内容

<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>