456主机测评
此小游戏采用的是面向对象的思想，将蛇，食物，和游戏引擎分为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>
- 海报
