萬盛學電腦網

 萬盛學電腦網 >> 腳本專題 >> javascript >> javascript貪吃蛇完整版

javascript貪吃蛇完整版

 這篇文章主要是對javascript貪吃蛇完整版(源碼)進行了詳細的分析介紹,需要的朋友可以過來參考下,希望對大家有所幫助

javascript貪吃蛇完整版 注釋完整,面向對象 代碼如下: <html> <head>     <title>貪吃蛇 Snake v2.4</title> <style>     body{         font-size:9pt;     }     table{         border-collapse: collapse;         border:solid #333 1px;     }     td{         height: 10px;         width: 10px;         font-size: 0px;     }     .filled{         background-color:blue;     } </style> </head> <script>     function $(id){return document.getElementById(id);} /************************************************************** * javascript貪吃蛇 v2.4 <br /> * v2.4修正了蛇身顏色可以隨著蛇前進而移動 **************************************************************/     //貪吃蛇類     var Snake = {         tbl: null,         /**         * body: 蛇身,數組放蛇的每一節,         * 數據結構{x:x0, y:y0, color:color0},         * x,y表示坐標,color表示顏色         **/         body: [],         //當前移動的方向,取值0,1,2,3, 分別表示向上,右,下,左, 按鍵盤方向鍵可以改變它         direction: 0,         //定時器         timer: null,         //速度         speed: 250,         //是否已經暫停         paused: true,         //行數         rowCount: 30,         //列數         colCount: 30,         //初始化         init: function(){             var colors = ['red','orange','yellow','green','blue','purple','#ccc'];             this.tbl = $("main");             var x = 0;             var y = 0;             var colorIndex = 0;             //產生初始移動方向             this.direction = Math.floor(Math.random()*4);             //構造table             for(var row=0;row<this.rowCount;row++){                 var tr=this.tbl.insertRow(-1);                 for(var col=0;col<this.colCount;col++) {                     var td=tr.insertCell(-1);                 }             }             //產生20個松散節點             for(var i=0; i<10; i++){                 x = Math.floor(Math.random()*this.colCount);                 y = Math.floor(Math.random()*this.rowCount);                 colorIndex = Math.floor(Math.random()*7);                 if(!this.isCellFilled(x,y)){                     this.tbl.rows[y].cells[x].style.backgroundColor = colors[colorIndex];                 }             }             //產生蛇頭             while(true){                 x = Math.floor(Math.random()*this.colCount);                 y = Math.floor(Math.random()*this.rowCount);                 if(!this.isCellFilled(x,y)){                     this.tbl.rows[y].cells[x].style.backgroundColor = "black";                     this.body.push({x:x,y:y,color:'black'});                     break;                 }             }             this.paused = true;             //添加鍵盤事件             document.onkeydown= function(e){                 if (!e)e=window.event;                 switch(e.keyCode | e.which | e.charCode){                   case 13: {                     if(Snake.paused){                       Snake.move();                       Snake.paused = false;                     }                     else{                        //如果沒有暫停,則停止移動                       Snake.pause();                       Snake.paused = true;                     }                     break;                   }                     case 37:{//left                         //阻止蛇倒退走                         if(Snake.direction==1){                             break;                         }                         Snake.direction = 3;                         break;                     }                     case 38:{//up                        //快捷鍵在這裡起作用                       if(event.ctrlKey){                          Snake.speedUp(-20);                         break;                       }                         if(Snake.direction==2){//阻止蛇倒退走                             break;                         }                         Snake.direction = 0;                         brea
copyright © 萬盛學電腦網 all rights reserved