HTML5 Canvas Projects
4.5 (3 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
72 students enrolled

HTML5 Canvas Projects

Learn HTML5 Canvas by Doing
4.5 (3 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
72 students enrolled
Last updated 2/2020
English
English
Current price: $69.99 Original price: $99.99 Discount: 30% off
5 hours left at this price!
30-Day Money-Back Guarantee
This course includes
  • 15.5 hours on-demand video
  • 1 downloadable resource
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
Training 5 or more people?

Get your team access to 4,000+ top Udemy courses anytime, anywhere.

Try Udemy for Business
What you'll learn
  • HTML5 Canvas drawing with JavaScript.
  • Game programming.
  • Use sounds in a web application.
  • Saving images in a web application.
  • Keyboard controls.
Course content
Expand all 38 lectures 15:28:22
+ Overview
1 lecture 03:24

With the advent of the HTML5 Canvas tag, the world of graphical manipulation in the browser has become a reality. This series is an exploration of some the possibility that are available when using the canvas element. The ultimate aim is to use project-based exploration of the capabilities of the HTML5 Canvas element by building games as well as some utilities. Along the way, you may learn some other interesting JavaScript uses. See you there!

Preview 03:24
+ Pong
11 lectures 04:43:27

Justin and Zach begin to build their homage to the game PONG, stress the importance of knowing about HTML5 Canvas Planning, using ATOM for text editor, use Chrome as web browser, file-add project folder, animations can be on a single HTML Page, C55, <!DocType html>, using the Mozilla Developer Network, and Console.Log.

Preview 28:05

Justin and Zach begin to create the 'Ball' to be used in their home to the game PONG, what we need to think about in creating it, Angular JS is the running logic, using UPDATE-RENDER-DATA, App. JS is the game state, and if we need to make the ball circular and why.

Creating the Ball
28:23

Justin and Zach explain a general approach of creating a paddle object to illustrate designing the paddle for the player and for the computer, showing how to utilize this custom object to extend for use as a player paddle as well as a computer paddle.

Creating the Paddle
27:04

Justin and Zach continue to build  their homage to PONG, and demonstrate the use of the standard paddle to create a player controlled paddle.

Creating the Human Player Paddle
27:46

Justin and Zach create the computer paddle that the game will use to play against the human player, demonstrating how to create different strategies that can be applied to the computer player.

Creating the Computer Player Paddle
22:59

Justin and Zach continue to create the computer paddle that the game will use to play against the human player, demonstrating how to create different strategies that can be applied to the computer player.

Creating the Computer Player Paddle Pt. 2
22:07

Justin and Zach add some structure to the Game by creating a managing Game Object that will oversee the Game, and setting up further expansion to score inclusion & other "setup" plus "managed" features.

Refactoring into a Game Object
19:08

In this episode, Justin and Zach continue the discussion about adding some structure to the game by creating a managing game object that will oversee the game, using this time to setup for further expansion to score inclusion & other "setup" & "managed" features.

Refactoring into a Game Object Pt. 2
25:16

In this episode, Justin and Zach conclude the discussion about adding some structure to the game by creating a managing game object that will oversee the game, using this time to setup for further expansion to score inclusion & other "setup" & "managed" features.

Refactoring into a Game Object Pt. 3
27:51

In this episode, Justin and Zach take us through creating a scoreboard that will take both of the players, and the scoreboard will be used to determine the game winning condition.

Creating the Scoreboard
24:38

In this episode, Justin demonstrates how to change the the paddle objects to become aware of the ball object. By doing this, the paddle can determine if the ball has collided with it. Moreover, Justin discusses how this method compares and contrasts with making the ball aware of the paddle.

Detecting Collisions
30:10
+ Image Editor
6 lectures 02:14:02

In this episode, Justin shows the design of the image editor that we are going to create in the browser. He shows how the planning leads to knowing how to implement a solution based on small pieces of a project.

Designing the Image Editor
14:42

In this episode, Justin demonstrates implementing the interface design from the previous episode. As a first pass on the layout, this may change as more functionality is necessary.

Setting up the Interface
19:23

In this episode, Justin demonstrates obtaining an image from a local source. Moreover, he shows how to hold the image into an in-memory representation to be manipulated and drawn.

Accessing the Image
26:41

In this episode, Justin demonstrates building different image manipulation filters that are going to be available in the application such as greyscale, sepia, and blurring.

Building Image Manipulation Functions
21:08

In this episode, Justin and Zach demonstrate different image manipulation filters that are going to be available in the application such as greyscale-sepia-blurring, and we begin this episode by covering why we need to make copies.

Building Image Manipulation Functions Pt. 2
28:18

In this episode, Justin demonstrates how to take the one can use the browser functionality to create a downloaded file that is a copy of the transformed image.

Saving the Image
23:50
+ AtmoAttack
13 lectures 05:34:14

In this episode, Justin plans out the project for AtmoAttackers. He designs the interface as well as the interactions that are necessary for creating the game dynamic. Moreover, he sets up the project structure in preparation for implementing the game.

Planning the Project
20:10

In this episode, Justin creates a basic fighter object that will be controlled by the player. He uses a simplified version [rectangle] to get the placement and movements wired up.

Creating a Basic Fighter
24:57

In this episode, Justin creates a simple attacker. He demonstrates creating the data representation, how the attacker will move, as well as rendering the attacker to the game screen.

Creating a Basic Attacker
25:44

In this episode, Justin creates the data representation of a pellet as well as how it will be rendered on the screen. Moreover, Justin creates the user input instructions for firing the pellets from the fighter as well as demonstrates how to manage the limitations of having multiple pellets.

Creating the Pellets
29:49

In this episode, Justin alters the interactions of the pellets in order to remove the pellets from play if they contact an attacker as well as limit the amount of pellets on screen to eliminate spamming the fire button.

Creating the Pellets Pt. 2
19:42

In this episode, Zack and Justin take some time to organize and cleanup as well as refactor the code to separate the concerns of the fighter, attacker, and pellet structures. Moreover, Justin creates a main game object that will be used to manage the animation and interactions.

Cleaning Up and Refactoring
29:56

In this episode, Zack and Justin create a swarm of attackers that behave in unison. Moreover, he shows that the swarm now defines the collection of attackers, but that the attackers can still have behaviors and properties themselves. The swarm object allows easier management of the collection of attackers.

Creating a Swarm
25:50

In this episode, Justin refactors the original implementation of the swarm of attackers in order to address the changing boundary issues as well as make the main game code more readable.

Creating a Swarm Pt. 2
36:15

In this episode, Zack and Justin return to the game to add image based sprites to the fighter and attacker.

Adding Sprites
25:34

In this episode, Zack and Justin return to the game to add image based sprites to the attacker.

Adding Sprites Pt. 2
18:18

In this episode, Zack and Justin demonstrate adding sound to the game in order to add a little extra flair to the playing experience.

Adding Sounds
26:28

In this episode, Zack and Justin continue adding sounds to the game including fixing the lag between rapid fire shots and the pellet sound, the game over sound as well as the explosion sounds upon enemy destruction.


Adding Sounds Pt. 2
20:10

In this episode, Zack and Justin explore how the game over state of the game is decided. More specifically, Justin demonstrates how to manage the two states of the game, the attackers reach the fighter or the fighter destroys all of the attackers.

Ending the Game
31:21
+ DevPaint
7 lectures 02:53:15

In this episode, Zack and Justin plan out a graphical editing application in the browser that will allow for basic drawing in the browser.

Planning the DevPaint Project
17:03

In this episode, Vonne and Justin get started implementing the first drawing capability of DevPaint.

Creating a Pencil Drawing
30:22

In this episode, Vonne and Justin take a look at how to fix the tracking of the pointer in order to make rendering the line more accurate to the mouse cursor. Justin also refactors the application code to provide a little more readability.

Creating a Pencil Drawing Pt. 2
24:37

In this episode, Vonne and Justin fix the single continuous path so that users can draw multiple yet separate lines. In order to accomplish this, Justin introduces a new object into the application and refactors, yet again, the application code.

Creating a Pencil Drawing Pt. 3
25:48

In this episode, Vonne and Justin demonstrate how to use new features of HTML5 to interface with DevPaint to allow selecting different colors.

Adding Color Selections
25:13

In this episode, Vonne and Justin describe and implement the ability to change the pen tool size when drawing. Justin emphasizes how that information propagates to other objects within the application.

Adding Size Choices
18:44

In this episode, Zack and Justin demonstrate how to save the masterpieces that you have drawn with the tool.

Saving the Image
31:28
Requirements
  • HTML and JavaScript familiarity.
  • Understand DOM events.
Description

HTML5 Canvas Projects

With the advent of the HTML5 Canvas tag, the world of graphical manipulation in the browser has become a reality. This series is an exploration of some the possibility that are available when using the canvas element. The ultimate aim is to use project-based exploration of the capabilities of the HTML5 Canvas element by building games as well as some utilities. Along the way, you may learn some other interesting JavaScript uses. See you there!

Course Format

•          Binge-worthy TV shows! Watch comprehensive, in-depth episodes that use a talk show-like format to keep you engaged while learning.

•          You can pick and choose episodes or you can watch as a complete series.

•          A little humor, anecdotes, and real-world examples.

Other Courses

Ready to become a DevPro? Get more DevProTV training with a variety of topics. Join Justin and DevProTV to level up your programming prowess!

Updates and Versions

The programming world updates at a break neck pace. As a result, there are times that certain tools, editors, libraries have changed. While syntax or names may change, the foundations remain the same. Though we hope to keep things updated, there may be time before that can occur. I recommend seeing if you can translate between changes and if all fails, ask questions!

Who this course is for:
  • Programmers looking to utilize the graphical capabilities of HTML5 and JavaScript.