欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

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

程序员文章站 2022-03-15 21:41:49
...
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);启动定时器

5.

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中文网(www.php.cn)!

相关标签: JavaScript,贪食蛇