HTML5 Canvas create 5 Games 5 Projects Learn JavaScript

所在平台: Udemy

课程主页: https://www.udemy.com/course/html5-canvas-course/

课程评论:没有评论

第一个写评论        关注课程

课程简介

本课程名为“HTML5 Canvas 创建 5 款游戏/5 个项目,学习 JavaScript”。 **课程概述:** 本课程将教授如何使用 HTML5 Canvas API,通过 JavaScript 在网页上创建动态的 2D 图形和游戏。课程强调 **必须具备 JavaScript 编程经验**,不适合初学者。 **课程内容亮点:** * **HTML5 Canvas 基础:** 学习 Canvas 元素介绍、JavaScript 绘图基础、绘制不同形状(像素、线条、弧形、圆形)、添加文本、设置样式(颜色、笔触、渐变、文本阴影)、使用图像、保存和恢复 Canvas 状态、缩放和镜像文本。 * **Canvas 动画:** 学习如何使用 JavaScript 创建 Canvas 动画,并提供“Image Rotator”和“StickMan Challenge”等动画项目。 * **游戏项目:** 课程将引导学员从零开始创建五款不同类型的 HTML5 Canvas 游戏,包括: 1. **Pong 游戏:** 实现两人对战的经典 Pong 游戏,提供源代码。 2. **接物游戏:** 玩家需要接住下落的物品,躲避障碍物以获得分数。 3. **泡泡龙游戏:** 通过鼠标点击弹出屏幕上漂浮的泡泡,积累分数。 4. **打砖块游戏:** 构建经典的打砖块游戏,包含动态元素、奖励道具等。 5. **Battle Bots 游戏:** 创建一款独特的对战游戏,支持 AI 控制或键盘双人操作。 * **编程技巧:** 学习如何添加键盘事件监听器、实现平滑的动画效果、添加游戏得分和逻辑、实现玩家自动化移动、以及实现双人互动。 * **其他项目:** * **下载 Canvas 图像:** 学习如何添加按钮将 Canvas 内容保存为 Base64 格式的图像文件。 * **矩阵字符下落效果:** 使用 HTML5 Canvas 和 JavaScript 创建经典的矩阵数字下落特效。 * **弹跳小球:** 在 Canvas 上绘制一个弹跳的小球。 * **简单的绘图应用:** 创建一个可以在 Canvas 上进行简单绘图的应用。 * **学习支持:** 课程包含所有项目源代码,讲师拥有超过 20 年的 Web 开发经验,并提供快速友好的 Q&A 支持。 **先修要求:** * JavaScript 编程基础。 * HTML 基础。 **课程目标:** * 深入理解 HTML5 Canvas 的工作原理。 * 掌握使用 JavaScript 在 Canvas 上进行各种绘图操作。 * 能够独立开发多款基于 HTML5 Canvas 的游戏和交互式应用。 **特别说明:** 本课程节奏快,所有源代码均已包含。鼓励学员边学边练。课程内容严格围绕 HTML5 Canvas 及其相关应用展开。

课程评论(0条)

课程详情

Learn HTML5 Canvas Element - Quick Introduction to Canvas HTML5Introduction to drawing using JavaScript on HTML5 Canvas Element - This course requires JAVASCRIPT CODING!!!!!Do not take this course without prior coding experience - JavaScript and HTML and prerequisites New content just added - how to create your first game using HTML5 and Canvas - fun interactive battle game with computer brain and dynamic values. Explore how to make Canvas based games#1 HTML5 Canvas Pong Game - Hit the ball between ready 2 players on screen. Source Code included build your own version of the game.#2 HTML5 Canvas Falling items catcher Game - Objective of the game is to catch items as they fall. Score when you catch colorful balls avoid the blinking resizing items or you lose a life.#3 Bubble popper with Mouse Clicks - hover mouse over items and pop them. Score when you click and pop endless bubbles that float up the screen. Colorful bubbles.#4 Brick breakout game - Build your version of this classic brick breaker game. Dynamic game elements, adding bonus falling items and more. Take this game to the next level add more and customize the dynamic game values.#5 Battle Bots Game on Canvas - with 2 autonomous players or take control and have 2 players using the keyboard. You won't find THIS GAME anywhere else - How to draw elements on CanvasHow to add keyboard event listeners for arrow keys and player interactionHow to add animation for smooth gameplayHow to add game scoring and logicHow to apply automation to player movementCreate 2 player interaction and response to game actionsProjects -How to download canvas image to computer - simple code to add a download button downloading your canvas image as base64 image file to your computer.Create a Matrix falling letters effect using HTML5 Canvas. Add this special, effect using JavaScriptExplore how to make a bouncing ball on canvasUpload images from your computer into canvasDraw on canvas simple drawing application projectSource Code included --Explore how you can use JavaScript to draw within the HTML5 Canvas element on your webpagesSource Code included - step by step lessons with an introduction to basics of drawing on canvas. Course will walk through how to use JavaScript code and syntax to create visual content within the HTML5 canvas element on the webpage.The canvas element is part of HTML5 and allows for dynamic, scriptable rendering of 2D shapes and bitmap images.Course covers Getting started with HTML5 Canvas DrawingHow to Start Drawing on Canvas with JavaScript.Learn Basics of Drawing on CanvasColor Units and options for line and fill Color within Canvas objects Strokes and Lines drawing more objects on CanvasHow to create Draw Arcs and Circles.Add Text to Canvas JavaScriptOptions and how to draw Line Styles CanvasUsing Images - Image Options Canvas HTML5 JavaScript drawingColor Gradients and Styling Fun radial and linearApplying Text Shadows to text content within CanvasHow to use Save and Restore.Scaling reverse Text mirror your text contentCreating Canvas animations using JavaScriptProject how to create Image Rotator.Canvas Drawing Draw a StickMan ChallengeThis course is a fast paced course with all the source code included - Please try the code as you got hough the lessons to learn.There are prerequisites to this course - please ensure you do have the skillset to learn the content presented within the lessons. The design is to explore HTML5 Canvas and how it works. Scope of this course is HTML5 Canvas and content related to the learning objective will only be covered in the lessons of this course. Perfect to get introduced to HTML5 Canvas or as a refresher to anyone already familiar with web coding.Taught by a web developer with over 20 years experience - ready to help you learn and answer any questions you might have.Fast friendly support is always available within the Q & A section

课程标签

0人关注该课程

主题相关的课程