JAvascriptヘビ食いしん坊実装コード

習作の過程でヘビ食いゲームを試みJSで実現した.成功したなんて.
構想:10 px*10 pxのdiv層を用いて「画素」を担当し,40*40マトリクス160個の「画素」を用いてゲームのインタフェースを構成した.
コードは次のとおりです.

 
  
// JavaScript Document 
  
alert("          ，     。
LIFE  
http://blog.csdn.net/anhulife"); 
  
//         ， 160 10 * 10          
  
var rowindex = new Array(40); 
  
var colindex; 
  
var cell; 
  
//         
  
var backcolor = "black"; 
  
for(var i = 0; i < 40; i ++ ) 
  
{ 
  
colindex = new Array(40); 
  
for(var j = 0; j < 40; j ++ ) 
  
{ 
  
//           
  
cell = document.createElement("div"); 
  
cell.style.backgroundColor = backcolor; 
  
cell.style.width = "10px"; 
  
cell.style.height = "10px"; 
  
cell.style.position = "absolute"; 
  
cell.style.left = "" + (j * 10 + 100) + "px"; 
  
cell.style.top = "" + (i * 10 + 100) + "px"; 
  
cell.style.overflow = "hidden"; 
  
//      
  
document.body.appendChild(cell); 
  
//      
  
colindex[j] = cell; 
  
} 
  
//      
  
rowindex[i] = colindex; 
  
} 
  
//        ，          
  
function snake() 
  
{ 
  
//       ，     
  
this.bodycolor = "white"; 
  
this.bodys = new Array(); 
  
for(var i = 20; i < 25; i ++ ) 
  
{ 
  
rowindex[20][i].style.backgroundColor = this.bodycolor; 
  
// rowindex         ，      
  
this.bodys.push(rowindex[20][i]); 
  
} 
  
//         ，      ,        
  
this.head = [20, 20]; 
  
//         ，0   、1   、2   、3    
  
this.direct = 0; 
  
} 
  
//      
  
function move() 
  
{ 
  
//               
  
switch(this.direct) 
  
{ 
  
case 0 : 
  
this.head[1] -= 1; 
  
break; 
  
case 1 : 
  
this.head[0] += 1; 
  
break; 
  
case 2 : 
  
this.head[1] += 1; 
  
break; 
  
case 3 : 
  
this.head[0] -= 1; 
  
break; 
  
} 
  
//        
  
if(this.head[0] < 0 || this.head[0] > 39 || this.head[1] < 0 || this.head[1] > 39) 
  
{ 
  
//        false 
  
return false; 
  
} 
  
else 
  
//                  ，        ，      。         false 
  
if(this.head[0] == food[0] && this.head[1] == food[1]) 
  
{ 
  
//       
  
rowindex[this.head[0]][this.head[1]].style.backgroundColor = this.bodycolor; 
  
this.bodys.unshift(rowindex[this.head[0]][this.head[1]]); 
  
score++; 
  
makefood(); 
  
return true; 
  
} 
  
else 
  
//        
  
if(rowindex[this.head[0]][this.head[1]].style.backgroundColor == this.bodycolor) 
  
{ 
  
if(rowindex[this.head[0]][this.head[1]] == this.bodys.pop())//         
  
{ 
  
this.bodys.unshift(rowindex[this.head[0]][this.head[1]]); 
  
return true; 
  
} 
  
//        
  
return false; 
  
} 
  
//         
  
this.bodys.pop().style.backgroundColor = backcolor; 
  
rowindex[this.head[0]][this.head[1]].style.backgroundColor = this.bodycolor; 
  
this.bodys.unshift(rowindex[this.head[0]][this.head[1]]); 
  
return true; 
  
} 
  
snake.prototype.move = move; 
  
//        
  
var foodcolor = "blue"; 
  
var food = [20, 17]; 
  
rowindex[food[0]][food[1]].style.backgroundColor = foodcolor; 
  
function makefood() 
  
{ 
  
var tempfood; 
  
var tempelement; 
  
out : 
  
while(true) 
  
{ 
  
tempfood = [Math.round(Math.random() * 39), Math.round(Math.random() * 39)]; 
  
tempelement = rowindex[tempfood[0]][tempfood[1]]; 
  
for(var i in s.bodys) 
  
{ 
  
if(s.bodys[i] == tempelement) 
  
{ 
  
//                ，      
  
continue out; 
  
} 
  
//        
  
break out; 
  
} 
  
} 
  
food = tempfood; 
  
rowindex[food[0]][food[1]].style.backgroundColor = foodcolor; 
  
} 
  
//           
  
document.onkeydown = turnorstop; 
  
function turnorstop(event) 
  
{ 
  
if(window.event != undefined) 
  
{ 
  
if(parseInt(window.event.keyCode)==32) 
  
{ 
  
alert("    "); 
  
} 
  
else 
  
{ 
  
switch(parseInt(window.event.keyCode)) 
  
{ 
  
case 37 : 
  
if(s.direct!=2) 
  
s.direct = 0; 
  
break; 
  
case 38 : 
  
if(s.direct!=1) 
  
s.direct = 3; 
  
break; 
  
case 39 : 
  
if(s.direct!=0) 
  
s.direct = 2; 
  
break; 
  
case 40 : 
  
if(s.direct!=3) 
  
s.direct = 1; 
  
break; 
  
} 
  
} 
  
} 
  
else 
  
{ 
  
if(parseInt(event.which)==32) 
  
{ 
  
alert("    "); 
  
} 
  
else 
  
{ 
  
switch(parseInt(event.which)) 
  
{ 
  
case 37 : 
  
if(s.direct!=2) 
  
s.direct = 0; 
  
break; 
  
case 38 : 
  
if(s.direct!=1) 
  
s.direct = 3; 
  
break; 
  
case 39 : 
  
if(s.direct!=0) 
  
s.direct = 2; 
  
break; 
  
case 40 : 
  
if(s.direct!=3) 
  
s.direct = 1; 
  
break; 
  
} 
  
} 
  
} 
  
} 
  
//        
  
var s = new snake(); 
  
var time = 60;//       
  
function startmove() 
  
{ 
  
if(s.move()) 
  
{ 
  
setTimeout(startmove, time); 
  
} 
  
else 
  
{ 
  
alert("GAME OVER
     :"+score+" "); 
  
} 
  
} 
  
//     
  
var score = -1; 
  
//     
  
startmove(); 
  
 
 

WebページにこのJSファイルを接続すればよい.