打算做一个小游戏合集,边框界面是复古游戏机(80 90 的应该都知道),既可以学习 H5 游戏开发又可以学习 TS,一举两得~,下面根据日期来做一些记录
今天大致把代码整体框架和设计都梳理了一遍
进入游戏界面 ->
有若干个可选择的游戏,点击进入游戏 ->
根据游戏渲染背景 ->
点击开始 ->
根据游戏绑定对应的事件回调
1. 方块渲染
写死7种形状、以及每种形状的不同角度的方块,用二位数组来表示
比如一字型:[
[0, 0], [0, 1], [0, 2], [0, 3],
[0, 0], [1, 0], [2, 0], [3, 0]
]
遍历这些坐标点,乘上边长即可正确渲染
2. 下降、掉落、旋转
下降: 纵坐标++
掉落: 通过逻辑判断能下降的最低纵坐标,然后赋值
旋转: 矩阵变换
3. 固定的方块
已固定的方块放在另一个类中 也以二维数组的形式存放(利用push函数)
4. 消除
每次下落结束、掉落结束后 检验固定的方块坐标中是否有同一个纵坐标横坐标0-10都有, 有则删除这些坐标
5. 游戏结束
每次下落结束、掉落结束后 检验固定的方块坐标中是否有纵坐标为0,有则游戏结束
代码进展:已可随机渲染一种方块,游戏界面部分完成
完成了方块的下落逻辑
完成了方块固定后与方块墙的通信部分逻辑(坐标存入方块墙,刷新方块墙)
完成了方块下落按钮
完成了方块左右旋转
完成了方块左右移动
完成了方块直接掉落
完成了方块墙消除检验
tips: 今天因为数组没有深拷贝卡了我三个小时!!这种低级错误呜呜呜呜
不管几维数组,最简单的深拷贝方法:JSON.parse(JSON.stringify(array))