实战——面向对象+原型实现贪吃蛇

最新推荐文章于 2022-06-05 18:07:41 发布

Felix皇子

最新推荐文章于 2022-06-05 18:07:41 发布

阅读量704

点赞数

CC 4.0 BY-SA版权

分类专栏：前端开发文章标签： JavaScript 贪吃蛇原型面向对象

本文链接：https://blog.youkuaiyun.com/F_Felix/article/details/90112016

本文通过面向对象和原型模式详细讲解如何使用JavaScript实现贪吃蛇游戏。内容包括思路分析、页面代码、Food、Snake和Game对象的定义，以及游戏方法的优化，如将方法定义在原型上，避免全局污染。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

面向对象+原型实现贪吃蛇

前面的那篇贪吃蛇(https://blog.youkuaiyun.com/F_Felix/article/details/89676816)尽管也是用到了面向对象的，但是还有一些可以优化的地方，比如游戏本身同样是个对象，比如使用 JavaScript 中的原型
同样，我们先来分析一下这个贪吃蛇

思路分析

1、总共有几个对象？这里有4个对象，分别是Snake、Food、Game、map，但是为了简单点就把map对象给省略了如果需要可以直接用之前那篇的
2、各个对象分别有哪些属性及方法呢?

Food对象：宽高、颜色、位置属性以及渲染方法(width、height、bgColor、x、y 和render)
Snake对象：宽高、方向、头颜色、身体颜色、身体属性以及渲染和移动方法(width、height、direction、headColor、bodyColor、body、render、move)
Game对象：地图、蛇、食物属性和初始化、初始化游戏、开始游戏、暂停游戏、重置游戏、结束游戏、操作蛇对象(map、snake、food、init、start、pause、control、reset)

3、怎么在之前的基础上进行优化？

把方法定义在原型上，属性定义在构造函数中
使用沙箱把代码包裹起来，避免全局污染
(解释:https://blog.youkuaiyun.com/F_Felix/article/details/90111118)

然后就不多解释了，代码中有注释描述，直接上代码

页面代码

<!-- 样式部分 -->
<style>
  * {
    
    
    margin: 0;
    padding: 0;
  }
  .map {
    
    
    width: 800px;
    height: 500px;
    background-color: #000;
    margin: 0 auto;
    position: relative;
  }
  p {
    
    
    text-align: center;
    line-height: 30px;
  }
  .btn {
    
    
    margin: 0 auto;
    text-align: center;
  }
</style>
<!-- 界面布局部分 -->
<body>
  <div class="btn">
    <button class="begin">开始游戏</button>
    <button class="pause">暂停游戏</button>
    <button class="reset">重启游戏</button>
  </div>
  <p>
    <strong>游戏说明:</strong>Enter--> 开始游戏 Space--> 暂停游戏 Esc--->
    重置游戏 ←↑→↓ 控制方向
  </p>
  <p>蛇每吃10个点速度增加，极限速度50，初始速度200</p>
  <div class="map"></div>
  <script src="food.js"></script>
  <script src="snake.js"></script>
  <script src="game.js"></script>
  <script>
    var map = document.querySelector('.map')
    var btn1 = document.querySelector('.begin')
    var btn2 = document.querySelector('.pause')
    var btn3 = document.querySelector('.reset')
    var g = new Game({
    
    
      map: map
    })
    g.init()

    btn1.onclick = function() {
    
    
      g.start()
    }
    btn2.onclick = function() {
    
    
      g.pause()
    }
    btn3.onclick = function() {
    
    
      g.reset()
    }
    // 解决js中点击了一次按钮，再按回车会触发之前点击按钮的事件
    document.