🎮 在线试玩: https://foxcss.github.io/world-cup-penalty-3d/ (改动后运行 ./deploy.sh 重新发布)
零构建的 three.js 静态网页游戏:选一支由球星领衔的国家队,打穿 1/4决赛 → 半决赛 → 决赛,捧起大力神杯。
python3 -m http.server 8612
# 打开 http://localhost:8612/需要联网(three.js 走 unpkg CDN),桌面鼠标 / 手机触屏均可玩。
-
多语言:主菜单可切换 中文 / English / 日本語,全部界面、提示、解说词、球员/球队/特长译名随语言切换,选择记忆在 localStorage。
-
选队:8 支国家队,每队由一名球星领衔(梅西/C罗/姆巴佩/内马尔/凯恩/哈兰德/孙兴慜/萨拉赫),力量/精准属性不同;每队队长还有专属特长——弧线大师(弧线更弯更能骗门将)、重炮手/暴力美学(满力度不易打飞+球速加成)、点球机器/法老之眼(落点偏差大减),队长主罚回合自动生效;其余队伍中随机抽 3 支作为晋级路上的对手,赛前有 VS 对阵卡。
-
球员轮换:每队有 5 名真实点球手,逐轮轮流主罚(梅西→迪马利亚→劳塔罗…),各有不同肤色、发型和背号,罚球时背号正对镜头清晰可见。
-
杯赛:1/4决赛 → 半决赛 → 决赛,每场都是 5 轮点球 + 突然死亡;越往后对方门将预判越准、射手发挥越稳。
-
进攻(三段式,弧线可跳过):① 移动指针在球门上选落点 → 点击锁定;② 弧线:左右移动鼠标直接调整香蕉弧方向与大小,3D 虚线实时预览整条球路(含风力吹偏),点击锁定——弧线让门将读错"出脚方向",越弯越能骗,但落点越难控;不想拐弯就点「直接射门」直线打;③ 力度槽:红区的位置和宽度每一球都随机(决赛更窄),指针速度也有随机浮动,停在红区力度与成功率最高,冲过红区会顶着横梁打飞。进球文字在球抵达球门线的瞬间就出现。
-
风力:每一球都有随机横风(右上角风旗显示方向与强度,越往后风越大),球路会被吹弯——预览线所见即所得,老手会故意往上风处瞄;对方 AI 也在同样的风里罚球,只能补偿掉大部分。直线球比弧线球更容易被门将预判。
-
连击士气:连续进球积累连击数(左侧 🔥 计数),x2/帽子戏法/4连击以上会触发全场沸腾的文字、彩带与镜头震动,并让对方门将更慌(扑救范围略缩);一旦被扑/打偏/中柱,连击清零。连击在整届杯赛中累计,结算画面显示最高连击。
-
赛场任务:每场比赛随机出现一个额外目标——连续打进 2 球、弧线球破门、完成扑救或队长进球。任务只提供局内挑战与结算记录,不会改变射门概率和比赛胜负。
-
门将读招:你主罚前对方门将会展示重心(向一侧倾身站位),打他重心的反方向更容易进——但越到决赛他越会"使诈"(倾左扑右);读招 + 弧线构成双层心理博弈。
-
赛点压力:进球即晋级的"赛点!"、不进即出局的"生死球!"、扑不住就回家的"危机!"都会有横幅提示 + 全场屏息,并且力度槽在压力球时走得更快。
-
勺子吊射(Panenka):弧线阶段可点「勺子吊射 🥄」——放弃力度直接轻挑中路,赌门将会飞扑:他扑了就是空门+优雅羞辱,他站在中路就会没收你的球、头顶 😏 嘲讽你。AI 越到决赛越敢勺你,守中路即可没收。
-
随机事件:助跑可能脚下打滑(大失准+😵);门将偶尔打瞌睡(头顶 😴,这球好打);完美红区中心的一击触发火焰球(炽热轨迹);每场随机天气(晴/雨/雪,粒子+雾效,风旗图标同步)。
-
滑稽演出:大力射门踢到自己原地转体 360°;打偏了泪奔扑街;门将扑到球原地弹起欢跳;三种随机庆祝(旋转跳跃/后空翻/直升机大风车);关键时刻头顶弹出 emoji 表情(😎😭😱😏🤯😅);足球本身踢出瞬间拉伸、被扑压扁的卡通形变。
-
防守(反应玩法,参考 Penalty Shooters 2):对方助跑期间球门上会闪现一个黄圈提示射门方向——但决赛阶段可能是假动作;在他起脚前点击 6 宫格选扑救方向,出手慢了门将只能站着目送。
-
演出:进球瞬间球网被冲出形变、射手振臂庆祝、镜头震动、白闪与彩带;对面看台上方有实时刷新的 3D 记分大屏;结算画面统计整届杯赛的进球率/神扑数/最高连击。
- 软萌小人球员(糖豆人风):程序化生成的一体成型胶囊蛋小人——大眼睛、短手短腿、球衣短裤号码全部画在一张 canvas 贴图上(每队即时重画换装,门将橙黑 1 号),单一网格从根上杜绝穿模。动作全部是程序化挤压拉伸(squash & stretch):果冻呼吸待机、摇摆小跑、蓄力压扁→弹起甩腿的三档射门、四肢张开的飞扑、进球后旋转跳跃的魔性庆祝,自动眨眼。
- 真实球门模型(
assets/goal.glb,约 11MB):带编织球网,按 7.32m 标准宽度归一化摆放,与呆萌小人形成反差萌。 - 球门模型来源:GitHub 公开仓库
lawtherea/soccer-cg-ab2(计算机图形学课程项目),仅供个人学习娱乐使用。 - 场景其余部分程序化生成:canvas 贴图(草皮线条/人群/广告牌/球面/扑救区块)、3D 记分大屏。
- 射门结果先结算后演出:落点偏差由精准属性 + 力度质量决定,门将按瞄准方向加权猜区,扑救半径随球速收缩。
- 音效为 WebAudio 合成(人群噪声循环 + 哨声/踢球/欢呼)。
- 调试:
?zones参数进防守视角看扑救选区;viewer.html?file=&anim=&tint=是独立模型查看器(看动画/材质/试染色)。