准备工作

游戏素材

开始游戏背景

? Prompt (DALL·E 3 from GPT-4)

Photo of a horizontal vibrant home screen for a video game titled ‘Angry Pumpkins’. The design is inspired by the ‘Angry Birds’ game aesthetic but different. Halloween elements like haunted houses, gravestones, and bats dominate the background. The game logo is prominently displayed at the center-top, with stylized pumpkin characters looking angry and ready for action on either side. A ‘Play’ button is located at the bottom center, surrounded by eerie mist.

游戏中背景

? Prompt (Midjourney)

Angry birds skyline in iPhone screenshot, Halloween Edition, graveyard, in the style of light aquamarine and orange, neo-traditionalist, kerem beyit, earthworks, wood, Xbox 360 graphics, light pink and navy –ar 8:5

? Prompt (Midjourney)

2d platform, stone bricks, Halloween, 2d video game terrain, 2d platformer, Halloween scenario, similar to angry birds, metal slug Halloween, screenshot, in-game asset –ar 8:5

游戏角色

这里生成的角色需要进行裁剪，去除背景色等操作。

? Prompt (Midjourney)

Halloween pumpkin, in-game sprite but Halloween edition, simple sprite, 2d, white background

? Prompt (Midjourney)

Green Halloween monster, silly, amusing, in-game sprite but Halloween edition, simple sprite, 2d, white background

游戏资产

? Prompt (Midjourney)

• Wooden box. Item assets sprites. White background. In-game sprites
• Skeleton bone. Large skeleton bone. Item assets sprites. White background. In-game sprites
• Rectangular stone. Item assets sprites. White background. In-game sprites
• Wooden box. Large skeleton bone. Item assets sprites. White background. In-game sprites
• Item assets sprites. Wooden planks. White background. In-game sprites. Similar to Angry Birds style

游戏逻辑

Step 1

matter.js([2]) 和 p5.js([3]) 是两个流行的 JavaScript 库，分别用于物理模拟和 2D 绘图。

? Prompt (GPT-4)

Can we now create a simple game using matter.js and p5.js in the style of “Angry Birds”? Just launch a ball with angle and force using the mouse and hit some stacked boxes with 2D physics.

Step 2

持续循环迭代，需要耐心！

• 现在，我要问你：你知道在 Angry Birds 中怎么发射鸟吗？手指在屏幕上做什么？是的。把这个加到游戏里，用鼠标。
• 我有这个错误，请修复它：Uncaught ReferenceError: Constraint is not defined
• 我想用 p5.js 制作一个带有粒子效果的火炬。可以做吗？请做一个。
• 现在，让怪物成为圆形，要非常小心：应用已经存在的矩形缩放和碰撞区域的相同技术，不要像以前那样弄错了。

? Prompt (GPT-4)

• Now, I ask you: do you know how the birds are launched in Angry Birds? What the finger does on the screen? Exactly. Add this to the game, using the mouse.
• I have this error, please, fix it: Uncaught ReferenceError: Constraint is not defined
• I would like to make a torch with particle effects. Can it be done with p5.js? Make one, please.
• Now, make the monsters circular, and be very careful: apply the same technique that already exists for the rectangular ones regarding scaling and collision area, and don’t mess it up like before.

• 计算何时对虫子产生强烈冲击的逻辑有些问题。如果冲击是直接的，它工作得很好，但如果是间接的就不行。例如，如果我在两只虫子上放一个矩形，然后在矩形上放一个盒子，即使虫子应该受到冲击的影响，它们也不会注意到。我们能做些什么来确保它们也受到影响，当物体掉在它们所在的身体上方时？

? Prompt (GPT-4)

There’s something off with the logic that calculates when there’s a strong impact on a bug. If the impact is direct, it works well, but not if it’s indirect. For example, if I place a rectangle over two bugs and drop a box on the rectangle, even though the bugs should be affected by the impact, they don’t notice it. What can we do to ensure they also get affected when things fall on top of a body they are under?

结论

• 体验地址：https://lencx.github.io/fe-tips/game/angry-pumpkins
• 代码仓库：https://github.com/lencx/fe-tips/tree/main/game/angry-pumpkins

游戏规则

? 按 空格键 重置南瓜。 ? 按 Enter 清空世界。 ? 编辑模式：长按 Q（箱子）、W（矩形石块）、E（长骨头）、R（长木板）、T (骷髅) 或 M (打击的目标，绿色的万圣节怪物)，并点击以向世界添加物体并创建你自己的结构。