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

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

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

创作思路:

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

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

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

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

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

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

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

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值