从跑酷到实时联机:5个能直接用的Web游戏开发需求

做游戏有一阵了,每周要筛上百条prompt。下面这5条是最近整理的,难度从简单到复杂,技术栈覆盖Phaser、Three.js、原生Canvas、Babylon.js。每条都可以直接复制给AI或者丢给开发,细节写清楚了,不用再补。

1. 简单 Phaser 跑酷游戏

请实现以下功能:

使用 Phaser 3 开发一款横向无尽跑酷游戏。玩家控制角色自动向右奔跑,点击屏幕或按空格键跳跃。场景中随机生成金币和低矮障碍物(石块)。碰到金币加10分,并播放金色粒子散落特效;碰到障碍物则游戏结束,显示"Game Over"和重新开始按钮。背景使用滚动的地面条纹和云朵。相机跟随角色,游戏速度随分数增加而逐渐提升(最高为初始速度的2倍)。分数显示在左上角。不要任何后端,所有资源使用内置图形或 Canvas 绘制。输出一个自包含的 HTML 文件,浏览器直接打开可玩。

2. 中等 Three.js 第一人称轨道收集游戏

请实现以下功能:

使用 Three.js 开发第一人称轨道收集游戏。玩家视角位于无限延伸的轨道中央,轨道两侧及空中随机生成旋转的宝石(红、蓝、绿)和障碍物(黑色球体)。鼠标控制瞄准光标,点击发射射线检测:红宝石+10分并爆炸粒子,蓝宝石+5分并缩放动画,绿宝石+20分但使游戏速度降低30%持续3秒。击中障碍物扣10分并屏幕闪烁红色。右上角显示分数,左上角倒计时60秒,时间到后显示最终分数并停止生成新物体。基础光照(点光源+环境光),轨道两侧有重复贴图的墙面。使用对象池管理宝石和障碍物,轨道运动通过向前移动物体实现。代码全包含,基于 Three.js 最新版。

3. 中等 原生 Canvas 塔防游戏

请实现以下功能:

基于原生 Canvas 和 JavaScript 实现塔防游戏。敌人沿着固定弯曲路径从左侧入口走向右侧出口。玩家在路径旁的空格点击放置防御塔。塔自动攻击范围内敌人,发射子弹造成伤害。

  • 敌人类型:普通(红色,3血)、快速(黄色,1血,速度1.5倍)、高防(蓝色,5血,速度0.7倍)

  • 塔类型:基础塔(射程80,伤害1,攻速2次/秒);减速塔(射程100,伤害0,减速50%持续1秒,攻速1次/秒)

  • 资源:初始金币150,击败敌人得金币(普通+20,快速+10,高防+30)。基础塔成本100,减速塔120。

  • 波次:共5波,敌人数3/5/7/10/12,波次间15秒准备,显示倒计时和"下一波"按钮(可跳过)。

  • 界面:显示当前波次、剩余敌人数、金币、总分(杀敌数)。有重新开始按钮。

  • 所有绘图用 Canvas 2D,纯几何图形(圆形为敌人,方形为塔,小圆点为子弹),无外部图片。碰撞检测用欧氏距离。代码直接运行于现代浏览器。

4. 复杂 Three.js + Cannon.es 赛车计时收集赛

请实现以下功能:

使用 Three.js 和 Cannon.es(或 Ammo.js)开发 3D 赛车收集计时赛。赛车为立方体车身+圆柱体车轮,在环形闭合赛道上行驶。WASD 或方向键控制(前后加速/刹车,左右转向)。第三人称跟随相机。

  • 物理:质量、速度、转向力、摩擦力,与护栏碰撞后反弹并减速。

  • 收集:赛道上方漂浮20个金色圆环,穿过得1分,播放闪光粒子效果。倒计时90秒,时间到显示总分和最佳圈速。

  • 计时:记录每圈时间,起点线设触发器。最多跑3圈,显示当前圈数和上一圈耗时。完成3圈游戏结束。

  • 动态难度:每收集5个圆环,最高速度上限提升10%(初始15单位/秒)。

  • 视觉效果:动态天空盒或渐变背景,赛道用 Canvas 生成棋盘格纹理,赛车阴影,收集物旋转上下浮动。性能优化:使用 InstancedMesh 处理收集物,视锥剔除。

  • 不用外部模型文件,全用基本几何体。处理窗口 resize。输出自包含 HTML/CSS/JS。

5. 复杂 Babylon.js + WebSocket 双人实时迷宫夺旗

请实现以下功能:

使用 Babylon.js 和原生 WebSocket(或 Socket.IO)实现局域网双人实时迷宫夺旗游戏。需要编写 Node.js WebSocket 服务器(无数据库,内存维护状态)和前端 Babylon.js 3D 场景。

  • 迷宫生成:递归回溯算法生成 15x15 迷宫,墙壁高2,玩家出生在对角位置(第一人称或第三人称俯视可选)。

  • 旗帜:地图中央金色柱体,玩家触碰后需带回自己出生点得1分,旗帜在原位延迟3秒重生。携带旗帜的玩家头顶显示光环。

  • 规则:仅移动(WASD),无攻击。实时同步对方位置、旗帜状态(谁携带)、得分。先得3分者胜,显示胜者。

  • 网络同步:WebSocket 发送玩家位置(每50ms节流)、旗帜状态、得分,服务器广播。处理断线重连(重新加入同步状态)和客户端预测移动(服务器校验防止作弊)。

  • 前端:迷宫墙壁用 Babylon.MeshBuilder 创建立方体并合并网格,地面网格纹理。定向光+点光源跟随玩家。提供 minimap(俯视 2D Canvas 显示迷宫轮廓和双方位置)。

  • 性能:墙壁使用 InstancedMesh 或合并为一个 Mesh,保证 60fps。

  • 输出 server.js(ws 库)和 client.html。运行 node server.js 后浏览器访问,两个客户端通过不同标签页或局域网 IP 测试。无外部云服务。


这五条在项目里已经跑过一遍,每条都能直接拿去用。如果你也在做类似的游戏开发,注意两个点:一是难度标签要贴准,二是避免给前端任务塞后端依赖。游戏类里最容易被拒的是那些要求实时排行榜、用户登录或者第三方API的,除非明确写了全栈。

相关推荐
RANxy1 小时前
零基础全栈 React 入门(三):状态管理与事件处理
前端
Csvn1 小时前
前端调试技巧
前端
右耳朵猫AI1 小时前
React技术周刊 2026年第20周
前端·react.js·前端框架
问心无愧05131 小时前
ctf show web入门58
前端·笔记
zzx2006__1 小时前
JavaScript最终考核
开发语言·前端·javascript
用户4445543654261 小时前
Android跑马灯控件
前端
光影少年2 小时前
react全局状态、局部状态、服务端状态如何选型
前端·react.js·掘金·金石计划
甄心爱学习2 小时前
【项目实训(个人10)】
开发语言·前端·javascript
7yue2 小时前
我用 AI 把 Learn Claude Code 改写成了 TypeScript + 代数效应版本
前端