JavaScript强化教程 - 六步实现贪食蛇

黄舟原创: 2017-01-21 16:17:10 677浏览

JavaScript强化教程 - 六步实现贪食蛇

1.首先创建div 并且给div加样式

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

给 <style...> 地图（div和表格）、所有的块（蛇头，食物身体加样式）

2.创建地图

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

3.调用createNode函数创建块

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.定时器

function moveNode() {...};

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

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

6.核心逻辑
在第4中的 function moveNode() {...}; 定时执行此函数
实现了：1.移动所有身体
2.移动蛇头
3.创建新块并且新块在蛇尾产生，方向与蛇尾相同
------------------------------------------------------------------------------------------------
实现源码

<!DOCTYPE html> 
<html> 
<head>     
<meta charset="UTF-8">     
<title>Title</title>     
<style>         
* {             
padding: 0;            
 margin: 0;         
 }         
 td {             
 width: 48px;             
 height: 48px;             
 border: solid 1px darkorange;         
 }         
 div {             
 position: absolute;             
 width: 50px;             
 height: 50px;        
  }     
  </style> </head> <body> <div id="pannel" style="width: 500px;height: 500px;z-index: 1;opacity: 0.5"></div> <script>    
   document.write("<table cellspacing='0px'>");     
   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> 
     </body>
     </html>

以上就是JavaScript强化教程 - 六步实现贪食蛇的内容，更多相关内容请关注PHP中文网（m.sbmmt.com）！

JavaScript，贪食蛇 PHP课程 HTML视频教程 CSS视频 JS视频教程 Vue视频教程

声明：本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn核实处理。

上一条：JavaScript强化教程——从简到繁下一条：JavaScript强化教程――DOM编程（两种控制div移动的方法）