五分钟了解2048canvas小游戏制作过程

2018年2月14日20:50:31 发表评论 390

2048这个小游戏我起初是看一个同学玩的,自己也玩过,比较休闲,有点意思,但是没想到至今我可以自己把这个小游戏做出来,我参考了一些大神的代码,然后自己手写一遍,现在仅有一两个点的代码还没弄清楚,但是这丝毫不影响我介绍这个2048小游戏的制作过程。

五分钟了解2048canvas小游戏制作过程

看呐~,国外的大牛原生JS写的2048的小游戏,点我试玩!2048就是他发明的,起初这个项目也是在github上流传的,点击直达github2048作者主页,也欢迎各位朋友看我做的这个这个BUG多多有点原型的2048小游戏,点我试玩,当然这可不是我的最终代码,我会把项目上传到我的github上面,点我下载源码,有时间再慢慢完善这个2048小游戏的代码。

那我们就开始吧,一起来看看我写的游戏思路:

一.游戏初始化

变量

  1. 地图数组
  2. 小方块颜色数组
  3. 方块数字大小
  4. 方块数字偏移量
  5. 上下左右事件信息
  6. 剩余方块数
  7. 当前分数

函数

  1. 定义一个循环函数
  2. 随机生成方块函数

根据剩余的方块生成一个随机数

循环判断地图数组是否等于0

等于0再判断当前随机数是否等于k

不等于k,k就+1再循环

不等于0再循环

循环结束后当前剩余的方块数就-1

3. 绘制圆角矩形小方块地图,数字

循环绘制矩形数组,包括里面的数字
更新当前分数

二.方块移动

事件监听

1. PC按键监听
* 监听onkeydown事件
2. 手机端滑动监听
* 监听ontouchend事件
* 禁止默认的滑动事件

移动函数

  1. 调整不同方向的遍历方式
  2. 根据移动方向,判断是否合并
  3. 如果剩余方块为0,就结束游戏

三.2048小游戏代码

HTML代码

2048.js

我做的这个canvas2048小游戏有太多需要完善的地方,比如历史最高分,这个有了就是一个亮点,还有字体大小的bug,如四位数的数字排版的话,肯定会超出到方块外面,不美观,可现在的我没有太多时间去看代码,等有时间再加以完善,明天就是除夕了,祝大家新年快乐!

猿梦

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: