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


Posted in Javascript onMarch 17, 2020

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

我们先把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来判断他的坐标.

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

好的这样我们就得到了一条可爱的小蛇(然鹅并没有看出来哪里可爱- -)。什么?你问我他的头哪去了,很简单,在给元素加了定位以后后面的元素会覆盖掉前面的元素,所以只是头部和身体重叠了你看不到而已。
随后咱们得让这条蛇动起来是吧,那么我们怎么让他动起来呢?原理很简单,我们可以设置一个定时器,每过一个时间就让他动一下,而怎么让他动呢,只需要设置一个数值,让这个值每动一下就+=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实时变化的值,第二块为第一块之前的值,第三块为第二块之前的值。。。以此类推就得到了一个身体跟着头部走的效果

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

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

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的话(也就是跑到了左边的边界),就将当前坐标设置为最大值,这样就可以得到一个边界啦

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

你以为这样就完事啦?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";

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

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

不过我们的小蛇好像对食物并没有什么兴趣呢,路过以后并不会吃掉,所以我们得给他加一个碰撞检测吧,碰撞检测的逻辑很简单,只需要让食物的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类型才可以进行数学运算。

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

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

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

Javascript 相关文章推荐
jquery判断字符输入个数(数字英文长度记为1,中文记为2,超过长度自动截取)
Oct 15 Javascript
JS window对象的top、parent、opener含义介绍
Dec 03 Javascript
JS实现根据当前文字选择返回被选中的文字
May 21 Javascript
Jquery仿IGoogle实现可拖动窗口示例代码
Aug 22 Javascript
深入了解JavaScript中的Symbol的使用方法
Jul 28 Javascript
jquery插件tytabs.jquery.min.js实现渐变TAB选项卡效果
Aug 25 Javascript
如何提高javascript加载速度
Dec 26 Javascript
解决linux下node.js全局模块找不到的问题
May 15 Javascript
详解element-ui日期时间选择器的日期格式化问题
Apr 08 Javascript
vue日历/日程提醒/html5本地缓存功能
Sep 02 Javascript
如何编写一个 Webpack Loader的实现
Oct 18 Javascript
vue element el-transfer增加拖拽功能
Jan 15 Vue.js
JS+CSS+HTML实现“代码雨”类似黑客帝国文字下落效果
Mar 17 #Javascript
js实现简单点赞操作
Mar 17 #Javascript
vue+ESLint 配置保存 自动格式化代码
Mar 17 #Javascript
HTML+JS实现“代码雨”效果源码(黑客帝国文字下落效果)
Mar 17 #Javascript
JavaScript实现横版菜单栏
Mar 17 #Javascript
JavaScript实现留言板案例
Mar 17 #Javascript
es6函数之严格模式用法实例分析
Mar 17 #Javascript
You might like
PHP 内存缓存加速功能memcached安装与用法
2009/09/03 PHP
Thinkphp 中 distinct 的用法解析
2016/12/14 PHP
利用PHP访问MySql数据库的逻辑操作以及增删改查的实例讲解
2017/08/30 PHP
关于Laravel-admin的基础用法总结和自定义model详解
2019/10/08 PHP
Laravel5.5 视图 - 创建视图和数据传递示例
2019/10/21 PHP
js 分栏效果实现代码
2009/08/29 Javascript
纯js分页代码(简洁实用)
2013/11/05 Javascript
javascript格式化json显示实例分析
2015/04/21 Javascript
基于 Node.js 实现前后端分离
2016/04/23 Javascript
搞定immutable.js详细说明
2016/05/02 Javascript
jquery动态切换背景图片的简单实现方法
2016/05/14 Javascript
微信小程序 video组件详解
2016/10/25 Javascript
jQuery的事件预绑定
2016/12/05 Javascript
vue 页面加载进度条组件实例
2018/02/05 Javascript
解决vue的变量在settimeout内部效果失效的问题
2018/08/30 Javascript
NodeJS服务器实现gzip压缩的示例代码
2018/10/12 NodeJs
vue 插件的方法代码详解
2019/06/06 Javascript
package.json配置文件构成详解
2019/08/27 Javascript
vue 虚拟DOM的原理
2020/10/03 Javascript
Python字符串的encode与decode研究心得乱码问题解决方法
2009/03/23 Python
浅析Python 中整型对象存储的位置
2016/05/16 Python
Python基于SMTP协议实现发送邮件功能详解
2018/08/14 Python
如何利用Python分析出微信朋友男女统计图
2019/01/25 Python
python自定义函数实现最大值的输出方法
2019/07/09 Python
Python下opencv图像阈值处理的使用笔记
2019/08/04 Python
利用pyecharts实现地图可视化的例子
2019/08/12 Python
pandas 空数据处理方法详解
2019/11/02 Python
Python应用实现处理excel数据过程解析
2020/06/19 Python
OpenCV+python实现膨胀和腐蚀的示例
2020/12/21 Python
css3 条纹化和透明化表格Firefox下测试成功
2014/04/15 HTML / CSS
Delphi CS笔试题
2014/01/04 面试题
公务员政审材料
2014/12/23 职场文书
晚会主持人开场白台词
2015/05/28 职场文书
退休欢送会致辞
2015/07/31 职场文书
工作自我评价范文
2019/03/21 职场文书
为Java项目添加Redis缓存的方法
2021/05/18 Redis