JQ，JS实现贪吃蛇小游戏

最新推荐文章于 2022-07-21 20:37:31 发布
最新推荐文章于 2022-07-21 20:37:31 发布
阅读量475 收藏 3
点赞数 3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45701008/article/details/104125386
版权

##之前一直想写个贪吃蛇，在网上也没找到可以借鉴的js代码，看见有大神用二十多行就实现了，可惜自己还不会也完全看不懂，于是自己用JS琢磨了两三天，也算是实现了基本功能，莫约两百多行代码，分享出来与大家一起交流。

直接上效果图：贪吃蛇
##饶了一些弯路，因为我是将所有的div都一致化，在之后为了区别边界，又不得不又多套了一个div，前期布局的时候可以将边界和内部的活动区域提前利用属性区别开来。
上代码：
（界面布局）

 <body>
  <div class="Lbody">
   <div class="Mbody01">
    <div class="Sbody01"><h1>贪吃蛇</h1></div>
    <div class="Sbody02">
     <div class="bound">
     <div class="Xbody01"></div>
     <div class="Xbody01"></div>
     <div class="Xbody01"></div>
     <div class="Xbody01"></div>
     <div class="Xbody01"></div>     
     <div class="Xbody01"></div>
     <div class="Xbody01"></div>
     <div class="Xbody01"></div>
     <div class="Xbody01"></div>
     <div class="Xbody01"></div>     
     <div class="Xbody01"></div>
     <div class="Xbody01"></div>
     <div class="Xbody01"></div>
     <div class="Xbody01"></div>
     </div>
     <div class="bound"><div class="Xbody01"></div></div>     
     <div class="Xbody01"></div>
     <div class="Xbody01"></div>
     <div class="Xbody01"></div>
     <div class="Xbody01"></div>
     <div class="Xbody01"></div>     
     <div class="Xbody01"></div>
     <div class="Xbody01"></div>
     <div class="Xbody01"></div>
     <div class="Xbody01"></div>
     <div class="Xbody01"></div>     
     <div class="Xbody01"></div>
     <div class="Xbody01"></div>
     <div class="bound"><div class="Xbody01"></div></div>
     
     <div class="bound"><div class="Xbody01"></div></div>     
     <div class="Xbody01"></div>
     <div class="Xbody01"></div>
     <div class="Xbody01"></div>
     <div class="Xbody01"></div>
     <div class="Xbody01"></div>     
     <div class="Xbody01"></div>
     <div class="Xbody01"></div>
     <div class="Xbody01"></div>
     <div class="Xbody01"></div>
     <div class="Xbody01"></div>     
     <div class="Xbody01"></div>
     <div class="Xbody01"></div>
     <div class="bound"><div class="Xbody01"></div></div>
     
     <div class="bound"><div class="Xbody01"></div></div>     
     <div class="Xbody01"></div>
     <div class="Xbody01"></div>
     <div class="Xbody01"></div>
     <div class="Xbody01"></div>
     <div class="Xbody01"></div>     
     <div class="Xbody01"></div>
     <div class="Xbody01"></div>
     <div class="Xbody01"></div>
     <div class="Xbody01"></div>
     <div class="Xbody01"></div>     
     <div class="Xbody01"></div>
     <div class="Xbody01"></div>
     <div class="bound"><div class="Xbody01"></div></div>
     
     <div class="bound"><div class="Xbody01"></div></div>     
     <div class="Xbody01"></div>
     <div class="Xbody01"></div>
     <div class="Xbody01"></div>
     <div class="Xbody01"></div>
     <div class="Xbody01"></div>     
     <div class="Xbody01"></div>
     <div class="Xbody01"></div>
     <div class="Xbody01"></div>
     <div class="Xbody01"></div>
     <div class="Xbody01"></div>     
     <div class="Xbody01"></div>
     <div class="Xbody01"></div>
     <div class="bound"><div class="Xbody01"></div></div>
     
     <div class="bound"><div class="Xbody01"></div></div>     
     <div class="Xbody01"></div>
     <div class="Xbody01"></div>
     <div class="Xbody01"></div>
     <div class="Xbody01"></div>
     <div class="Xbody01"></div>     
     <div class="Xbody01"></div>
     <div class="Xbody01"></div>
     <div class="Xbody01"></div>
     <div class="Xbody01"></div>
     <div class="Xbody01"></div>     
     <div class="Xbody01"></div>
     <div class="Xbody01"></div>
     <div class="bound"><div class="Xbody01"></div></div>
     
     <div class="bound"><div class="Xbody01"></div></div>     
     <div class="Xbody01"></div>
     <div class="Xbody01"></div>
     <div class="Xbody01"></div>
     <div class="Xbody01"></div>
     <div class="Xbody01"></div>     
     <div class="Xbody01"></div>
     <div class="Xbody01"></div>
     <div class="Xbody01"></div>
     <div class="Xbody01"></div>
     <div class="Xbody01"></div>     
     <div class="Xbody01"></div>
     <div class="Xbody01"></div>
     <div class="bound"><div class="Xbody01"></div></div>
     
     <div class="bound"><div class="Xbody01"></div></div>     
     <div class="Xbody01"></div>
     <div class="Xbody01"></div>
     <div class="Xbody01"></div>
     <div class="Xbody01"></div>
     <div class="Xbody01"></div>     
     <div class="Xbody01"></div>
     <div class="Xbody01"></div>
     <div class="Xbody01"></div>
     <div class="Xbody01"></div>
     <div class="Xbody01"></div>     
     <div class="Xbody01"></div>
     <div class="Xbody01"></div>
     <div class="bound"><div class="Xbody01"></div></div>
     
     <div class="bound"><div class="Xbody01"></div></div>     
     <div class="Xbody01"></div>
     <div class="Xbody01"></div>
     <div class="Xbody01"></div>
     <div class="Xbody01"></div>
     <div class="Xbody01"></div>     
     <div class="Xbody01"></div>
     <div class="Xbody01"></div>
     <div class="Xbody01"></div>
     <div class="Xbody01"></div>
     <div class="Xbody01"></div>     
     <div class="Xbody01"></div>
     <div class="Xbody01"></div>
     <div class="bound"><div class="Xbody01"></div></div>
     
     <div class="bound"><div class="Xbody01"></div></div>     
     <div class="Xbody01"></div>
     <div class="Xbody01"></div>
     <div class="Xbody01"></div>
     <div class="Xbody01"></div>
     <div class="Xbody01"></div>     
     <div class="Xbody01"></div>
     <div class="Xbody01"></div>
     <div class="Xbody01"></div>
     <div class="Xbody01"></div>
     <div class="Xbody01"></div>     
     <div class="Xbody01"></div>
     <div class="Xbody01"></div>
     <div class="bound"><div class="Xbody01"></div></div>
     
     <div class="bound">
     <div class="Xbody01"></div>
     <div class="Xbody01"></div>
     <div class="Xbody01"></div>
     <div class="Xbody01"></div>     
     <div class="Xbody01"></div>
     <div class="Xbody01"></div>
     <div class="Xbody01"></div>
     <div class="Xbody01"></div>
     <div class="Xbody01"></div>     
     <div class="Xbody01"></div>
     <div class="Xbody01"></div>
     <div class="Xbody01"></div>
     <div class="Xbody01"></div>
     <div class="Xbody01"></div>
     </div>
    </div>
  </div>
  <div class="Mbody02">
   <div class="Sbody03">
    <h1>挑战难度</h1>(默认为简单模式)
   </div>
   <div class="Xbody01" id="1">简单</div>
   <div class="Xbody01" id="2">中等</div>
   <div class="Xbody01" id="3">困难</div>
   <h3>时间：0秒</h3>
   <h3>果实：0个</h3>
  </div> 
 </div>
  <div class="Mbody03">
   <input type="button" value="开始" id="start" />
   <input type="button" value="暂停" id="pause" />
   <input type="button" value="结束" id="end" />
  </div>
 </body>
</html>

（CSS样式）：

  <style>
   .Lbody{width: 710px;height: 510px;border: 1px solid firebrick;background-color: salmon;}
   .Mbody01{width: 508px;height: 508px;border: 1px solid firebrick;float: left;}
   .Mbody02{width: 200px;height: 508px;float: left;text-align: center;}
   .Mbody03{width: 710px;height: 110px;border: 1px solid firebrick;text-align: center;line-height: 100px;background-color: salmon;}
   .Sbody01{width: 504px;height: 100px;border: 1px solid firebrick;text-align: center;}
   .Sbody02{width: 504px;height: 400px;border: 1px solid firebrick;}
   .Mbody01 .Xbody01{width: 34px;height: 34px;border: 1px solid whitesmoke;float: left;background-color: #C4E3F3;}
   .Mbody02 .Xbody01{width: 193px;height: 88px;line-height: 88px;background-color: cornsilk;border: solid white;}
   .Mbody02 .Sbody03{height: 82px;margin: 10px;}
   .Mbody03 input{width: 60px;margin: auto 50px;}
  </style>

（jsp程序实现）

  <script>
   var time1;
   var time2;
   var ram1;
   var ram2;
   var speed=500;
   var lon;
   var varl01;
   var varl02;
   var varl03;
   var count;
   var getTime;
   var snake;
   var getResult;
   var num;
   $(function(){
    init1();
    $(".Mbody03 input").on("click",function(){
     $(".Mbody03 input").attr("disabled",false);
     $(this).attr("disabled",true);
     varl01=$(this).attr("id");
     switch(varl01){
      case "start":init1();$(".Mbody03 #pause").attr("disabled",false);$(".Mbody02 .Xbody01").off("click");contrl();break;//开始按钮，主要程序在control里。
      case "pause":$(this).attr("disabled",false);$(this).attr("id","goon");$(this).val("继续");clearInterval(time1);clearInterval(time2);break;//暂停按钮
      case "goon":$(this).attr("disabled",false);$(this).attr("id","pause");$(this).val("暂停");contrl();break;//继续按钮
      default :gameOver();//结束游戏按钮
     }
    })
   })
   function gameOver(){
    alert("游戏结束！共坚持"+getTime/1000+"秒"+"   吃到果实"+count+"个");
    init1();
    $(".Mbody03 input").attr("disabled",true);
    $(".Mbody03 input").first().attr("disabled",false);
   }
   function start(num1,num2){ 
    switch(num2){
     case 0:/num1++;break;
     case 1:num1--;break;
     case 2:num1+=14;break;
     default:num1-=14;
    }
    return num1;
   }   
   function left(num1,num2){
    update();
    if(snake.length<lon){//初始化一条蛇，用数组储存；
      for(var i=0;i<lon;i++){
       if(i==0){
        $(".Mbody01 .Sbody02 .Xbody01").eq(num1).css("background-color","red");
       }else{
        $(".Mbody01 .Sbody02 .Xbody01").eq(num1).css("background-color","coral");
       }
       snake[i]=num1;
       num1=start(num1,num2);    //初始化的运动轨迹。
      }
     }else{//实现蛇的移动
      for(var i=lon-1;i>=0;i--){       
       if(i==0){
        snake[i]=num1;
        $(".Mbody01 .Sbody02 .Xbody01").eq(snake[i]).css("background-color","red");
       }else{
        if(snake[0]==snake[i]){
         gameOver();return;
        }
        snake[i]=snake[i-1];
        $(".Mbody01 .Sbody02 .Xbody01").eq(snake[i]).css("background-color","coral");
       }   
      }
     }
    if(getResult==-1){//出现果实     
     getResult=isBound();     
    }
    if(snake[0]==getResult){ //咬到果实
     count++;
     snake[lon]=snake[lon-1];
     lon++;
     getResult=-1;
    }    
   }
   function leftGo(){
    switch (ram2){
      case 0:     
      case 1:
       $(document).keypress(function(event){//左右方向移动只能控制上下键，我设置的是笔记本键盘上的W/S键，
        switch(event.keyCode){        
           case 119:ram2=2;break;
           case 115:ram2=3;break;
          }
        $(this).off("keypress");
       })
       break;
      case 2:         
      default:
       $(document).keypress(function(event){//上下方向只能控制左右键，我设置的是笔记本键盘的A/D键。
        switch(event.keyCode){
         case 97:ram2=0;break;
         case 100:ram2=1;break;
        }
        $(this).off("keypress");
       })      
       break;     
     }     
    varl01=$(".Mbody01 .Sbody02 .Xbody01").eq(ram1).parent().attr("class");
    if(varl01=="bound"){//如果触碰到边界游戏结束。
     gameOver();
    }else{
     ram1=start1(ram1,ram2);//根据上面的操作控制蛇的移动方向；
     left(ram1,ram2);     
    }    
   }
   function start1(num1,num2){
    switch(num2){
     case 0:num1-=1;break;
     case 1:num1+=1;break;
     case 2:num1-=14;break;
     default:num1+=14;
    }
    return num1;
   }
   function isBound(){//判断蛇头是否选点是否在边界上，如果之前布局只包含了内部活动区域，边界就可以不用判断。
    num=Math.round(Math.random()*153);
    varl01=$(".Mbody01 .Sbody02 .Xbody01").eq(num).parent().attr("class");
    for(var i=0;i<lon;i++){
      if(snake[i]==num||varl01=="bound"){//果实不能出现在蛇身上
       num=Math.round(Math.random()*153);
       return isBound();
      }
     }    
    return num;
   }
   function update(){//更新页面状态
    $(".Mbody01 .Sbody02 .Xbody01").css("background-color","#C4E3F3");
    $(".Mbody01 .Sbody02 .bound").children().css("background-color","#1B6D85");
    if(getResult!=-1){
     $(".Mbody01 .Sbody02 .Xbody01").eq(getResult).css("background-color","yellow");
    }
   }
   function contrl(){ 
    left(ram1,ram2);
    time1=setInterval("leftGo()",speed);//蛇移动的程序
    time2=setInterval(function(){//计时器
     getTime+=100;
     varl03+=100;
     varl02=getTime/1000;
     varl03=(varl03==1000)?0:varl03;
     varl02=varl02<10?("0"+varl02):varl02;
     if(varl03==0){
      $(".Mbody02 h3").eq(0).html("时间："+varl02+".0"+"秒");
     }else{
      $(".Mbody02 h3").eq(0).html("时间："+varl02+"秒");
     }
     varl02=count<10?("0"+count):count;
     $(".Mbody02 h3").eq(1).html("果实："+varl02+"个");
    },100);    
   }
   function init1(){//游戏初始化。
    count=0;
    varl03=0;
    lon=3;
    getTime=0;
    getResult=-1;
    snake=new Array();
    $(".Mbody02 .Xbody01").eq(0).css("background-color"," #C4E3F3");
    $(".Mbody02 .Xbody01").on("click",function(){//难度选择事件
     $(".Mbody02 .Xbody01").css("background-color","cornsilk");
     $(this).css("background-color"," #C4E3F3")
      varl01=$(this).attr("id");
      switch(varl01){
       case "1":speed=500;break;
       case "2":speed=250;break;
       case "3":speed=100;break;
       default:500;
      }
    })
    switch(speed){
       case 100:speed=100;break;
       case 500:speed=500;break;
       case 250:speed=250;break;
       default:500;
      }
    $(".Mbody03 #goon").attr("id","pause");
    $(".Mbody03 #pause").attr("disabled",true);
    $(".Mbody03 #pause").val("暂停");    
    ram2=Math.round(Math.random()*3);
    update();
    ram1=isBound();
    clearInterval(time1);
    clearInterval(time2);
   }
  </script>

（纯粹个人凭空敲出来的，很多地方都是遇见了问题再补充上去解决，所以代码没有做优化处理，不足的地方请大神指出，谢谢！）

懒得多写
关注
  • 3
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
jquery实现贪吃蛇小游戏
12-20
（写的思维混乱，只是想留个纪念，有时间重新写一遍）
使用js+jq实现贪吃蛇网页游戏
aiguan9054的博客
06-26 215
html上的基本框架 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>贪吃蛇游戏</title> 6 <link re...
jQuery 实现贪吃蛇小游戏（你一定能看懂）
仰望天空，妳我亦是行人.
07-21 1674
hello！最近学习了JS，做个小游戏练练（基本上是使用的jQuery），其中部分功能是用于和后端交互的。*注意：这里需要引入一个jQuery文件！！！如下图所示：
jQuery实现贪吃蛇小游戏（附源码下载）
10-20
网上关于JS实现贪吃蛇的文章有很多，最近闲来无事，想着利用jQury来实现贪吃蛇小游戏，下面实现这篇文章主要介绍了利用jQuery实现贪吃蛇小游戏的方法，文中给出的是吸纳思路和示例代码，需要的朋友可以参考下。
jQuery简易小游戏之“贪吃蛇”
cedricdx的博客
09-25 915
jQuery简易小游戏之“贪吃蛇”html代码片段 html代码片段 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <style type="text/css"...
h5+bs+jq 贪吃蛇小游戏
03-03
h5+bs+jq制作的贪吃蛇小游戏，有分数计算，越界死亡
用canvas实现的贪吃蛇小游戏
11-18
以上就是用canvas实现的贪吃蛇小游戏所涵盖的一些关键技术和概念，这些技能在开发互动性的Web应用和游戏时非常实用，也是JavaScript程序员应当掌握的基础。通过学习和实践这样的项目，开发者能够对JavaScript的图形...
jquery实现贪吃蛇功能
Fredrik的博客
07-27 1255
jquery实现贪吃蛇功能
jQuery实现贪吃蛇
qq_43574493的博客
10-07 976
实现最简单的贪吃蛇小游戏，主要需要三个步骤 绘制地图 实现贪吃蛇的移动 判断贪吃蛇当前的运态
用JS做的贪吃蛇小游戏
12-04
用JSP做的贪吃蛇小游戏，下载后稍加修改就可以运行
jQuery小游戏
04-08
基于jQuery的小游戏。使用了HTML、css、jQuery的知识。用于学习jQuery的学生练手
jq+css+html做的小游戏
05-02
jq+css+html做的小游戏 可能还存在一些bug，希望大家能够指正
jQuery实现的几个小游戏
10-27
jQuery实现的几个小游戏，相当不错。你可以放到你的网站下面，累的时候玩一会。
基于JQuery实现的网页小游戏
12-08
使用JQuery实现相关网页小游戏，包括纸牌游戏，围棋游戏，仿QQ对话框
jQuery实现贪吃蛇简单小游戏
C1rq99的博客
05-30 189
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="../code/jq/jquery-3.3.1.min.js"></script> </head> <style> .box { width: 400
基于Jquery简单实现贪吃蛇游戏——代码解析
Jay的博客
10-11 1717
本篇文章我将依照我的实现代码来讲解贪吃蛇游戏的实现。因为贪吃蛇游戏的难点主要是 JS 部分。
基于Jquery编写的贪吃蛇游戏app
Crazydoubao的博客
02-08 3828
本文是基于JS框架中Jquery搭建的适用于手机安装的apk文件，从而实现可直接进入的app。首先该文档是一个html5程序文件，然后借助Eclipse打包成一个android安装文件
jq-2048小游戏
weixin_44892520的博客
10-01 277
```javascript <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <meta name="viewport" content="width=400,maximum-scale=3.0,minimum-scale=0.5,user-scal...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值