JavaScript - 一小时教会你制作《flappy bird》

缺什么补什么：别在游戏循环和碰撞检测上装懂

很多前端转岗或备考的人，简历里敢写熟悉 JavaScript，但真要你手写一个完整的小游戏，马上就会在游戏循环、状态机、物理位移和碰撞检测上露怯。平时做业务页面，多是处理表单和接口请求，很少碰高频动画帧和实时坐标计算。这门只聚焦《flappy bird》这一个具体案例的短课，解决的就是“语法全懂、但写不出能跑起来的逻辑”的硬伤。它不教你基础语法，默认你已经掌握了变量、函数、事件绑定，缺的是把零散语法组装成游戏运行算法的能力。如果你连 document 对象操作都吃力，建议先补基础再来；如果你只是缺实战串联，这门课正好拿来查漏补缺。

建议先看哪几块：从原理到算法的拆解顺序

资料里的内容不多，但逻辑咬合很紧，千万不要跳着看。第一节的核心是 DOM 碰撞检测原理，这是整个游戏判定输赢的地基。看的时候别光盯着最终代码，要自己跟着推导一遍：两个矩形在什么条件下会发生重叠？小鸟的坐标和管道的坐标在每一帧里是怎么变化的？把这套数学逻辑在脑子里跑通。第二节直接进入游戏运行算法，这是重中之重。重点听怎么用定时器或者请求动画帧来做主循环，怎么在循环里更新小鸟的下落速度，以及怎么生成和移动障碍物。建议看这两部分时，旁边开一个空文本文件，边听边把核心逻辑用伪代码写一遍，哪怕只是几个判断条件，也比干看强得多。

学完能做什么与资料怎么配合练习

看完这两节，你应能独立回答几个关键问题：游戏主循环的退出条件是什么？重力加速度在代码里怎么体现？碰撞检测的边界容错怎么处理？学完的检验标准不是背诵概念，而是关掉视频，自己从零建一个页面，把这只鸟飞起来。配套练习方面，不要直接拿现成代码抄。先照着视频里的思路，自己写小鸟的跳跃逻辑，跑通了再去写管道的生成。遇到卡壳，再回去找对应的章节看算法推导。如果能把基础的飞鸟跑通，还可以逼自己做个扩展练习：比如加一个计分显示，或者调整难度系数。这种短平快的实战，补的就是你动手写算法的肌肉记忆。