使用 HTML CSS JavaScript 从头开始​​构建格斗游戏

MP4 |视频：h264，1920×1080 |音频：AAC，44.1 KHz，2 Ch
语言：英语 |时长：4小时0米

你将学到什么

• 如何设置 HTML5 元素并使用 JavaScript 在其上绘制形状、图像和精灵表。
• 如何使用 requestAnimationFrame 构建正确的游戏循环，并让游戏在不同的显示器和刷新率下以一致的速度运行。
• 如何实现核心 2D 游戏物理原理，包括重力、地面碰撞、跳跃和平滑的左/右移动。
• 如何捕获和响应键盘输入以驱动响应式两人控制，包括移动、跳跃和攻击
• 如何使用可重用的 Sprite 类加载精灵表并通过空闲、奔跑、跳跃、坠落、攻击、击中和死亡状态为角色设置动画。
• 如何通过构建结合物理、动画和战斗行为的 Fighter 类来设计和构建面向对象的游戏代码。
• 如何检测碰撞箱和伤害箱之间的碰撞、施加伤害并创建令人满意的攻击和反应战斗机制。
• 如何构建完整的游戏 UI，包括生命条、倒计时器、模式选择屏幕、倒计时介绍和游戏结束屏幕。

要求

• 基本熟悉 HTML、CSS 和 JavaScript（变量、函数、条件、循环、数组和基本 DOM 概念）
• 舒适地使用 ES6 函数类很有帮助，但不是必需的 – 我们将边做边构建它们
• 无需具备游戏开发、数学或图形编程经验
• 无需框架、库、构建工具或包管理器 – 一切都是纯 HTML、CSS 和普通 JavaScript
• 现代网络浏览器，例如 Chrome、Firefox、Safari 或 Edge

描述

本实践课程教您如何仅使用 HTML、CSS 和普通 JavaScript 从头开始构建完整的 2 人浏览器格斗游戏。无需学习框架，无需安装 npm，也没有隐藏的魔法——只有您、您的编辑器和浏览器。最后，您将拥有一款精美的游戏，其中包括动画精灵表角色、响应式两人控制、攻击命中检测、生命条、倒计时器、模式选择屏幕和人工智能控制的对手。

本课程分为多个渐进部分，每个部分都直接建立在上一课的工作基础上。您将首先设置画布并绘制第一个形状，然后添加重力、跳跃和运动。从那里，您将加载精灵表，构建可重用的精灵类，并将其发展为具有物理和动画的完整战斗机类。一旦两名战士都出现在屏幕上，您将连接键盘输入，设计带有生命条和计时器的 HUD，实现攻击和命中检测逻辑，并创建一个动画状态机，在空闲、奔跑、跳跃、攻击、命中和死亡动画之间平滑切换。

在此过程中，您将了解几乎所有 2D 游戏的核心概念：

• 游戏循环
• Delta-time 更新可在不同显示器上实现一致的游戏体验
• 碰撞检测
• 输入处理
• 精灵动画
• 状态管理
• 最后几章对原型与真实游戏进行了润色
• 模式选择屏幕
• 倒计时简介
• 两人模式
• 人工智能对手
• FPS 上限
• 游戏结束流程

对于已经了解 HTML、CSS 和 JavaScript 基础知识并想要进入游戏开发或只是构建一些有趣且令人印象深刻的东西的开发人员来说，本课程是理想的选择。不需要任何游戏开发经验。您所需要的只是一个代码编辑器（推荐 VS Code）和一个现代浏览器。启动您的编辑器，打开入门文件，然后让我们构建一个游戏。

本课程适合谁

• 了解 HTML、CSS 和 JavaScript 基础知识并希望将这些技能应用到有趣和可视化内容中的初级到中级 Web 开发人员
• 希望通过友好、无框架的方式介绍 2D 游戏开发概念（例如游戏循环、物理、精灵动画和碰撞检测）的有抱负的游戏开发者
• 自学成才的程序员和训练营毕业生正在寻找一个超越典型的待办应用和登陆页面的值得投资组合的项目。
  通过从头到尾构建真实、完整的项目而不是孤立的练习来学习效果最好的学生和爱好者
• 开发者对游戏在没有 Unity、Godot 或 Phaser 等抽象引擎的情况下实际如何工作感到好奇
• 任何曾经想要构建自己的浏览器游戏并将其发送给朋友的人 – 本课程将带您从空白画布一直到完成的、可玩的格斗游戏