基于canvas的俄罗斯方块(400行纯js)

这个俄罗斯方块是我自己个人原创的,也没有参照过别人的思路,所以会存在一定的瑕疵,而且当时写这个小游戏的时候我的技术水平还很低,写这个游戏只是为了练练手,所以这个游戏可以给刚入门的同行进行学习参考,代码可参考 点击打开链接

要想做这个小游戏,必须先熟悉H5的canvas,js对数组的处理,this指针的熟悉,以及function的应用等,其他的就是基本的逻辑处理了。

创作思路:

    ①用canvas中fillRect画地图,默认颜色是黑色

    ②生成初始方块的类型和颜色,也就是使用Random,这里我只用到了4种类型和8种颜色    

    ③初始化方块的位置,我选择的是地图的最上方中间的位置,这个就要根据你地图的大小来设置了

    ④接下来方块的走动以及变换形式可以参考下源码,这里就不多说了

    ⑤接下来就是关键了, 基本的逻辑操作,判断方块之间是否碰撞(左右下三个方向),如果碰撞了,就要停下来,固定在那个位置,以及变形时是否变形成功

    ⑥某一层的方块满一行要自动消灭,这一行上面所有的方块都要往下掉,然后记录成绩

这里说的比较简单,具体可以参照源码,这个小游戏的技术含量不高,只是用来练习逻辑操作的,仅供小白学习

猜你喜欢

转载自blog.csdn.net/magic_xiang/article/details/79552707