弹力细胞 (BounceCell)
一个由JavaScript写的网页小游戏
作为大一菜鸟,这是我第一次比较正式的写文章 [害臊]
游戏玩法
通过鼠标或触屏控制屏幕底部的滑动弹板将发射的小球反弹出去撞击方块,清空所有可撞击方块后游戏获胜,若场上无小球、小球已打空且场上还剩可撞击方块则游戏失败,若是无尽模式,所有小球消失或方块低于红线则游戏失败。
运行思路
分别创建小球( Bullet )、方块( Block )、背景( Block )、反弹板等实体( Entity ),通过对其赋予相应规则、进行相应逻辑判断即可实现游戏运行。
游戏规则
-
小球数量有限。
-
普通小球碰到分裂触发方块后会在当前位置新增一定数量的小球。
-
方块被撞击一定次数后会被破坏。
-
拖动或鼠标滑动可移动反弹板。
-
反弹板反弹规则为越靠近反弹板顶部的中部,小球反弹越接近正上方,反之朝向两侧。
-
爆发效果中反弹板可以在被拖动的状态持续快速发球。
游戏组成
Entity类
由于所有实体都有很多共有属性,所以我们创建了一个父类 Entity 来简化代码。
// 实体基础类
const Entity = function (x, y, w, h) {
this.type = "Entity"; // 实体类标识
this.x = x; // 中心x坐标
this.y = y; // 中心y坐标
this.w = w; // 宽
this.h = h === undefined ? w : h; // 高
this.w2 = this.w / 2;
this.h2 = this.h / 2;
this.noBounce = false; // 不触发反弹事件
this.color = "#000"; // 颜色
this.color2 = "#fff"; // 渐变背色
this.opacity = 1.0; // 透明度
this.txt = ""; // 显示文本
this.fontSize = vm(4); // 显示文本的文字大小
this.txtColor = "#fff"; // 显示文本的文字颜色
this.score = 0; // 价值分数
// 获取矩形信息(获取中心点以及宽高)
this.rect = () => rectD(this.x, this.y, this.w, this.h);
//