How to create a simple HTML5 Canvas Game with JavaScript

Create an HTML5 Game from scratch using JavaScript to draw on canvas apply animations and interaction with keyboard
Laurence Svekis
1,314 students enrolled
English [Auto]
How to apply JavaScript to make a simple HTML5 canvas game
Draw with JavaScript in HTML5 Canvas
How to plan and create a JavaScript game
Creating games with JavaScript

Explore how you can create a quick simple game using JavaScript and HTML5 canvas element

Learn coding with FUN interactive game development – See what you can build in less than 1 hour with JavaScript!!!

Course covers all the core functions needed in a game

  • Basics of drawing on HTML5 canvas

  • How to create and track key presses

  • Setting basic game objects to manipulate and move on screen

  • Planning and game concepts

  • Adding second player and creating interaction

  • How to setup collision detection of two objects in canvas

  • How to add a bouncing ball on screen within HTML5 canvas

  • How to create smooth animations with JavaScript request animation frame object

  • Game review and how to make tweaks and adjustments

Source code is included so you can build your own version of the game as you go through the lessons

Quick straight to the point instruction by professional developer with over 19 years of experience – ready to help you learn and answer any questions you may have.

Introduction to creating a simple game using HTML5 Canvas and JavaScript

HTML5 Canvas Game Introduction.
How to Setup of HTML5 Game Board
Source Code code snippet simple HTML5 Game setup
How to Draw more shapes on Canvas HTML5 and JavaScript coding
Source Code drawing on HTMl5 canvas element
How to add KeyBoard Interaction to your HTML5 Simple Game
Source Code adding keyboard event listeners HTMl5 canvas game
How to create an opponent Second object on Screen HTML5 Canvas game
Source Code adding second player HTML5 game code snippet
How to create smooth animations in an HTML5 Canvas game Animation Frames
Source Code for animation frames with HTML5 example code
How to add collision detection between two objects on Canvas JavaScript
Source Code for HTML5 Collision detection objects Code example
How to add a Bouncing Ball on canvas using JavaScript Code in HTML5 canvas
Source Code code snippet for animation of bouncing ball
JavaScript simple game Final Game Tweaks
Source Code Final Game Code
Create pong game with pure javascript Pong Game Code Review.
You can view and review the lecture materials indefinitely, like an on-demand channel.
Definitely! If you have an internet connection, courses on Udemy are available on any device at any time. If you don't have an internet connection, some instructors also let their students download course lectures. That's up to the instructor though, so make sure you get on their good side!

Be the first to add a review.

Please, login to leave a review
30-Day Money-Back Guarantee


1 hours on-demand video
8 articles
Full lifetime access
Access on mobile and TV

External Links May Contain Affiliate Links read more

Join our Telegram Channel To Get Latest Notification & Course Updates!
Join Our Telegram For FREE Courses & Canva PremiumJOIN NOW