项目结构——JavaScript版本的2048实现[0]

项目结构——JavaScript版本的2048实现[0]

最近在看一本书《HTML5 Canvas开发详解》 看到了一定程度,打算找一个项目练练手 遂想到了前几年玩过的一个游戏2048 于是开始了尝试实现一个JavaScript版2048

项目结构

项目地址:https://github.com/jiasm/2048 LiveDemo: http://jiasm.org/2048

.
├── LICENSE
├── README.md
├── dist
│   ├── bundle.js
│   └── main.js.map
├── index.html
├── package.json
├── src
│   ├── Base.js
│   ├── Config.js
│   ├── Utils.js
│   ├── Game.js
│   ├── GameController.js
│   ├── GameRender.js
│   └── index.js
└── webpack.config.js

使用webpack进行打包,因为有用到了babel,所以整体语法采用ES6、ES7写法 (写起来无比的舒心)因为该GitHub项目设置了Git Pages 所以dist文件夹就保留在项目中了,没有删除。

文件夹src里边就是所有的代码了。

Base

一个聊胜于无的基类。。就是让类拥有一个通过.init就可以实现实例化对象的功能

export default class Base {
  static init (...arg) {
    return new this(...arg)
  }
}

Config

该文件里边存储了一些配置参数,比如默认的矩阵数量、2048中各个方块显示的文本&颜色之类的。 方便拿走即用。。修改一个配置文件即可得到你想要的2048

Utils

里边提供了一个log方法以及一个增强版的logMatrix

  • log方法只在window.debug === true时生效。
  • logMatrix方法接收一个二维数据,会将数组中的数据格式化后展示出来,方便调试。

Game

该游戏的核心类,生成渲染所需要的二维数据矩阵 提供如下几个方法

start

初始化一个游戏实例 生成矩阵数据

canMove

返回一个Boolean值,来确定是否可以继续移动

move

将当前矩阵按照传入函数的direction来进行移动,并在移动后会随机塞入一个新的item

GameRender

用来将矩阵数据渲染到Canvas中(由于Game实例返回的是一个二维数组,GameRender就可以非常灵活的使用了,你也可以选择使用DOM来渲染,只不过我本意是要练练Canvas,所以选择了这个方案,后期在添加一些动画时差点搞死自己。。。)

该类只提供一个API,那就是render,将二维数组渲染至Canvas(具体的实现,以后再谈)。

GameController

用来控制与用户的交互

该类是作为一个控制器来存在的。 监听了键盘&触摸的一些事件,并调用Game获取数据,遂即调用GameRender来进行渲染。

index

index作为应用的入口文件entries 只做了两件事:

  1. 对界面进行响应式处理。放大Canvas为一个正方形
  2. 实例化一个GameController

小记

整体的项目结构就是这些。 开发时间貌似是用了四个晚上,周一到周四,9点-1点。。 这一套做下来,目前是遇到了两个坑:

  1. 矩阵合并&移动的逻辑
  2. 动画的实现

一些还未完成的

  1. 本地缓存矩阵数据,防止页面刷新后只能重新开始
  2. 积分的统计

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏流媒体人生

mpg文件切片之后,不能播放问题分析

对于大部分mpg文件切片都能正常播放,而少部分mpg切片之后只有第一个切片能播放,后续的切片视频播放均失败,只能播放视频。

982
来自专栏慎独

Unity自动寻路入门指南

1722
来自专栏nimomeng的自我进阶

抓住iOS的未来 - 30天学习编写30个Swift小程序

=======================================================

4462
来自专栏较真的前端

探寻Vue数据双向绑定的底层原理

2955
来自专栏写写代码吃吃瓜

OpenGL初学--环境配置和视景体初步接触

1885
来自专栏云瓣

React16.x特性剪辑

在 16 之前的版本的渲染过程可以想象成一次性潜水 30 米,在这期间做不了其它事情(Stack Reconciler);

1072
来自专栏逍遥剑客的游戏开发

Introduction to RenderMonkey

28610
来自专栏非典型技术宅

Quartz2D进行渲染1. 渲染模式2. even-odd rule:奇偶填充规则3. nonzero winding number rule:非零绕数规则4. 其他会用到的渲染模式5. 混合模式

1293
来自专栏JarvanMo的IT专栏

[译]Flutter学习笔记:BottomNavigationBar实现多个Navigation

最近我研究了一下Flutter,但是在使用Navigator的时候遇到了一个很头痛的问题,就是当我们去来回切换导航按钮时,Flutter会重新build,从而导...

9782
来自专栏Flutter入门

Android OpenGL ES(六) - 将输入源换成视频

上文中,我们是将相机提供的预览画面输入到Surface当中,然后进行滤镜处理和录制。 那我们可以切换输入源为视频吗?

5705

扫码关注云+社区

领取腾讯云代金券