分類  >  WEB開發 >

也發個簡單的小遊戲,貪吃蛇.解決思路

tags:    時間:2013-12-09 22:53:44
也發個簡單的小遊戲,貪吃蛇...
HTML code
  <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>貪吃蛇 by freewind</title> <style type="text/css"> html, body{    margin:0px; padding:0px; font-size:12px; font-family:"Courier New";} #snake{ width:550px; height:400px; margin:50px auto; overflow:hidden;} #game{ float:left; width:402px; height:302px; border:1px solid #004578;} #game table{ width:401px; height:301px; border-collapse:collapse; } #game table td{    width:9px; height:9px; line-height:9px; font-size:2px; overflow:hidden; border:1px solid #fff;} #game .bg{ background:#0a0;} #game .food{ background:#c00;} #info{ float:right; width:128px; line-height:35px;} #info input{ margin-top:10px; margin-bottom:10px;} </style> <script type="text/javascript"> var $ = function(id){     return typeof id == "string" ? document.getElementById(id) : id; } var Snake = {     init : function(){                 var self = this;         $("start").onclick = function(){             self.start();             this.blur();         };         $("pause").onclick = function(){             self.pause();             this.blur();         };         document.onkeydown = function(event){              self.control(event)          };         this.maxRow = 30;         this.maxCol = 40;     },         initHtml : function(){         $("game").innerHTML = "<table cellpadding='0' cellspacing='0' border='0'>" + new Array(31).join("<tr>"+new Array(41).join("<td>&nbsp;</td>")+"</tr>") + "</table>";         this.table = $("game").getElementsByTagName("table")[0];         $("score").innerHTML = 0;         $("pause").value = "暫停";     },     start : function(){         var self = this;         this.initHtml();         this.food = [];         this.dir = 39;         this.data = [[15,21],[15,20],[15,19],[15,18]];         this.status = 1;         this.speed = 200;         this.score = 0;                  this.stop();         this.timerID = setInterval(function(){self.timer();}, this.speed);         this.next();         this.draw();     },     pause : function(){         var self = this;         if(this.status == 1){             this.stop();             this.status = 2;             $("pause").value = "繼續";         }else if(this.status == 2){             this.timerID = setInterval(function(){self.timer();}, this.speed);             this.status = 1;             $("pause").value = "暫停";         }     },     stop : function(){         clearInterval(this.timerID);     },     setCss : function(row, col, css){         this.table.rows[row].cells[col].className = css;     },     getCss : function(row, col){         return this.table.rows[row].cells[col].className;     },     timer : function(){         var d = this.data, self = this;         var first = [d[0][0], d[0][1]];         switch(this.dir){             case 37: //left                 first[1] = first[1] - 1 < 0 ? this.maxCol-1 : first[1] - 1; break;             case 39: //right                 first[1] = first[1] + 1 >= this.maxCol ? 0 : first[1] + 1;  break;             case 38: //up                 first[0] = first[0] - 1 < 0 ? this.maxRow-1 : first[0] - 1; break;             case 40: //down                 first[0] = first[0] + 1 >= this.maxRow ? 0 : first[0] + 1;  break;         }         var css = this.getCss(first[0], first[1]);         if(css == "bg"){             this.gameOver();             return;         }         if(css == "food"){             this.next();             this.score += 100;             this.speed = this.speed > 50 ? this.speed - 10 : 50;             clearInterval(this.timerID);             this.timerID = setInterval(function(){self.timer();}, this.speed);             $("score").innerHTML = this.score;         }else{             var last = d.pop();             this.setCss(last[0], last[1], "");                     }         this.setCss(first[0], first[1], "bg");         d.unshift(first);     },     control : function(event){         var keyCode = event ? event.keyCode : window.event.keyCode;         if(this.status == 1 && keyCode >= 37 && keyCode <= 40){             if(Math.abs(keyCode - this.dir) == 2){                 this.data = this.data.reverse();             }             this.dir = keyCode;         }     },     next : function(){         var d = this.data;         while(true){             var row = parseInt(Math.random() * this.maxRow),                 col = parseInt(Math.random() * this.maxCol),                 isFound = false;             for(var i = 0; i < d.length; i++){                 if(d[i][0] == row && d[i][1] == col){                     isFound = true;                     break;                 }             }             if(!isFound){                 break;             }         }         this.food = [row, col];         this.setCss(row, col, "food");     },     draw : function(){         for(var i = 0, d = this.data; i < d.length; i++){             this.setCss(d[i][0], d[i][1], "bg");;         }     },     gameOver : function(){         this.stop();         this.status = 0;         alert("game over");     },     dispose : function(){         this.stop();         document.onkeydown = $("start").onclick = $("pause").onclick = null;     } }; window.onload = function(){     Snake.init(); }; window.onunload = function(){     Snake.dispose(); }; </script> </head> <body>         <div id="snake">         <div id="game"></div>         <div id="info">             <div>分數:<span id="score">0</span></div>             <div><input type="button" value="開始" id="start" /></div>             <div><input type="button" value="暫停" id="pause" /></div>         </div>     </div> </body> </html>            

推薦閱讀文章

Bookmark the permalink ,來源:互聯網