/easy-tetris

JS实现的一版简易俄罗斯方块小游戏

Primary LanguageJavaScript

easy-tetris 简易版俄罗斯方块

学校课设作业：写一个微信小程序的游戏。 因为没有用到微信权限相关的 api，所以相当于一个全前端的 html/css/js 项目了。想在小程序中运行的话只需要加载这些代码到小程序环境中即可。

整体思路

  • 在canvas画布中画出格子背景

  • 实现不同形状的俄罗斯方块 以L型方块为例（以下都是）：

    var Lblock = [[1,0,0],[1,1,1]];

  • 实现不同（顺时针旋转）状态的俄罗斯方块 每个形状的俄罗斯方块都有四个状态，通过旋转更改状态

    var LblockArr = [
[[1, 0, 0],[1, 1, 1]],
[[1, 1],[1, 0],[1, 0]],
[[1, 1, 1],[0, 0, 1]],
[[0, 1],[0, 1],[1, 1]]
];

  • 当前移动的方块的状态的记录 俄罗斯方块类的基本参数

    keycomment
    xx轴偏移格子个数
    yy轴偏移格子个数
    renderArr渲染数组(包含四种状态)
    color方块填充色
    borderColor方块瞄边色
    curArr当前绘制使用的数组
    wblocks方块横向占格数
    status当前旋转状态

  • 增加事件监听、按键行为

  • 规则判定函数的编写

  • 不再下降的方块的位置记录 用一个与canvas画布背景格数相同的数组来存储状态，每个格子存储1/0（有无方块）及颜色信息。方块下方有方块/碰底时触发数据存储。

  • 界面优化

预览

预览地址：https://kuro-p.github.io/Easy-Tetris/tetris

首页