HTML5 Canvas 创建 5 个游戏 5 个项目 学习 JavaScript

创建 5 个游戏 5 个项目 – 在 Canvas 上绘图 – HTML5 Canvas 元素上的 JavaScript JavaScript 惊人效果

讲师：Laurence Svekis

---

你将会学到的

• 使用 HTML5 和 Canvas 创建你的第一个游戏
• 如何使用 Canvas 元素进行绘制
• JavaScript 如何应用于 HTML5 Canvas
• 使用 HTML 画布的基础知识
• 用 Canvas 创造惊人的东西
• 应用 JavaScript 创建画布效果，如矩阵、弹跳球等
• 使用 HTML5 画布构建游戏应用游戏逻辑等

要求

• HTML 和 CSS
• JavaScript 体验
• 渴望学习
• 网络编程经验

说明

学习 HTML5 Canvas Element – Canvas HTML5 快速介绍

在 HTML5 Canvas 元素上使用 JavaScript 绘图的介绍 –本课程需要 JAVASCRIPT CODING ！！！！！！

不要在没有编码经验的情况下参加本课程 – JavaScript 和 HTML 以及先决条件

刚刚添加的新内容 – 如何使用 HTML5 和 Canvas 创建你的第一个游戏 – 具有计算机大脑和动态值的有趣的交互式战斗游戏。探索如何制作基于 Canvas 的游戏

#1 HTML5 Canvas Pong Game – 在屏幕上准备好的 2 名玩家之间击球。源代码包括构建你自己的游戏版本。

#2 HTML5 Canvas Falling items catcher Game – 游戏的目标是在物品掉落时接住它们。当你抓住彩色球时得分，避免闪烁的调整大小的项目，否则你会失去生命。

#3 带有鼠标点击的泡泡弹出器– 将鼠标悬停在项目上并弹出它们。当你单击并弹出漂浮在屏幕上的无尽气泡时得分。五颜六色的气泡。

#4 Brick breakout game – 构建这款经典的破砖游戏的版本。动态游戏元素，添加奖励掉落物品等。将此游戏提升到一个新的水平，添加更多并自定义动态游戏值。

#5 画布上的战斗机器人游戏 – 有 2 名自主玩家或控制并有 2 名玩家使用键盘。你不会在其他任何地方找到这个游戏 –

• 如何在 Canvas 上绘制元素
• 如何为箭头键和玩家交互添加键盘事件监听器
• 如何为流畅的游戏添加动画
• 如何添加游戏得分和逻辑
• 如何将自动化应用于玩家移动
• 创建 2 名玩家互动和对游戏动作的响应

项目 –

包含源代码 —

探索如何使用 JavaScript 在网页上的 HTML5 Canvas 元素内绘图

包括源代码 – 一步一步的课程，介绍在画布上绘图的基础知识。课程将介绍如何使用 JavaScript 代码和语法在网页上的 HTML5 画布元素中创建可视内容。

canvas 元素是 HTML5 的一部分，允许对 2D 形状和位图图像进行动态、可编写脚本的渲染。

课程涵盖 HTML5 画布绘图入门

• 如何开始使用 JavaScript 在 Canvas 上绘图。
• 学习在画布上绘画的基础知识
• 画布对象中线条和填充颜色的颜色单位和选项
• 在画布上绘制更多对象的笔画和线条
• 如何创建画弧和圆。
• 将文本添加到画布 JavaScript
• 选项以及如何绘制线条样式画布
• 使用图像 – 图像选项画布 HTML5 JavaScript 绘图
• 颜色渐变和样式 有趣的径向和线性
• 将文本阴影应用于 Canvas 中的文本内容
• 如何使用保存和恢复。
• 缩放反向文本镜像你的文本内容
• 使用 JavaScript 创建 Canvas 动画
• 项目如何创建图像旋转器。
• 帆布画画一个火柴人挑战

本课程是一门快节奏的课程，包含所有源代码 – 请在学习课程时尝试代码。

本课程有先决条件 – 请确保你具备学习课程内容的技能。该设计旨在探索 HTML5 Canvas 及其工作原理。本课程的范围是 HTML5 Canvas，与学习目标相关的内容将仅包含在本课程的课程中。非常适合介绍 HTML5 Canvas 或作为已经熟悉 Web 编码的任何人的复习。

由拥有 20 多年经验的 Web 开发人员授课 – 随时准备帮助你学习和回答你可能遇到的任何问题。

问答部分始终提供快速友好的支持

此课程面向哪些人：

• 网络开发人员
• 网页设计师
• 任何想要了解有关创建 Web 内容的更多信息的人
• 任何想用 HTML 和 JavaScript 创建游戏的人