蛋仔派对随机编程教程：从零开始造个欢乐小宇宙
凌晨两点半，我盯着屏幕上乱蹦的彩色圆球突然笑出声——这玩意儿比咖啡还提神。事情是这样的：上周三我闺女非要我给她做个"会打架的汤圆"，结果误打误撞搞出了这个蛋仔派对生成器。今天就把这个用JavaScript实现的随机小游戏开发过程拆开揉碎，保证你看完就能做出自己的魔性小世界。
一、准备工作：比想象中简单
翻出我那个掉漆的机械键盘时，突然想起第一次接触游戏编程的恐惧。但其实现代浏览器已经帮我们扛下了最重的担子，你只需要：
- 任何文本编辑器（连记事本都行）
- Chrome/Firefox浏览器
- 一包零食（别问为什么，写到后面你就懂了）
| 技术栈 | 用途 | 学习曲线 |
| HTML5 Canvas | 画布绘制 | ★☆☆☆☆ |
| JavaScript基础 | 逻辑控制 | ★★☆☆☆ |
| CSS3动画 | 特效增强 | ★☆☆☆☆ |
1.1 新建文件的仪式感
先创建个egg-party.html文件，用下面这段代码当开场白：
<canvas id="gameCanvas" width="800" height="600"></canvas>
<style>
body { margin:0; background:#ffe6f2; }
canvas { display:block; margin:30px auto; }
</style>
看到那个粉得不行的背景色没？这是我闺女钦定的"草莓牛奶色"，事实证明暖色调背景确实能让像素小人们看起来更欢脱。
二、让蛋仔动起来的魔法
凌晨三点十七分，冰箱里最后瓶冰可乐见底了。现在要解决核心问题：怎么让这些圆球产生让人上头的魔性动作？
2.1 创建蛋仔对象
先定义个构造函数，这里用ES6的class写法更清晰：
class Egg {
constructor() {
this.x = Math.random() * canvas.width;
this.y = Math.random() * canvas.height;
this.size = 30 + Math.random() * 20;
this.speedX = (Math.random() - 0.5) * 4;
this.speedY = (Math.random() - 0.5) * 4;
this.color = `hsl(${Math.random() * 360}, 70%, 60%)`;
this.wobble = 0;
}
}
注意到那个wobble属性了吗？这是后来加的"抖动系数"，当时我闺女说"它们应该像果冻那样duang~duang的"，于是...
2.2 物理引擎（简易版）
真正的物理引擎太复杂，我们搞个"幼儿园版本"：
- 每次更新位置时：
x += speedX - 碰到边界就反弹：
speedX *= -0.9 - 随机加个加速度：
speedY += (Math.random() - 0.5) * 0.2
重点是这个反弹系数0.9，试了二十多次发现这个值最滑稽——足够让蛋仔们像喝醉酒似的东倒西歪，又不会完全停不下来。
三、随机事件的快乐源泉
凌晨四点零九分，窗外有只野猫在叫。这时候该注入灵魂了——让系统自己产生意外惊喜。
3.1 随机行为触发器
在动画循环里加这段：
if(Math.random() < 0.003) {
eggs.forEach(egg => {
egg.speedX += (Math.random() - 0.5) * 3;
egg.speedY += (Math.random() - 0.5) * 3;
});
}
这个0.003的概率意味着平均每秒钟会有1-2次集体发疯，实测这个频率既不会太频繁让人眼晕，又足够制造笑料。有次测试时十几个蛋仔突然集体向右冲刺，把我笑得差点从椅子上翻下去。
3.2 特殊状态标记
后来我又加了这些搞怪属性：
| 属性 | 效果 |
| isDizzy | 原地转圈时眼冒金星 |
| isGrowing | 突然膨胀然后"啵"地缩回 |
| isTrail | 移动时带彩色拖尾 |
实现拖尾效果特别简单，只要在绘制时加这句：
ctx.fillStyle = 'rgba(255,255,255,0.2)'; ctx.fillRect(0, 0, canvas.width, canvas.height);
这个半透明白色矩形层就是制造残影的秘诀，原理类似传统动画的"洋葱皮效果"。
四、让人停不下来的交互设计
凌晨四点五十三分，发现左手小拇指沾了薯片屑。好的游戏必须要有恰到好处的操作反馈。
4.1 点击爆炸效果
监听点击事件时这么处理：
canvas.addEventListener('click', (e) => {
const clickX = e.clientX - canvas.offsetLeft;
const clickY = e.clientY - canvas.offsetTop;
eggs.forEach(egg => {
const distance = Math.sqrt(
Math.pow(egg.x - clickX, 2) +
Math.pow(egg.y - clickY, 2)
);
if(distance < 50) {
egg.speedX = (egg.x - clickX) * 0.1;
egg.speedY = (egg.y - clickY) * 0.1;
}
});
});
那个0.1的系数调整了整整一小时——太小了没反应，太大了又飞太远。最后加了个距离判断，让近处的蛋仔反应剧烈些，远处的温和些，瞬间就有了物理层次感。
4.2 键盘控制彩蛋
后来偷偷加了个隐藏功能：
document.addEventListener('keydown', (e) => {
if(e.key === ' ') {
eggs.push(new Egg());
}
if(e.key === 'r') {
eggs = [];
for(let i=0; i<15; i++) eggs.push(new Egg());
}
});
空格键添加新蛋仔，R键重置场景。没告诉我闺女这个秘密，结果她三天后自己发现了，高兴得满屋子跑圈。
五、性能优化的血泪史
凌晨五点二十一分，发现太阳都快出来了。当蛋仔数量超过80个时，老笔记本开始发出直升机起飞的声响...
5.1 离屏渲染技巧
把固定元素画到隐藏canvas上：
const bufferCanvas = document.createElement('canvas');
//...绘制静态背景到bufferCanvas
//主循环里直接复制图像
ctx.drawImage(bufferCanvas, 0, 0);
这个技巧让帧率从15fps提升到45fps，效果立竿见影。记得《HTML5 Canvas核心技术》里说过，减少重复绘制是性能提升的关键。
5.2 对象池模式
改用对象池管理蛋仔实例：
const eggPool = [];
function getEgg() {
return eggPool.length ?
eggPool.pop() :
new Egg();
}
function recycleEgg(egg) {
eggPool.push(egg);
}
虽然对这个小demo提升有限，但养成这个习惯很重要。有次参加Game Jam时就因为没做对象池，游戏在最后展示时卡成PPT，惨痛教训啊。
天已经大亮了，咖啡杯里只剩最后一口冷掉的残渣。把这个项目上传到GitHub后，意外收到几个海外开发者的star，有个芬兰老哥还fork过去加了雪地效果。编程最迷人的地方就在于此——你永远不知道自己的小创造会引发怎样的连锁反应。下次或许可以试试给蛋仔们加上武器系统？我家丫头已经开始画"汤圆大作战"的角色设定了...
网友留言（0）