javascript小游戏：贪吃蛇
此小游戏采用的是面向对象的思想，将蛇，食物，和游戏引擎分为3个对象来写的。
为方便下载，我把js写在了html中，
源码中暂时没有注释，等有空我在添加点注释吧。
游戏玩法：直接打开html文件即可开始游戏，用键盘的上下左右键控制蛇的移动。
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>贪吃蛇</title>
<style type="text/css">
*{
margin:0; padding:0;
}
#tab{
margin:50px auto;
border:1px solid #000;
border-collapse:collapse;
}
#tab td{
width:20px; height:20px;
border:1px solid #555;
}
.cover{
background:#000;
}
.food{
background:#f00;
}
</style>
<script src="../js/common.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
window.onload = function(){var tab = document.getElementById('tab');for(var i = 0;i<20;i++){
var temptr = document.createElement('tr');
for(var j = 0;j<20;j++){
var temptd = document.createElement('td');
temptr.appendChild(temptd);
}
tab.appendChild(temptr);
}new Game().start();
}function Game(){if(Game.instance) {
return Game.instance;
}var self = this;
this.flag = true;
this.keyJudge = true;
this.body = $('#tab');
this.start = function(){this.flag = true;
new food().show();
this.snk = new snake().print().move();
this.listener();}
this.stop = function(){this.flag = false;
alert("Game Over!");}this.getDom = function(pos){return this.body.children[pos.row].children[pos.col];
}this.listener = function(){document.addEventListener("keydown",function(e){
if(self.keyJudge == true){switch(e.keyCode){case 37: self.snk.dir = self.snk.dir ==3? 3:1; break;
case 38: self.snk.dir = self.snk.dir ==4? 4:2; break;
case 39: self.snk.dir = self.snk.dir ==1? 1:3; break;
case 40: self.snk.dir = self.snk.dir ==2? 2:4; break;}
self.keyJudge = false;}});}Game.instance = this;}function snake(){var self = this;
this.body = [{row:randomInt(0,19),col:randomInt(0,19)}];
this.dir = randomInt(1,4);this.print = function(){ this.body.forEach(function(pos){ new Game().getDom(pos).className = "cover"; });return this;}this.step = function(){switch(this.dir){case 1: this.next = {col:this.body[0].col-1,row:this.body[0].row}; break;
case 2: this.next = {col:this.body[0].col, row:this.body[0].row-1}; break;
case 3: this.next = {col:this.body[0].col+1, row:this.body[0].row}; break;
case 4: this.next = {col:this.body[0].col, row: this.body[0].row+1}; break;}if(this.next.col<0||this.next.col>19||this.next.row<0||this.next.row>19){new Game().stop();}else if(new Game().getDom(this.next).className == "food"){this.body.unshift(this.next);
new food().show();}else if(new Game().getDom(this.next).className == "cover"){new Game().stop();}else{this.body.unshift(this.next);
var del = this.body.pop();
new Game().body.children[del.row].children[del.col].className = "";}this.print();return this;
}this.move = function(){this.speed = 300;
setTimeout(function(){switch(self.body.length){case 5: self.speed = 250; break;
case 10: self.speed = 200; break;
case 15: self.speed = 150; break;
case 20: self.speed = 100; break;
case 30: self.speed = 70;}if(new Game().flag ){
self.step();
new Game().keyJudge = true;
setTimeout(arguments.callee,self.speed);
}}.bind(this),self.speed)return this;
}}function food(){this.show = function(){this.body = {row:randomInt(0,19),col:randomInt(0,19)};while(new Game().getDom(this.body).className == "cover"){
this.body = {row:randomInt(0,19),col:randomInt(0,19)};
} new Game().getDom(this.body).className = "food"; return this;}}</script>
</head>
<body>
<table id = "tab" >
</table>
</body>
</html>
