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