HTML5 Canvas create 5 Games 5 Projects Learn JavaScript

Course Curriculum

Chapter 1: Introduction to drawing using JavaScript on HTML5 Canvas Element

Lecture 1: HTML5 Canvas Introduction

Lecture 2: Resources

Lecture 3: Web Developer Setup Resources

Lecture 4: Start Drawing on Canvas with JavaScript.

Lecture 5: Source Code

Lecture 6: Basics of Drawing on Canvas

Lecture 7: Source Code

Lecture 8: Color Units and options for line and fill Color within Canvas objects

Lecture 9: Source Code

Lecture 10: Strokes and Lines drawing more objects on Canvas

Lecture 11: Source Code

Lecture 12: Draw Arcs and Circles.

Lecture 13: Source Code

Lecture 14: Add Text to Canvas JavaScript

Lecture 15: Source Code

Lecture 16: Canvas Drawing Draw a StickMan Challenge

Lecture 17: Source Code

Lecture 18: Options and how to draw Line Styles Canvas

Lecture 19: Source Code

Lecture 20: Using Images – Image Options Canvas HTML5 JavaScript drawing

Lecture 21: Source Code

Lecture 22: Color Gradients and Styling Fun

Lecture 23: Source Code

Lecture 24: Applying Text Shadows to text content within Canvas

Lecture 25: Source Code

Lecture 26: How to use Save and Restore.

Lecture 27: Source Code

Lecture 28: Scaling reverse Text mirror your text content

Lecture 29: Source Code

Lecture 30: Creating Canvas animations using JavaScript

Lecture 31: Source Code

Lecture 32: Project how to create Image Rotator.

Lecture 33: Source Code

Lecture 34: HTML5 Canvas Conclusion.

Chapter 2: Battle Game using HTML5 Canvas and JavaScript

Lecture 1: Battle Game Introduction

Lecture 2: Game setup How to HTML5 Setup and Draw.

Lecture 3: Source Code Drawing on Canvas fillRect method

Lecture 4: How to Drawing Paths Canvas Game Prep

Lecture 5: Source Code how to draw lines with Canvas HTML5

Lecture 6: How to draw arcs and Drawing Circles Canvas

Lecture 7: How to draw a Happy Face HTML5 Canvas code snippet

Lecture 8: How to make game animation with Canvas HTML5 JavaScript Animation Frame

Lecture 9: HTML5 how to add animations Code Snippet

Lecture 10: Make the game interactive with arrow keys Keyboard Event Listener Move.

Lecture 11: How to add Eventlisteners Canvas Keyboard Arrow Keys Code Snippet

Lecture 12: How to add a second Player to your HTML5 Canvas Game

Lecture 13: Source Code How to add an opponent in HTML5 Game Source Code

Lecture 14: How to set Movement Conditions and boundaries for players in game

Lecture 15: Movement of Players in Game HTML5 Canvas Game Source Code

Lecture 16: How to add Shooting with keypresses player event listeners

Lecture 17: Gameplay shooting within Game HTML5 Canvas Game source code

Lecture 18: How to add Collision Detection Objects within HTML5 JavaScript Game

Lecture 19: How to add Collision Detection to your HTML5 Canvas Game Source Code

Lecture 20: How to add Player Scoring within your JavaScript HTML5 game

Lecture 21: Code Snippet Adding Player Scoring to HTMl5 Canvas Game

Lecture 22: How to Game Reset and restart the game values

Lecture 23: Game Reset Canvas HTML5 Game Source Code

Lecture 24: HTML5 game code Game tweaks and Updates

Lecture 25: Source Code HTML5 Canvas game updates

Lecture 26: How to make an opponent in HTML5 game Opponent Brain Logic

Lecture 27: Adding Opponent Brain Logic 2 making the player move within the game

Lecture 28: Game Applying Logic adding an opponent Brain Source Code

Lecture 29: How to add Opponent Attack Mode to improve your gameplay

Lecture 30: HTML5 Game opponent attack mode source code

Lecture 31: How to add Game Tweaks and Adjustments to your HTML5 Game

Lecture 32: HTML5 Game Source Code updates

Lecture 33: Game code review and Section Code Conclusion

Lecture 34: Final Code HTML5 Game Updated Source Code

Lecture 35: Game Next Steps make 2 autonomous players HTML5 Canvas Battle Game V2

Lecture 36: Updated Source Code 2 Players Autonomous play HTML5 Canvas Game Code

Chapter 3: Create a Simple Interactive HTML5 Canvas Game HTML5 Canvas PONG Battle

Lecture 1: HTML5 Canvas PONG Game Introduction

Lecture 2: HTML5 Pong Setup of HTML5 Game Board

Lecture 3: Setup Game Board Source Code

Lecture 4: Game how to Draw more shapes on Canvas.

Lecture 5: Source Code

Lecture 6: HTML5 canvas game setup KeyBoard Interaction

Lecture 7: How to add event listeners Source Code

Lecture 8: How to add Second object on Screen for Pong Game online

Lecture 9: Source Code Movement Player key events

Lecture 10: HTML5 Pong game setup animations Animation Frames

Lecture 11: Making animations on Canvas HTML5 source code

Lecture 12: Adding collision detection between ball and paddles on Pong HTML5 game

Lecture 13: Source Code Interactions of canvas objects with collision detection

Lecture 14: HTML5 pong adding Bouncing Ball

Lecture 15: Source Code for bouncing ball

Lecture 16: HTML5 Canvas pong game Final Game Tweaks.

Lecture 17: Source Code Final Game HTML5 Pong Game

Lecture 18: Pong Game Code Review.

Chapter 4: HTML5 Canvas Game Bubble POPPER JavaScript Game

Lecture 1: Creating a bubble popping game with canvas Introduction Bubble Popper.

Lecture 2: Setup HTML canvas for bubble popping game

Lecture 3: How to setup Game HTML and Code source code

Lecture 4: How to create bubbles on canvas Gradient Fill

Lecture 5: Source Code HTML5 Canvas Gradient Fill Code

Lecture 6: Bubble popping game Generate Bubbles

Lecture 7: Source code to create bubbles for game

Lecture 8: Game objects animations Moving Bubbles HTML5