Udemy
    •  
    •  
    •  
    •  
    •  
    •  
    •  
    •  
Subscribe
Turn what you know into an opportunity and reach millions around the world.
Learn More
Your cart is empty.
Keep shopping
Create simple HTML5 Canvas Game with JavaScript Pong Game
Rating: 4.2 out of 5(21 ratings)
5,703 students

Create simple HTML5 Canvas Game with JavaScript Pong Game

Create an HTML5 Game from scratch using JavaScript to draw on canvas apply animations and interaction with keyboard
Created byLaurence Svekis
Last updated 11/2024
English

What you'll learn

  • 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

Course content

2 sections • 20 lectures • 1h 25m total length

  • HTML5 Canvas Game Introduction.2:25
  • Web Development Code Editor Update Information2:45
  • How to Setup of HTML5 Game Board5:42
  • Source Code code snippet simple HTML5 Game setup0:07
  • How to Draw more shapes on Canvas HTML5 and JavaScript coding9:23
  • Source Code drawing on HTMl5 canvas element0:16
  • How to add KeyBoard Interaction to your HTML5 Simple Game9:50
  • Source Code adding keyboard event listeners HTMl5 canvas game0:16
  • How to create an opponent Second object on Screen HTML5 Canvas game9:11
  • Source Code adding second player HTML5 game code snippet0:26
  • How to create smooth animations in an HTML5 Canvas game Animation Frames3:35
  • Source Code for animation frames with HTML5 example code0:26
  • How to add collision detection between two objects on Canvas JavaScript8:00
  • Source Code for HTML5 Collision detection objects Code example0:33
  • How to add a Bouncing Ball on canvas using JavaScript Code in HTML5 canvas11:28
  • Source Code code snippet for animation of bouncing ball1:12
  • JavaScript simple game Final Game Tweaks14:18
  • Source Code Final Game Code1:30
  • Create pong game with pure javascript Pong Game Code Review.4:28

Requirements

  • Basic JavaScript knowledge
  • Understanding of coding
  • Editor and ability to write code

Description

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

Create an HTML5 Pong Game from scratch

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.

Learn and explore what HTML is and how it can be used to create amazing web pages - Hypertext Markup Language is the standard markup language for documents designed to be displayed in a web browser. It can be assisted by technologies such as Cascading Style Sheets and scripting languages such as JavaScript

Who this course is for:

  • JavaScript developers
  • Anyone who wants to create a fun simple game online
  • HTML5 game developers
  • Anyone who is starting out with game development

Report abuse