JavaScript写个贪吃蛇小游戏(超详细)

更新时间：2020年03月17日 16:29:36 作者：小可可咳咳咳

这篇文章主要介绍了JavaScript写个贪吃蛇小游戏(超详细)，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下

贪吃蛇大家都玩过，但你会制作嘛？听起来好像很难的样子，其实非常的简单，话不多说直接上代码

我们先把dom结构写出来

<div id="content">
      <div id="snake">
          <div class="box head"></div>
          <div class="box"></div>

      </div>
  
    </div>

其中，content为整个布局的大盒子，snake就是蛇，里面的box就是他的身体，为了区分头部我们给第一个box加了个head名字用于区分，下面我们再把css加上

<style>
    .box{
      width: 60px;
      height: 60px;
      background-color: red;
      position:absolute;
      left: 0;
      top: 0;
      line-height: 60px;
    }
    .head{
      background-color: yellowgreen;
    }
  </style>

我们给蛇的每一节的宽高设置为60像素，并给了一个定位，因为如果不加定位的话无法让他脱离文档流（在页面中飘起来），而且后续也无法通过left和top来判断他的坐标.

在这里插入图片描述

好的这样我们就得到了一条可爱的小蛇(然鹅并没有看出来哪里可爱- -)。什么？你问我他的头哪去了，很简单，在给元素加了定位以后后面的元素会覆盖掉前面的元素，所以只是头部和身体重叠了你看不到而已。
随后咱们得让这条蛇动起来是吧，那么我们怎么让他动起来呢？原理很简单，我们可以设置一个定时器，每过一个时间就让他动一下，而怎么让他动呢，只需要设置一个数值，让这个值每动一下就+=60，然后通过判断是上下动还是左右动，来给元素的left与top赋值。我们把逻辑写成代码，就出来了如下的代码

<script>
    var boxs = document.querySelectorAll(".box");
    var snake_x = 0;
    var snake_y = 0;
    var turn  = "right";
    setInterval(function(){
      snakeMove();
    },100)
    function snakeMove(){ 
      switch( turn ){
        case "right": snake_x += 60;break;
        case "left" : snake_x -= 60;break;
        case "top"  : snake_y -= 60;break;
        case "bottom": snake_y += 60;break;
      }

      for(var i = boxs.length - 1; i > 0 ; i --){
        boxs[i].style.left = boxs[i - 1].style.left;
        boxs[i].style.top = boxs[i - 1].style.top;
        
      }
      boxs[i].style.left = snake_x + "px";
      boxs[i].style.top = snake_y + "px";

    }
document.onkeydown = function(evt){
      var e = evt || event;
      var keyCode = e.keyCode || e.which;
      switch( keyCode ){
        case 37 : turn = "left";break;
        case 38 : turn = "top";break;
        case 39 : turn = "right";break;
        case 40 : turn = "bottom";break;
      }
    }

</script>

上述代码中，我们给小蛇的初始位置的x和y的坐标都设置为0，并且默认初始向右走，通过键盘上方向键的输入，来改变他的方向。其中，难点在于

for(var i = boxs.length - 1; i > 0 ; i --){
        boxs[i].style.left = boxs[i - 1].style.left;
        boxs[i].style.top = boxs[i - 1].style.top;
        
      }
      boxs[i].style.left = snake_x + "px";
      boxs[i].style.top = snake_y + "px";

这一块代码，这块代码的目的是让后面的元素跟着前面的走，也就是让蛇的每一块身体都跟着上一块去运动，然后最后再给头部设置为snake_x和snake_y当前的值即可，这样就形成了第一块(头部)坐标为
snake_x,snake_y实时变化的值，第二块为第一块之前的值，第三块为第二块之前的值。。。以此类推就得到了一个身体跟着头部走的效果

在这里插入图片描述

但是当你把代码输进去以后一运行会发现，这条小蛇过于顽皮，以至于走到边界以后还会无限的向前走，那这不行啊，总不能让蛇跑了不是，所以得给小蛇加上一个边界

  var snake_x_max = document.documentElement.clientWidth ;
    var snake_y_max = document.documentElement.clientHeight;
if(snake_x > snake_x_max){
        snake_x = 0;
      }
      if(snake_x < 0){
        snake_x = snake_x_max;
      }
      if(snake_y > snake_y_max){
        snake_y = 0;
      }
      if(snake_y < 0){
        snake_y = snake_y_max;
      }

这里我们设置x和y的最大值为当前窗口的宽高，然后通过if语句进行判断，如果当前坐标大于了最大值，就讲当前坐标归0，如果小于0的话(也就是跑到了左边的边界)，就将当前坐标设置为最大值，这样就可以得到一个边界啦

在这里插入图片描述

你以为这样就完事啦？nonono,没有食物吃的蛇怎么能叫做贪吃蛇呢，那是没有灵魂哒。下面我们开始制作食物（不能让蛇饿着是吧）。

<div id="food">
  
      </div>

然后给他加个css

#food{
    width: 60px;
    height: 60px;
    position: absolute;
    background: greenyellow;
  }

然后再绑定一下元素并将他的left和top值设为范围内随机数，这样可以做到随机位置生成

var fd=document.getElementById("food");
    fd.style.left=Math.random()*snake_x_max+"px";
    fd.style.top=Math.random()*snake_y_max+"px";

好的这样我们就得到了一个随机生成的食物

在这里插入图片描述

不过我们的小蛇好像对食物并没有什么兴趣呢，路过以后并不会吃掉，所以我们得给他加一个碰撞检测吧，碰撞检测的逻辑很简单，只需要让食物的left值与头部的left值相减的绝对值<=食物的大小，并且食物的top值与头部的top值相减的绝对值<=食物的大小，设置小于等于是因为如果直接用相等来判断的话，必须两个元素完全重合才行，我们需要的是碰到边缘就算迟到，所以用两个数值相减小于等于来做。然后判断当头部与食物发生碰撞时，将蛇的身体部分克隆一块出来放到蛇的身体里面，并让食物的位置重新刷新(适用克隆为偷懒方法，此偷懒方法仅适用于当小蛇开局自带一个身体的时候，如果小蛇开局不自带身体的话，我们无法克隆已有身体，只能通过createElement去新创建一个身体块出来并添加className后再添加到父元素中去才行)。下面我们把逻辑转换为代码

var dl=snake_x;
    var dt=snake_y;
    var fl=fd.style.left;
    var ft=fd.style.top;
    var dv=document.querySelectorAll("#snake div");
    var sk=document.getElementById("snake");
    var a2=Number(fl.substring(0,fl.indexOf("px")));
    var b2=Number(ft.substring(0,ft.indexOf("px")));
    if(Math.abs(dl-a2)<=60&&Math.abs(dt-b2)<=60){
       fd.style.left=Math.random()*1000+"px";
       fd.style.top=Math.random()*800+"px";
       sk.appendChild(dv[1].cloneNode());
       boxs = document.querySelectorAll(".box");
    }

其中那一大长串的substring的方法是因为获取到的left与top的值的格式是例如”200px”这样的数组，无法进行数学运算，所以要把px给截掉，并将剩下的字符串”200”转换成number类型才可以进行数学运算。

在这里插入图片描述

这样一个简单的贪吃蛇就做好啦~
啥？你问我什么什么类似碰到自己会死这样更多的规则机制咋没写，肯定是因为我懒啊！我连createElement都懒得用直接克隆一个出来了，咋会勤快到把剩下这么多的机制补全呢哈哈。基础机制我已经写出来了，各种奇奇怪怪的机制还是留给小伙伴们自由发挥吧~
PS:大家完全可以把头部的背景图片改成你小伙伴的照片，再把食物改成一些你想让ta吃的东西，可以拿来恶搞啊哈哈哈

到此这篇关于JavaScript写个贪吃蛇小游戏(超详细)的文章就介绍到这了,更多相关js 贪吃蛇内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

js
贪吃蛇

JavaScript+CSS实现仿Mootools竖排弹性动画菜单效果
这篇文章主要介绍了JavaScript+CSS实现仿Mootools竖排弹性动画菜单效果,可实现鼠标滑过菜单项呈现弹性移动显示的效果,具有一定参考借鉴价值,需要的朋友可以参考下
2015-10-10
微信小程序实现视频播放器发送弹幕
这篇文章主要为大家详细介绍了微信小程序实现视频播放器发送弹幕，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2021-04-04
JavaScript实现网页头部进度条刷新
这篇文章主要介绍了JavaScript实现网页头部进度条刷新实例代码，非常不错，具有参考借鉴价值,需要的朋友可以参考下
2017-04-04
asp.net HttpHandler实现图片防盗链
这个例子来自于《Maximizing ASP.NET Real World, Object-Oriented Development》一书, 需要的朋友可以参考下。
2009-11-11
javascript中处理时间戳为日期格式的方法
本文为大家介绍下javascript中如何将时间戳处理为日期格式，下面有个不错的示例，感兴趣的朋友可以参考下
2014-01-01
JavaScript实现模态框拖拽效果
这篇文章主要介绍了通过JavaScript实现模态框拖拽的效果，以及鼠标松开，可以停止拖动模态框移动等功能，感兴趣的小伙伴可以了解一下
2021-12-12
uniapp实现横屏签字版
这篇文章主要为大家详细介绍了uniapp实现横屏签字版，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-07-07
webpack项目使用eslint建立代码规范实现
这篇文章主要介绍了webpack项目使用eslint建立代码规范实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-05-05
学习JavaScript设计模式(单例模式)
这篇文章主要带领大家学习JavaScript设计模式，其中重点介绍单例模式，举例说明单例模式的技术、弊端等，对单例模式进行详细剖析，感兴趣的小伙伴们可以参考一下
2015-11-11
JavaScript实现下载超大文件的方法详解
这篇文章主要为大家详细介绍了JavaScript中实现下载超大文件的相关方法,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下
2024-03-03

JavaScript写个贪吃蛇小游戏(超详细)

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具