背景是一片居民楼的实拍照片,前景里一节楼体在空中来回摆动。点击画面或按空格把它放下:落点越接近下面那一层,重叠得越整齐,塔就越稳;偏得多了会被削掉一截,削到没有就本轮结束。右上角实时显示当前层数与历史最好成绩,结束时根据层数给出不同的评语,最好成绩会留在本地。技术上是原生 Canvas 绘制配原生 JavaScript,没有游戏引擎,也没有物理库。
这个小游戏的三处设计
削块是重叠区计算。放下时比较新楼层与顶层的横向重叠范围,重叠部分留下,超出的部分作为碎块掉落,新楼层的宽度也随之变窄,所以越往上越难。
镜头跟着塔升高。每加一层,整个场景向下平移一格,塔顶始终保持在画面中部,背景同步做小幅视差位移。
三种输入一套逻辑。鼠标点击、触摸和空格、回车、方向键都汇入同一个放下函数,不会出现某种设备玩不了的情况。
难度是怎么自然上升的
这类游戏不需要显式的难度曲线,难度是规则自带的:每次对不准,方块就变窄一点,而变窄之后更难对准,于是失误会累积。源码在此之上只加了一条——摆动速度随层数缓慢提升,让后期节奏跟上。评语也按层数分了四档:
if (state.score < 5) { ... } else if (state.score < 12) { ... }阈值放在这里是有意的,改这几个数就能调整「什么算打得好」,不必去动核心玩法。
能改的地方
楼层的初始宽度、摆动幅度与速度、加速节奏都是脚本顶部的配置项。背景图与楼体贴图在图片文件里,换成自己的素材即可,绘制部分按实际尺寸自适应。四档评语和分数阈值在结算函数里,配色与面板样式集中在样式文件的变量里。最好成绩存在浏览器本地存储,换键名即可与站内其他数据隔离。
常见问题
最好成绩刷新后清零了?
成绩存在浏览器本地存储里,无痕窗口或清理站点数据后会丢失。需要跨设备保留就得接自己的后端,替换读写那两处即可。
手机上能玩吗?
能。触摸等同于点击,页面也禁用了双指缩放,避免误触。画布按容器尺寸自适应,竖屏下会自动收窄。
可以换成别的主题吗?
可以。玩法只关心「方块的宽度和位置」,把楼体换成集装箱、蛋糕层或积木都不影响逻辑,只需替换贴图并调整单层高度。
适合用在哪
品牌活动页的互动小游戏、H5 抽奖的前置玩法、地产与家居类站点的趣味模块,也适合当作「不用引擎写小游戏」的完整范例。重叠削块、镜头跟随与成绩存储的实现都在脚本里,下载后可查看。