devbox
人工智能uu
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

贪吃蛇（js）_贪吃蛇js

作者：人工智能uu | 2024-08-19 08:22:38

赞

踩

贪吃蛇js

 

思想：

1、设计蛇：属性有宽、高、方向、状态（有多少节），方法：显示，跑

2、设计食物：属性宽、高

3、显示蛇：根据状态向地图里加元素

4、蛇跑起来：下一节到前一节的位置；当出界时，死亡；当蛇头吃到自己的时候，死亡

5、食物被吃掉，蛇加一节，去掉原来的食物，生成新的食物

6、添加定时器，绑定按键

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>贪吃蛇</title>
  8. </head>
  9. <style>
  10.     *{
  11.         margin: 0px;
  12.         padding: 0px;
  13.     }
  14.     h3{
  15.         margin-top: 10px;
  16.     }
  17.     .bt3{
  18.         margin-left: 10px;
  19.     }
  20.     #map{
  21.         width: 500px;
  22.         height: 500px;
  23.         background-color: pink;
  24.         /* 相对定位 */
  25.         position: relative;
  26.     }
  27.     table{
  28.         /* 绝对定位 */
  29.         position: absolute;
  30.         top: 56.5px;
  31.         left: -2px;
  32.     }
  33.     td{
  34.         width: 48px;
  35.         height: 48px;
  36.     }
  37. </style>
  38. <body>
  39.     <h3 id="score">Score:0</h3>
  40.     <div class="bts">
  41.         <button id="fast">快</button>
  42.         <button id="Moderato">中</button>
  43.         <button id="slow">慢</button>
  44.     </div>
  45.      <!-- 粉色的地图区域  规定map的大小-->
  46.     <div id="map">
  47.  
  48.     </div>
  49. </body>
  50. <script>
  51.     //完成基本的显示内容
  52.     //1.地图 和基本按钮的显示  绘制表格
  53.     //利用js完成一个10行10列表格，每一个表格单元格大小 50*50        
  54.     //通过document.write("进行编写") //网页输出
  55.     // border='1'边框增加1       cellspacing='0'边框之间的间距为0
  56.     document.write("<table border='1' cellspacing='0'>")
  57.         //内部需要10个tr标签 写一个10次循环 每循环一次产生一组tr标签
  58.         for(var i = 0;i<10;i++){
  59.             document.write("<tr>")
  60.                 //十个td ,再来一个循环
  61.                 for(var n = 0;n<10;n++){
  62.                     document.write("<td></td>")
  63.                 }
  64.             document.write("</tr>")
  65.         }
  66.     document.write("</table>")
  67.      //2.产生红色蛇头 以及 蓝色事物
  68.      //封装 一个产生div标签的函数，根据传入参数确定对应的背景色
  69.     function createDiv(color){
  70.          //创建一个 div标签，宽度50 高度50 ，背景色color,如何对应div的位置随机产生，
  71.         //任意定义位置  改变定位属性的left,top来实现对应的位置调整
  72.         var div = document.createElement("div")
  73.         div.style.width="50px"
  74.         div.style.height="50px"
  75.         div.style.backgroundColor=color
  76.         //给创建出来的div添加一个 绝对定位属性
  77.         div.style.position="absolute"
  78.         //使用随机数的概念来 随机产生对应的位置
  79.         // //Math.random() 0-1随机数  小数
  80.         // //发现left和top必须为50的整数倍 ，0-9
  81.         // //产生一个0-9随机数，*50
  82.         div.style.top=parseInt(Math.random()*10)*50+"px"
  83.         div.style.left=parseInt(Math.random()*10)*50+"px"
  84.         var map = document.getElementById("map")
  85.         map.appendChild(div)
  86.         return div
  87.         
  88.     }
  89.     var head = createDiv("red")
  90.     //需要head添加一个方向属性
  91.     head.direction="左"
  92.     var food = createDiv("blue")
  93.     //点击按钮时，让蛇头默认情况下 ，自动的向左侧移动，每一次移动50px
  94.     //点击三个不同的按钮时，启动对应的定时器
  95.     var fast = document.getElementById("fast")
  96.     var Moderato = document.getElementById("Moderato")
  97.     var slow = document.getElementById("slow")
  98.     var t
  99.     var bodyNode=[]
  100.     var s = 0//分数
  101.     //js具有两个变量的作用域：1.全局 2.局部在函数内部定义的变量只在函数内部生效
  102.     fast.onclick=function(){
  103.         window.t =setInterval(move, 200);
  104.         
  105.     }
  106.     Moderato.onclick=function(){
  107.        
  108.         window.t = setInterval(move, 400);
  109.        
  110.     }
  111.     slow.onclick=function(){
  112.       
  113.         window.t = setInterval(move, 700);
  114.     }
  115.    function move (){
  116.         //身体移动
  117.         //永远跟随前一块的移动
  118.         if(bodyNode.length>0){
  119.             for(var n = bodyNode.length-1;n >= 0;n--){
  120.                  //判断当前的每一块身体是否和head重合 ，如果重合证明咬到了身体，停止定时器
  121.                 if(bodyNode[n].style.left == head.style.left&&bodyNode[n].style.top == head.style.top){
  122.                     alert("咬到身体了")
  123.                     clearInterval(window.t)
  124.                 }
  125.             
  126.             switch(bodyNode[n].direction){
  127.                         case "左":
  128.                             var l=parseInt(bodyNode[n].style.left)
  129.                             bodyNode[n].style.left=l-50+"px"
  130.                         break
  131.                         case "右":
  132.                             var l=parseInt(bodyNode[n].style.left)
  133.                             bodyNode[n].style.left=l+50+"px"
  134.                         break
  135.                         case "上":
  136.                             var t=parseInt(bodyNode[n].style.top)
  137.                             bodyNode[n].style.top=t-50+"px"
  138.                         break
  139.                         case "下":
  140.                             var t=parseInt(bodyNode[n].style.top)
  141.                             bodyNode[n].style.top=t+50+"px"
  142.                         break
  143.                     }
  144.                     if(n==0){
  145.                         bodyNode[n].direction= head.direction
  146.                     }else{
  147.                         bodyNode[n].direction=bodyNode[n-1].direction
  148.                     }
  149.         }
  150.     }
  151.         //头部移动
  152.         switch(head.direction){
  153.             case "左":
  154.             var l = parseInt(head.style.left)
  155.             head.style.left = l-50+"px"
  156.             break
  157.             case "右":
  158.             var l = parseInt(head.style.left)
  159.             head.style.left = l+50+"px"
  160.             break
  161.             case "上":
  162.             var t = parseInt(head.style.top)
  163.             head.style.top = t-50+"px"
  164.             break
  165.             case "下":
  166.             var t = parseInt(head.style.top)
  167.             head.style.top = t+50+"px"
  168.             break
  169.         }    
  170.         //检测是否和食物发生了对应的碰撞
  171.         //如何判断碰撞 两个的元素位置完全相同 ，left==left top==top
  172.         if(food.style.top == head.style.top && food.style.left == head.style.left){
  173.             //产生一个黄色身体，当前贪吃蛇身体最后一块的后方 
  174.             //明确谁是最后一块，操作每一块身体 bodyNodes
  175.             var body = createDiv("yellow")
  176.             //目前位置随机，跟在最后一块后面
  177.             //找到当前的最后一块
  178.             //数组中的最后一个内容，数组中如果是空？ 蛇头是最后一块
  179.             var lastNode
  180.             if(bodyNode.length==0){
  181.                 lastNode = head
  182.             }else{
  183.                 lastNode = bodyNode[bodyNode.length-1]
  184.             }
  185.             //body的位置要规矩当前最后一块的移动方向来决定
  186.             switch(lastNode.direction){
  187.                     case "上":
  188.                         body.style.left=lastNode.style.left
  189.                         body.style.top=parseInt(lastNode.style.top)+50+"px"
  190.                     break
  191.                     case "下":
  192.                         body.style.left=lastNode.style.left
  193.                         body.style.top=parseInt(lastNode.style.top)-50+"px"
  194.                     break
  195.                     case "左":
  196.                         body.style.top=lastNode.style.top
  197.                         body.style.left=parseInt(lastNode.style.left)+50+"px"
  198.                     break
  199.                     case "右":
  200.                         body.style.top=lastNode.style.top
  201.                         body.style.left=parseInt(lastNode.style.left)-50+"px"
  202.                     break
  203.                 }
  204.             //新产生的身体 移动方向 最后一块的移动方向保持一致
  205.             body.direction = lastNode.direction
  206.             //将新产生的身体放入数组中
  207.             bodyNode.push(body)
  208.             //将新产生的身体放入数组中
  209.             food.style.top=parseInt(Math.random()*10)*50+"px"
  210.             food.style.left=parseInt(Math.random()*10)*50+"px"
  211.             //分数增加
  212.             var score = document.getElementById("score")
  213.             s+=1
  214.             score.innerHTML="Score:"+s  
  215.         }
  216.         //死亡检测 判断蛇头是否跑出题图
  217.         //蛇头从左侧跑出地图 
  218.         if(parseInt(head.style.left)>500||parseInt(head.style.left)<0||parseInt(head.style.top)<0||parseInt(head.style.top)>500){
  219.             alert("撞墙死亡")
  220.             clearInterval(window.t)
  221.         }
  222.     }
  223.  
  224.  
  225.    
  226.         //按键控制div的移动方向
  227.    document.onkeydown=function(event){
  228.         switch(event.keyCode){
  229.             case 37:
  230.             head.direction="左" 
  231.             break
  232.             case 38:
  233.             head.direction="上"
  234.             break
  235.             case 39:
  236.             head.direction="右"
  237.             break
  238.             case 40:
  239.             head.direction="下"
  240.         }
  241.     }
  242.    
  243. </script>
  244. </html>

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/人工智能uu/article/detail/1001454
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号