HTML5 Canvas - Create 5 Games, 5 Projects, and Learn JavaScript

Description

This is a hands-on course that comes packed with source code ready for you to use through the lessons. The objective of this course is to guide you through the essentials of HTML5 Canvas drawing and how it works. You must have prior coding experience in JavaScript and HTML and familiarity with web development before getting started with this course.

This course goes over the features of HTML5 in a way that will help you quickly implement the concepts in interesting projects. You'll learn how to draw elements on Canvas and add keyboard event listeners for arrow keys and player interaction. A smooth animation is very critical for game play, and this course goes on to explain it in great detail. You will also learn other essentials required for gaming, such as scoring and applying automation to player moments.
The games involved in the course are as follows:
#1 HTML5 Canvas Pong: Hit the ball between 2 players on screen
#2 HTML5 Canvas falling items catcher: Catch items before they hit the bottom of the screen
#3 Bubble popper with mouse clicks: Click the bubbles as they appear randomly on the screen
#4 Brick breakout game: A version of the classic brick breaker game
#5 Battle Bots game on Canvas: Two autonomous players or take control and have 2 players using the keyboard
By the end of the course, you will have mastered the basic techniques to create a game using HTML5 Canvas. All you would have used to achieve this feat are HTML and JavaScript.
All resources and code files are placed here: https://github.com/PacktPublishing/HTML5-Canvas-Element

Create your first game using HTML5 and Canvas
Use the Canvas element to draw
Apply JavaScript to create Canvas effects, such as matrix, bouncing ball and more
Build a game with HTML5 Canvas, apply game logic, and more
Build projects that use advanced features of HTML Canvas
Create 2-player interaction and response

Anyone who wants to create games with HTML and JavaScript will find this course very useful. Prior knowledge of both HTML and JavaScript is needed for this course.

This is a fast-paced course that comes packed with source code ready for you to use through the lessons. The objective of this course is to guide you through the essentials of HTML5 Canvas drawing and how it works. You must have prior coding experience in JavaScript and HTML and familiarity with web development before getting started with this course.

Start drawing on Canvas with JavaScript * Use images on Canvas with the image options available * Advanced features such as image rotation and applying shadows to text

https://github.com/PacktPublishing/HTML5-Canvas-Element

Laurence Svekis is an experienced web application developer. He has worked on multiple enterprise-level applications, hundreds of websites, business solutions, and many unique and innovative web applications. He has expertise in HTML, CSS, JavaScript, jQuery, Bootstrap, PHP, and MySQL and is also passionate about web technologies, web application development, programming, and online marketing with a strong focus on social media and SEO. He is always willing to help his students experience what technology has to offer and looks forward to sharing his knowledge and experiences with the world.

1. Introduction to drawing using JavaScript on HTML5 Canvas Element

2. Battle Game using HTML5 Canvas and JavaScript

3. Create a Simple Interactive HTML5 Canvas Game HTML5 Canvas PONG Battle

4. HTML5 Canvas Game Bubble POPPER JavaScript Game

5. Falling Object Catcher Game HTML5 Canvas and JavaScript

6. JavaScript HTML5 Breakout Game Block Breaker

7. Course Questions and Answers - Useful Code Snippets and Code examples