今天心血来潮,想弄个堆方块的小游戏玩玩。以前就特喜欢这种简单的消消乐,搭积木一样,看着就解压。
准备工作
先琢磨琢磨要用啥工具。咱也不是专业的游戏开发,就图个简单快手。Unity?那玩意儿太大,杀鸡焉用牛刀。就用 H5 ,方便,在哪儿都能打开玩。
编辑器,就 VS Code ,轻巧好用,插件也多,写点简单的代码够用。
搭框架
先得把基本的样子搭起来。新建个文件夹,里面放上 HTML、CSS、JavaScript 三个文件,这仨是老搭档。
小编温馨提醒:本站只提供游戏介绍,下载游戏推荐89游戏,89游戏提供真人恋爱/绅士游戏/3A单机游戏大全,点我立即前往》》》绅士游戏下载专区
- HTML,就相当于房子的骨架,把各个部分先占好位置。
- CSS,就像装修,给房子刷刷墙,铺铺地,让它好看点。
- JavaScript,这玩意儿最关键,让房子里的各种东西能动起来,比如按个灯能亮,点个按钮能出水啥的。
在 HTML 文件里,咱先弄个 canvas 画布,方块就都在这上面折腾。再来几个按钮,开始、暂停、重来,都得安排上。
画方块
框架有,接下来就是画方块。这步挺关键,得好好琢磨。我打算用不同颜色的小方块,拼成各种形状,俄罗斯方块那种感觉,你懂的。
在 JavaScript 里,我先定个数组,把各种形状的方块都描述出来。每个方块用一个小数组表示,里面 0 和 1 分别代表空白和有色块。这样,一个形状就用一个二维数组搞定。
然后,咱得有个函数,能把这些形状画到 canvas 上。根据数组里的 0 和 1,用不同的颜色填充小方格,这方块不就出来嘛
让方块动起来
光画出来还不行,得让它们能动!这就要用到 JavaScript 的定时器。每隔一段时间,就让当前的方块往下移动一格。还得判断能不能移动,要是下面有别的方块挡着,或者到底,那就不能动。
我还加键盘控制,按左右键可以让方块左右移动,按上键可以让方块旋转。这旋转也挺有意思,得把方块的数组进行一番倒腾,才能实现旋转的效果。
消消乐
堆方块,堆方块,堆满咋办?当然是消掉!
每次方块落定,我都检查一下,看看有没有哪一行被填满。有的话,就把这一行消掉,上面的方块都往下挪一格。这消掉的一瞬间,还挺爽的。
收尾
基本功能都有,再修修补补,加点音效,调调难度,一个简单又好玩的堆方块游戏就差不多完成!虽然简陋,但自己动手做的,玩起来感觉就是不一样!
以后有空再慢慢完善,加点新玩法,比如不同的关卡,不同的道具啥的。不过现在嘛先玩几把再说!