第19课：网页游戏JS
进度 0/30
🌐
网页游戏JS
浏览器就是游戏机，全世界点开就玩
📖知识引入
📱哪里都能玩
网页游戏不挑设备：手机、平板、电脑，打开浏览器就能玩。你做的那份game.html，其实已经是「跨平台游戏」了！
🎨canvas=魔法画布
网页里有一块叫canvas（画布）的区域，JS可以在上面随意涂画：矩形、圆形、图片都行，再配合每帧重画，画面就动起来了。
🔁网页版游戏循环
浏览器提供requestAnimationFrame（请求动画帧）：告诉浏览器「准备好下一帧就叫我」。用它写主循环，和Pygame的循环一个道理。
📦一个文件就是整个游戏
网页游戏可以打包成单个.html文件：代码、样式全在里面。拷给同学、发到群里，对方双击就能玩——传播零门槛。
🚀发布的主通道
itch.io上大量独立游戏都是网页版：上传html，全球玩家点链接即玩。第28课发布作品时，你就走这条路！
💡
网页游戏=一个html文件走天下，分享零门槛！
🔍网页游戏的完整骨架
// 网页游戏的最小循环骨架
let canvas = document.getElementById('game');
let g = canvas.getContext('2d'); // 拿到画笔
let x = 180;
function loop() {
// 1. 更新逻辑
x += 1;
if (x > 380) x = 0; // 出右边回左边
// 2. 绘制画面
g.clearRect(0, 0, 400, 500); // 清空画布
g.fillStyle = 'tomato';
g.fillRect(x, 100, 40, 40); // 画一个会跑的方块
// 3. 请求下一帧，循环继续
requestAnimationFrame(loop);
}
loop(); // 点火启动！还记得第4课的接金币吗？ 现在解剖它的结构：
<html> 一栋楼
<canvas> 留出一面墙当画布
<script> 魔法都写在这里
│
▼
游戏循环（requestAnimationFrame）
├─ 更新逻辑
│ 金币下落 coinY += 5
│ 碰撞检测 isCrash()
│ 分数生命 score += 10
│
└─ 绘制画面
清空画布 clearRect
画金币、画篮子、画分数对照其他工具：
Pygame : while循环 + clock.tick 网页JS : requestAnimationFrame Scratch : 重复执行积木
三兄弟长得不一样， 干的都是同一件事： 一圈一圈转循环！🔄
🎯小测验
第1题：网页游戏最大的传播优势是？
第2题：网页游戏里负责「画画」的区域叫？
第3题：网页版游戏循环靠什么驱动？
📝本课知识点
- ✓浏览器就是跨平台游戏机
- ✓canvas画布+JS画笔
- ✓requestAnimationFrame驱动循环
- ✓单html文件=整个游戏
- ✓itch.io是网页游戏的主场
第19课完成！继续探索下一课吧 🚀