js原生实现贪吃蛇（解决连续键盘事件）

最新推荐文章于 2021-04-12 10:05:42 发布

怠惰Zsj

最新推荐文章于 2021-04-12 10:05:42 发布

阅读量5.2k

点赞数 10

分类专栏：笔记文章标签： javascript html css visual studio code

本文链接：https://blog.csdn.net/classOurself/article/details/111419828

版权

本文详细介绍了如何使用JavaScript原生代码实现贪吃蛇游戏，包括解决连续键盘事件问题，防止蛇撞到自己导致游戏结束，确保食物不会生成在蛇身上，增加游戏胜利条件，以及添加开始、重新开始和暂停继续功能。同时，文章还提到了参考CSDN博主的部分思路并修复了一些问题。

摘要由CSDN通过智能技术生成

分析

  把贪吃蛇这个游戏当做一个对象,它又由以下部分组成:
  1.食物; Food （宽，高，颜色，坐标xy）
  2.小蛇; Snake （宽，高，颜色，坐标xy，小蛇移动）
  3.游戏规则；Game(地图map) （游戏结束和胜利，用户键盘控制，解决连续键盘事件）

我们将这三部分也当做三个对象,逐个分析,对它们添加自己的属性和方法,因为地图比较简单只需要设置样式即可,就不做分析,分析顺序按照难度从易到难来分析;(形参皆为游戏对象后期传进去的属性)

声明：本文有借助CSDN博主id:那个方的思路(吐槽下：原贴上缺少地图对象，还有几行莫名代码（可能是缺失对象的）)；然后处理了几个bug，添加了几个功能，如下：

撞击自己game over
食物不会刷新在小蛇的身体上
解决连续键盘事件game.flag
添加游戏胜利条件
添加游戏开始（重新开始）
添加暂停继续

代码如下：（有具体注释）

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>贪吃蛇</title>
    <style type="text/css">
      * {
    
        margin: 0;
      }
      .map {
    
        margin: 40px auto 20px;
        position: relative;
        height: 800px;
        width: 1200px;
        background: rgb(206, 176, 176);
      }
      .control {
    
        margin: 0 auto;
        text-align: center;
      }
      button {
    
        margin: 0 40px 0 40px;
        width: 60px;
        height: 30px;
      }
    </style>
  </head>
  <body>
    <div class="map"></div>
    <div class="control">
      <button class="start">开始</button>
      <button class="stop">暂停</button>
    </div>
    <script>
      // 食物
      ;(function () {
    
        // 用来存储渲染到页面上的食物对象
        var elements = []
        // 创建食物构造函数
        //   有宽高颜色属性 食物的坐标
        function Food(width, height, color) {
    
          this.width = width || 20
          this.height = height || 20
          this.color = color || 'skyblue'
          // 食物的坐标
          this.x = 0
          this.y = 0
        }

        Food.prototype.init = function (map, snake) {
    
          this.removeFood()
          //   创建食物div模型
          var div = document.createElement('div')
          // 食物div的宽高颜色
          div.style.width = this.width + 'px'
          div.style.height = this.height + 'px'
          div.style.backgroundColor = this.color
          // 食物div产生的位置是随机的
          this.x = parseInt(Math.random() * (map.offsetWidth / this.width)