当前位置：Gxlcms > JavaScript > 纯js和css完成贪吃蛇小游戏demo

纯js和css完成贪吃蛇小游戏demo

时间：2021-07-01 10:21:17 帮助过：24人阅读

本文实例为大家分享了js贪吃蛇小游戏demo，纯js和css完成，供大家参考，具体内容如下

  1. <!doctype html>
  2. <html>
  3. <meta charset="utf-8">
  4.  <head>
  5. <style>
  6. *{
  7.   margin: 0;
  8.   padding:0;
  9. }
  10.   .content{
  11.     position: absolute;
  12.     width: 500px;
  13.     height: 500px;
  14.     background-color: #212121;
  15.   }
  16.   .colo{
  17.     width: 48px;
  18.     height: 48px;
  19.     background-color: #E6E6E6;
  20.     border: 1px solid #466F85;
  21.     float: left;
  22.   }
  23.   .head{
  24.     /*background-color: #49DF85;*/
  25.     background-image: url(./img/22.jpg);
  26.     border-radius: 10px;
  27.     background-size: 100%;
  28.     position: absolute;
  29.     height: 48px;
  30.     width: 48px;
  31.   }
  32.    .fruit{
  33.     /*background-color: #49DF85;*/
  34.     background-image: url(./img/fruit.jpg);
  35.     background-size: 100%;
  36.     position: absolute;
  37.     height: 48px;
  38.     width: 48px;
  39.   }
  40.   .score{
  41.     font-family: '黑体';
  42.     left:600px;
  43.     position: absolute;
  44.     height: 50px;
  45.     width: 200px;
  46.     background-color: #212121;
  47.     color: #FFF;
  48.   }
  49.   .newbody{
  50.     position: absolute;
  51.     width: 48px;
  52.     height: 48px;
  53.     background-image: url(./img/33.jpg);
  54.     background-size: 100%;
  55.   }
  56.   .btn{
  57.     font-family: '黑体';
  58.     left:600px;
  59.     top: 100px;
  60.     position: absolute;
  61.     height: 50px;
  62.     width: 100px;
  63.     background-color: #1193FF;
  64.     color: #FFF;
  65.     text-align: center;
  66.     line-height: 50px;
  67.     font-size: 20px;
  68.     cursor: pointer;
  69.     border-radius: 15px;
  70.   }
  71. </style>
  72. </head>
  73. <body>
  74. <div class="content" id="content">
  75. </div>
  76. <div class="btn" id="stop">停止游戏</div>
  77. <div class="btn" style="top:180px" id="start">开启游戏</div>
  78. <div class="btn" style="top:380px" id="gameWay">游戏状态：</div>
  79. <div class="score" id="score" >分数：<p></p></div>
  80. <script type="text/javascript" >
  81. //添加状态
  82. var stop=document.getElementById('stop');
  83. var start=document.getElementById("start");
  84. var gameWay=document.getElementById('gameWay');
  85. start.onclick=function(){
  86.   head.value='2';
  87.   incident=setInterval(move,200);
  88. }
  89. stop.onclick=function(){
  90.   clearInterval(incident);
  91. }
  92. //
  93. var content=document.getElementById("content");
  94.   for(var i=0;i<100;i++){
  95.     var div=document.createElement("div");
  96.     div.className="colo";
  97.     content.appendChild(div);
  98.   }
  99. var scoreId=document.getElementById("score");
  100. var scoreNum=0;
  101. var scoreCon=document.createElement("p");
  102. // var scoreText=document.createTextNode(scoreNum);
  103. // scoreCon.appendChild(scoreText);
  104. scoreId.appendChild(scoreCon);
  105. var head=null; //保存蛇头
  106. var fruit=null; //保存果实
  107. var dir=null;   //保存蛇的方向
  108. var body=new Array(); //保存蛇身体增加的部分
  109. var bodyNum=0;  //记录创建了多少个body
  110. //随机创建head和fruit到content里面
  111. function createType(type){
  112.     if(type==1){
  113.       //创建随机数
  114.       var row = parseInt(Math.random() * 6 +2);
  115.       var col = parseInt(Math.random() * 6 +2);
  116.       head=document.createElement("div");
  117.       head.className="head";   
  118.       head.style.top=row*50+"px";
  119.       head.style.left=col*50+"px";
  120.       content.appendChild(head);
  121.       // head.style.top=;
  122.       // head.style.left=;
  123.     }
  124.     if(type==2){
  125.       //创建随机数
  126.       var row = parseInt(Math.random() * 6 +2);
  127.       var col = parseInt(Math.random() * 6 +2);
  128.       fruit=document.createElement("div");
  129.       fruit.className="fruit";  
  130.       fruit.style.width="50";
  131.       fruit.style.height="50";
  132.       fruit.style.backgroundColor="#EA2000";
  133.       fruit.style.top=row*50+"px";
  134.       fruit.style.left=col*50+"px";
  135.       content.appendChild(fruit);
  136.     }
  137.   }
  138. //调用创建的道具方法
  139. createType(1);
  140. createType(2);
  141. //蛇头移动函数
  142. var direction=new Array; //存每个新建Body的方向
  143. //转换数
  144. var numss=0;
  145. //自动滑动事件
  146. function move(){
  147.   if(head.value!=""){
  148.       switch(head.value){
  149.       case '1':
  150.         head.style.top=head.offsetTop-50+"px";
  151.       break;
  152.       case '2':
  153.         head.style.top=head.offsetTop+50+"px";
  154.       break;
  155.       case '3':
  156.         head.style.left=head.offsetLeft-50+"px";
  157.       break;
  158.       case '4':
  159.         head.style.left=head.offsetLeft+50+"px";
  160.       break;
  161.       }
  162.   }
  163.   console.log(head.offsetTop);
  164.   if(head.offsetTop>500){
  165.       alert("超出边界！请重新游戏"); 
  166.   }
  167.   // if(head==null){
  168.   // if(head.style.top<0||head.style.top>500||head.style.left<0||head.style.left>500){
  169.  //    alert("超出边界！请重新游戏"); 
  170.  //   }
  171.   if(body.length!=0){
  172.     for(var i=body.length-1;i>=0;i--){
  173.       if(i==0){
  174.         body[0].value=head.value;
  175.       }else{
  176.         body[i].value=body[i-1].value;
  177.       }
  178.     }
  179.   }
  180.   //转换方向
  181.   //如果成功吃掉果实后事件
  182.   if(head.style.top==fruit.style.top&&head.style.left==fruit.style.left){
  183.       var row = parseInt(Math.random() * 6 +2);
  184.       var col = parseInt(Math.random() * 6 +2);
  185.       fruit.style.top=row*50+"px";
  186.       fruit.style.left=col*50+"px";
  187.       //记录分数
  188.       scoreNum=scoreNum+1;
  189.       document.getElementsByTagName('p')[0].innerText="";
  190.       document.getElementsByTagName('p')[0].innerText=scoreNum;
  191.       //创建body部分
  192.       bodyAdd(head.style.top,head.style.left,head.value);
  193.   }
  194.   //控制body跟随head运动部分
  195.      //有身体的时候要动态改变body的值
  196.     if(body.length>0){
  197.       var body01=document.getElementById('body01');
  198.       body01.style.top=head.offsetTop+"px";
  199.       body01.style.left=head.offsetLeft+"px";
  200.         switch(head.value){
  201.         case '1':
  202.           body01.style.top=head.offsetTop+50+"px";
  203.           body01.style.left=head.offsetLeft+"px";
  204.         break;
  205.         case '2':
  206.           body01.style.top=head.offsetTop-50+"px";
  207.           body01.style.left=head.offsetLeft+"px";
  208.         break;
  209.         case '3':
  210.           body01.style.left=head.offsetLeft+50+"px";
  211.           body01.style.top=head.offsetTop+"px";
  212.         break;
  213.         case '4':
  214.           body01.style.left=head.offsetLeft-50+"px";
  215.           body01.style.top=head.offsetTop+"px";
  216.         break;
  217.       }
  218.     }
  219.     if(body.length>1){
  220.       body[bodyNum-1].value=body[bodyNum-2].value;
  221.       for(var i=1;i<body.length;i++){
  222.         var nu=i+1;
  223.         var bodyId=document.getElementById('body0'+nu);
  224.         var body_Id=document.getElementById('body0'+i);
  225.         bodyId.style.top=body_Id.offsetTop+"px";
  226.         bodyId.style.left=body_Id.offsetLeft+"px";
  227.         switch(body[bodyNum-(body.length-i)].value){
  228.           case '1':
  229.             bodyId.style.top=body_Id.offsetTop+50+"px";
  230.             bodyId.style.left=body_Id.offsetLeft+"px";
  231.           break;
  232.           case '2':
  233.             bodyId.style.top=body_Id.offsetTop-50+"px";
  234.             bodyId.style.left=body_Id.offsetLeft+"px";
  235.           break;
  236.           case '3':
  237.             bodyId.style.left=body_Id.offsetLeft+50+"px";
  238.             bodyId.style.top=body_Id.offsetTop+"px";
  239.           break;
  240.           case '4':
  241.             bodyId.style.left=body_Id.offsetLeft-50+"px";
  242.             bodyId.style.top=body_Id.offsetTop+"px";
  243.           break;
  244.       }
  245.     }
  246.    }
  247. }
  248. //创建按钮时间
  249. document.onkeydown=function(){
  250.   var code=event.keyCode;
  251.   switch (code){
  252.     //向上
  253.     case 38:
  254.       head.value='1';
  255.     break;
  256.     //向下
  257.     case 40:
  258.       head.value='2';
  259.     break;
  260.     //向左
  261.     case 37:
  262.       head.value='3';
  263.     break;
  264.     //向右
  265.     case 39:
  266.       head.value='4';
  267.     break;
  268.     console.log(head.value);
  269.   }
  270. }
  271. //身体增加事件
  272. function bodyAdd(top,left,dir){
  273.   if(dir!=""){
  274.     dir=dir;
  275.   }
  276.   else{
  277.     dir=head.value;
  278.   }
  279.   //首次创建body
  280.   if(bodyNum==0){
  281.     var newbody=document.createElement('div');
  282.     newbody.className="newbody";
  283.     newbody.id="body01";
  284.      switch (dir){
  285.       case '1':
  286.         newbody.style.top=head.offsetTop-50+'px';
  287.         newbody.style.left=head.offsetLeft+"px";
  288.       break;
  289.       case '2':
  290.         newbody.style.top=head.offsetTop+50+'px';
  291.         newbody.style.left=head.offsetLeft+"px";
  292.       break;
  293.       case '3':
  294.         newbody.style.left=head.offsetLeft-50+'px';
  295.         newbody.style.top=head.offsetTop+"px";
  296.       break;
  297.       case '4':
  298.         newbody.style.left=head.offsetLeft+50+'px';
  299.         newbody.style.top=head.offsetTop+"px";
  300.       break;
  301.      }
  302.     content.appendChild(newbody);
  303.     bodyNum=bodyNum+1;
  304.     body.push(newbody);
  305.   }else{         
  306.     //第二次及多次创建
  307.     var newbody=document.createElement('div');
  308.     newbody.className="newbody";
  309.     newbody.id="body0"+(body.length+1);
  310.         switch (dir){
  311.         case '1':
  312.           newbody.style.top=body[body.length-1].offsetTop-50+'px';
  313.           newbody.style.left=body[body.length-1].offsetLeft+"px";
  314.         break;
  315.         case '2':
  316.           newbody.style.top=body[body.length-1].offsetTop+50+'px';
  317.           newbody.style.left=body[body.length-1].offsetLeft+"px";
  318.         break;
  319.         case '3':
  320.           newbody.style.left=body[body.length-1].offsetLeft-50+'px';
  321.           newbody.style.top=body[body.length-1].offsetTop+"px";
  322.         break;
  323.         case '4':
  324.           newbody.style.left=body[body.length-1].offsetLeft+50+'px';
  325.           newbody.style.top=body[body.length-1].offsetTop+"px";
  326.         break;
  327.     }
  328.     content.appendChild(newbody);
  329.     bodyNum=bodyNum+1;
  330.     body.push(newbody);
  331.   }
  332.   // body.push(content);
  333. }
  334. //超出边界，重置信息事件
  335. function initialize(){
  336.     //重置果实
  337.     var row = parseInt(Math.random() * 6 +2);
  338.     var col = parseInt(Math.random() * 6 +2);
  339.     fruit.style.top=row*50+"px";
  340.     fruit.style.left=col*50+"px";
  341.     //记录分数
  342.     document.getElementsByTagName('p')[0].innerText="";
  343.     //重置贪食蛇
  344. }
  345. var incident;
  346. incident=setInterval(move,200);
  347. //附加操作
  348. // var btn=document.getElementById('btn');
  349. // btn.onclick=function(){
  350. // clearInterval(incident);
  351. // }
  352. //
  353. </script>
  354.  </body>
  355. </html>

还在不断完善中，希望对大家的学习有所帮助。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

人气教程排行

本站所有资源全部来源于网络，若本站发布的内容侵害到您的隐私或者利益，请联系我们删除！