jsはウェブページの版を実現して蛇のゲームをむさぼります

原生jsを使って蛇をむさぼり食べるミニゲームを実現しました。まずこのミニゲームのカタログ構造は次の通りです。

ブラウザでindex.htmlを開くと、移動する蛇が現れ、ランダムに生成された食べ物（ここでは一つしか食べられず、次のものが初期化されます）が現れます。ユーザーはキーボードの方向キーで小蛇の移動の方向を制御します。

小蛇が壁に触れた時、つまり画布の縁に触れた時、ゲームは終わります。

次はコードの実現です。
フードモジュール

//        
 (function(){

 //            
 var elements=[];

 //                                      
 function Food(width,height,color,x,y){
 //         20
 this.width=width||20;
 this.height=height||20;
 //          
 this.color=color||"green";
 //           0 
 this.x=x||0;
 this.y=y||0;
 }
 
 //                                 map
 Food.prototype.init=function(map) {
 //     
 //         
 remove();
 //     
 var div=document.createElement("div");
 //       map 
 map.appendChild(div);
 //                
 div.style.width=this.width+"px";
 div.style.height=this.height+"px";
 div.style.backgroundColor=this.color;
 //      
 div.style.position="absolute";
 //         
 this.x=parseInt(Math.random()*(map.offsetWidth/this.width))*this.width;
 this.y=parseInt(Math.random()*(map.offsetHeight/this.height))*this.height;
 //       
 div.style.left=this.x+"px";
 div.style.top=this.y+"px";

 // div     elements   
 elements.push(div);
 }; 

 //           
 function remove(){
 //elements        
 for(var i=0;i<elements.length;i++){
 var ele=elements[i];
 //                    
 ele.parentNode.removeChild(ele);
 //     div    i     
 elements.splice(i,1);
 }
 }

 // Food   window
 window.Food=Food;
 }());

小蛇モジュール

//        
 (function(){

 //           
 var elements=[];

 //        
 function Snake(width,height,direction){
 //        
 this.width=width||20;
 this.height=height||20;
 //       
 this.body=[
 {x:3,y:2,color:"red"},//     
 {x:2,y:2,color:"orange"},//     
 {x:1,y:2,color:"orange"}//     
 ];
 //  
 this.direction=direction||"right";
 }

 //        ，          
 Snake.prototype.init=function(map){
 remove();
 //    
 for(var i=0;i<this.body.length;i++){
 //             
 var obj=this.body[i];
 //  div 
 var div=document.createElement("div");
 //   map 
 map.appendChild(div);
 //  div   
 div.style.position="absolute";
 div.style.width=this.width+"px";
 div.style.height=this.height+"px";
 //    
 div.style.left=obj.x*this.width+"px";
 div.style.top=obj.y*this.height+"px";
 //    
 div.style.backgroundColor=obj.color;
 //    
 // div   elements           
 elements.push(div);
 }
 };

 //      move   
 Snake.prototype.move=function(food,map) {
 //                     
 var i=this.body.length-1;
 //    
 for(;i>0;i--){
 this.body[i].x=this.body[i-1].x;
 this.body[i].y=this.body[i-1].y;
 }

 //                
 switch(this.direction){
 case "right":
 this.body[0].x+=1;
 break;
 case "left":
 this.body[0].x-=1;
 break;
 case "top":
 this.body[0].y-=1;
 break;
 case "bottom":
 this.body[0].y+=1;
 break;
 }

 //         
 //               
 var headX=this.body[0].x*this.width;
 var headY=this.body[0].y*this.height;
 //                   
 if(headX==food.x&&headY==food.y){
 //          
 var last=this.body[this.body.length-1];
 //               
 this.body.push({
 x:last.x,
 y:last.y,
 color:last.color
 });
 //           
 food.init(map);
 }
 };

 //         
 function remove(){
 var i=elements.length-1;
 //                
 for(;i>=0;i--){
 var ele=elements[i];
 //        
 ele.parentNode.removeChild(ele);
 //      
 elements.splice(i,1);
 }
 }

 // Snake   window
 window.Snake=Snake;
 }());

ゲームモジュール

//        
 (function(){

 var that=null;
 //       
 function Game(map){
 this.food=new Food();//    
 this.snake=new Snake();//    
 this.map=map;//  
 that=this;//          that      that   this
 }

 //     
 Game.prototype.init=function(){
 //     
 this.food.init(this.map);
 //     
 this.snake.init(this.map);//      
 //           
 this.runSnake(this.food,this.map);
 //       
 this.bindKey();
 };

 //                 
 Game.prototype.runSnake=function(food,map){
 //   this     
 //setInterval      window    this     
 var timeId=setInterval(function(){
 this.snake.move(food,map);
 this.snake.init(map);
 //        map    style   
 var maxX=map.offsetWidth/this.snake.width;
 //       
 var maxY=map.offsetHeight/this.snake.height;
 var headX=this.snake.body[0].x;
 var headY=this.snake.body[0].y;
 //         
 if(headX<0||headX>=maxX){
 //         
 clearInterval(timeId);
 alert("    ");
 }
 //        
 if(headY<0||headY>=maxY){
 //         
 clearInterval(timeId);
 alert("    ");
 }
 }.bind(that),200);//   that       
 };

 //               
 Game.prototype.bindKey=function(){
 //   this      keydown      --document
 //     this  document
 //       
 document.addEventListener("keydown",function(e){
 switch(e.keyCode){
 case 37: 
 this.snake.direction="left";
 break;
 case 38: 
 this.snake.direction="top";
 break;
 case 39: 
 this.snake.direction="right";
 break;
 case 40: 
 this.snake.direction="bottom";
 break;
 }
 }.bind(that),false);//      
 };

 //   window
 window.Game=Game;
 }());

ホームページ

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>   </title>
 <style>
 .map {
 width: 1800px;
 height: 800px;
 background-color: gray;
 position: relative;
 margin: 0 auto;
 }
 </style>
</head>
<body>
 <!--           -->
 <div class="map"></div>
 <script src="../js/food.js"></script>
 <script src="../js/snake.js"></script>
 <script src="../js/game.js"></script>
 <script>

 //       
 var game=new Game(document.querySelector(".map"));
 //     
 game.init();
 </script>
</body>
</html>

小编はまたみんなのためにすばらしいテーマを用意しました。
以上が本文の全部です。javascriptプログラムの設計を勉強するのに役に立ちます。