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>