基于MVC思想实现一个简单的贪吃蛇小游戏

栏目: 后端 · 发布时间: 5年前

内容简介:本案例中采用MVC模式开发,即:Model - View - Control 。这样做的好处是什么?四个元素: 蛇、食物、墙、舞台
|--  index.html         // 入口
|--  main.js            // 编译入口/项目启动文件
|--  package.json       // npm配置
|--  webpack.config.js  // webpack配置
|--  src                // 原文件
	|--  control.js       // 控制
	|--  model.js         // 状态
	|--  proto.js         // 原型
	|--  view.js          // 视图
|--  script             // webpack编译出口
	|--  main.min.js
|--  test.html          // 原始项目
|--  static             // 静态资源文件
复制代码

MVC

本案例中采用MVC模式开发,即:Model - View - Control 。

  • 游戏的各种状态与数据结构由 Model 来管理;
  • View 用于显示 Model 的变化,做视图的渲染;
  • 用户与游戏的交互由 Control 完成;

这样做的好处是什么?

  • Model只负责数据处理完全独立
  • View对Model进行视图渲染
  • Model 与 View 都由 Control 来驱动。

元素&动作&初始化

四个元素: 蛇、食物、墙、舞台

三个动作: 移动、吃食、碰撞

两个初始化:初始化一条随机的蛇、初始化一个食物

中心思想:舞台是一个 30 * 30 的矩阵(二维数组),矩阵的索引边界是舞台的墙,矩阵上的成员用于标记食物和蛇的位置。对舞台矩阵进行对应的数据渲染就可以映射出蛇和食物,蛇和食物都有他们独立的数据结构,蛇是指向舞台的一个序列也就是一条线,食物是指向舞台的一个点。

小面是一个 10*6 的空白舞台

[
	[0,1,2,3,4,5,6,7,8,9],
	[0,1,2,3,4,5,6,7,8,9],
	[0,1,2,3,4,5,6,7,8,9],
	[0,1,2,3,4,5,6,7,8,9],
	[0,1,2,3,4,5,6,7,8,9],
	[0,1,2,3,4,5,6,7,8,9]
]
复制代码

蛇S和食物#出现在舞台上

[
	[0,1,2,3,4,5,6,7,8,9],
	[0,1,#,3,4,5,6,7,8,9],
	[0,1,2,3,S,5,6,7,8,9],
	[0,1,2,3,S,S,S,7,8,9],
	[0,1,2,3,4,5,S,7,8,9],
	[0,1,2,3,4,5,6,7,8,9]
]
复制代码

此时蛇和食物对应的数据结构如下

蛇:[[4,2], [4,3], [5,3], [6,3], [6,4]]

食物:[1,2]

当蛇的位置发生改变(运动)

[
	[0,1,2,3,4,5,6,7,8,9],
	[0,1,#,3,4,5,6,7,8,9],
	[0,1,2,S,S,5,6,7,8,9],
	[0,1,2,3,S,S,S,7,8,9],
	[0,1,2,3,4,5,6,7,8,9],
	[0,1,2,3,4,5,6,7,8,9]
]
复制代码

蛇运动了一个位置,蛇的数据结构如下

蛇:[[3,2], [4,2], [4,3], [5,3], [6,3]]

我们来分析一下蛇运动前和运动后的数据结构 [[4,2], [4,3], [5,3], [6,3], [6,4]] 和 [[3,2], [4,2], [4,3], [5,3], [6,3]] 不难发现蛇的运动只是对蛇进行了 shiftpush 操作,而 push 的数据是根据蛇的运动方向确定的。

我们再分析一下“吃食”和 “碰撞”这两个动作,那么吃食就表示为被 push 的数据也就是“蛇头”和食物重叠。碰撞又分为“撞墙”和“撞自己”,撞墙比较简单只要判断蛇头有没有超出舞台的边界,而撞自己要判断蛇头有没有和蛇的身体冲突。

我们再分析一下初始化随机蛇和食物的过程,这个过程要注意五个点:

  1. 食物不可以和蛇重复
  2. 蛇自身不可以重复
  3. 在蛇的前进方向上不可以有蛇身紧挨着蛇头
  4. 蛇头不可以在前进方向上紧挨着边界
  5. 蛇是一条直线嘛?

“食物不可以和蛇重复”食物一定是不能和蛇重复的,这里采用了递归如果重复了就不停的自调;

“蛇自身不可以重复”蛇自身当然也是不能重复的否则就撞了自己,每次随机化蛇的身体的时候可以调用 getLife() 方法判断蛇的生命,同样使用递归直到蛇的身体到达设定的长度;

“在蛇的前进方向上不可以有蛇身紧挨着蛇头”如果在蛇的前进方向上有蛇的身体紧挨着蛇头,那么在下一个运动时刻蛇就会“撞自己”,也就是初始化随机一条蛇之后蛇马上就会over,这样的交互体验我们是不希望出现的;

“蛇头不可以在前进方向上紧挨着边界”同上

“蛇是一条直线嘛?”初始化随机出来的蛇应该是一条直线嘛?这也不是我们想要的交互体验;

再次回到MVC

Model

Model 负责数据结构与处理,比如蛇的运动、蛇的吃食、蛇的死亡、蛇生命的判断,上述这一切 Model 只负责数据的处理,在数据结构的层面完成这些功能。

View

View 用于显示 Model 的变化做视图的渲染,不参与任何逻辑,把蛇的数据结构以及食物的数据结构动态的渲染到舞台上。

Control

Control 是控制器,简单的理解 Control 负责用户事件交互,当然 Control 也负责驱动 Model 和 View。

Proto

Proto 看似独立于 MVC 其实 Proto 是基于 MVC 的,在本项目中 Proto 其实负责了部分 View 的工作,因为蛇和食物的数据结构本质上是一个 Array,那么对 Array 实例的操作我们把操作方法通过 Array.prototype 绑到原型上,通过原型链的向上查找原理实现渲染。


以上所述就是小编给大家介绍的《基于MVC思想实现一个简单的贪吃蛇小游戏》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

让创意更有黏性

让创意更有黏性

[美] 奇普·希思、[美] 丹·希思 / 姜奕晖 / 中信出版社 / 2014-1-8 / 49.00元

你或许相信在太空中唯一能看到的人工建筑就是万里长城,可乐能腐蚀人体骨骼,我们的大脑使用了10%;与此同时,你却记不得上周例会上领导的安排,昨天看过的那本书里写了什么,上次参加培训的主要内容…… 为什么? 这就引发出《让创意更有黏性》的核心问题:什么样的观点或创意具有强有力的黏性,能被他人牢牢记住? 国际知名行为心理学家希思兄弟根据大量的社会心理学研究案例,揭示了让创意或观点具有黏......一起来看看 《让创意更有黏性》 这本书的介绍吧!

HTML 编码/解码
HTML 编码/解码

HTML 编码/解码

RGB CMYK 转换工具
RGB CMYK 转换工具

RGB CMYK 互转工具

HEX CMYK 转换工具
HEX CMYK 转换工具

HEX CMYK 互转工具