JavaScript Strengthening Tutorial - Six Steps to Implementing Snake

JavaScript Enhanced Tutorial - Six Steps to Implementing the Snake

1. First create a div and add styles to the div

<div id="pannel" style="width: 500px;height: 500px;z-index: 1;opacity: 0.5"></div>

to Map (div and table), all blocks (snake head, food body plus style)

2. Create the map

document.write("<table cellspacing=&#39;0px&#39;>");
    for (var i = 0; i < 10; i++) {... }
    document.write("</table>");

3. Call the createNode function to create a block

var pannel = document.getElementById("pannel");
    function createNode(type) {... } //根据type创建块（0头部 1食物 2身体）    //申请一些变量以便以后调用
    var allNode = new Array();//存所有吃到的身体
    var fooldNode = null;//指向食物a
    var headNode = null;//指向头部b
    headNode = createNode(0);//创建头部A
    headNode.value = 39;//给头部一个方向  37左 38上 39右 40下
    fooldNode = createNode(1);//创建食物B

4. Timer

function moveNode() {...};

setInterval(moveNode, 500);启动定时器

5.

document.onkeydown = function () {通过
event.keyCode改变headNode.value
实现用户按键改变蛇头自动移动的方向}

6. Core logic
The function moveNode() {...}; in Chapter 4 executes this function regularly
Achieved: 1. Move all bodies
2. Move the snake head
3. Create a new block and the new block is spawned at the tail of the snake, in the same direction as the tail of the snake
--------------------------------- -------------------------------------------------- -------------
Implementation source code

 
 
     
     
     
   <div id="pannel" style="width: 500px;height: 500px;z-index: 1;opacity: 0.5"></div> <script>    
   document.write("<table cellspacing=&#39;0px&#39;>");     
   for (var i = 0; i < 10; i++) {        
    document.write("<tr>");        
    for (var j = 0; j < 10; j++) {           
      document.write("<td></td>");        
      }       
        document.write("</tr>");    
         }     
         document.write("</table>");    
          //创建头部    
           var pannel = document.getElementById("pannel"); 
               function createNode(type) {         var div = document.createElement("div");       
                 pannel.appendChild(div);         div.style.left = parseInt(Math.random() * 10) * 50 + "px";         
                 div.style.top = parseInt(Math.random() * 10) * 50 + "px";         switch (type) {           
                   case 0:                 div.style.background = "red";//头                 
                   break;           
                     case 1:                 div.style.background = "blue";//食物                 
                     break;         
                         case 2:                 div.style.background = "yellow";//身体               
                           break;    
                              }         return div;     }     var allNode = new Array();     
                              var fooldNode = null;  
                                 var headNode = null;     headNode = createNode(0);     headNode.value = 39;   
                                   fooldNode = createNode(1);     function moveNode() { //移动所有身体       
                                     if (allNode.length > 0) {           
   for (var n = allNode.length - 1; n >= 0; n--) {                 
   switch (parseInt(allNode[n].value)) {                     case 37:                         
   allNode[n].style.left = parseInt(allNode[n].style.left) - 50 + "px";                         
   break;                     case 38:                         
   
   allNode[n].style.top = parseInt(allNode[n].style.top) - 50 + "px";                         
   break;                     case 39:                         
   allNode[n].style.left = parseInt(allNode[n].style.left) + 50 + "px";                         
   break;                     case 40:                         
   allNode[n].style.top = parseInt(allNode[n].style.top) + 50 + "px";                         
   break;                 }                 if(n>0){                     
   allNode[n].value = allNode[n-1].value;                 }else {                     
   allNode[n].value = headNode.value;                 }             }         }         
   var px = parseInt(headNode.style.left);        
    var py = parseInt(headNode.style.top);         switch (headNode.value) {             case 37:                
     headNode.style.left = px - 50 + "px";                 break;             case 38:                 
     headNode.style.top = py - 50 + "px";                 
     break;             case 39:                 headNode.style.left = px + 50 + "px";                 
     break;             case 40:                 
     headNode.style.top = py + 50 + "px";                 break;         }         
     //碰撞检测         
     if (headNode.style.left == fooldNode.style.left &&                 
     headNode.style.top == fooldNode.style.top) {             var newbody = createNode(2);             
     var lastbody = null;             if (allNode.length == 0) {                 
     lastbody = headNode;             } else {                 
     lastbody = allNode[allNode.length - 1];             }             
     newbody.value = lastbody.value; //            
     lastbody.style.left = parseInt(lastbody.style.left)-50+"px";             
     switch (parseInt(lastbody.value)) {                 
     case 37:                     
     newbody.style.left = parseInt(lastbody.style.left) + 50 + "px";                     
     newbody.style.top = lastbody.style.top;                     
     break;                 
     case 38:                     
     newbody.style.top = parseInt(lastbody.style.top) + 50 + "px";        
     newbody.style.left = lastbody.style.left;                     
     break;                 
     case 39:                     
     newbody.style.left = parseInt(lastbody.style.left) - 50 + "px";                     
     newbody.style.top = lastbody.style.top;                     
     break;                 
     case 40:                     newbody.style.top = parseInt(lastbody.style.top) - 50 + "px";         
     newbody.style.left = lastbody.style.left;                     break;             }             
     allNode.push(newbody);             fooldNode.style.left = parseInt(Math.random() * 10) * 50 + "px";             
     fooldNode.style.top = parseInt(Math.random() * 10) * 50 + "px";         }//碰撞end     }     
     setInterval(moveNode, 500);     document.onkeydown = function () {         switch (event.keyCode) {             
     case 37:                 headNode.value = 37;                 break;             
     case 38:                 headNode.value = 38;                 break;             
     case 39:                 headNode.value = 39;                 break;             
     case 40:                 headNode.value = 40;                 break;         }     
     } </script> 
     
     

The above is the JavaScript enhancement tutorial - the six-step implementation of the greedy snake. For more related content, please pay attention to the PHP Chinese website ( www.php.cn)!