Udemy
    •  
    •  
    •  
    •  
    •  
    •  
    •  
    •  
Subscribe
Turn what you know into an opportunity and reach millions around the world.
Learn More
Your cart is empty.
Keep shopping
Create a Game HTML5 Canvas Simple Catcher Game JavaScript
Rating: 4.4 out of 5(5 ratings)
1,411 students

Create a Game HTML5 Canvas Simple Catcher Game JavaScript

Explore how you can create an HTML5 Canvas based game from scratch using JavaScript Step by Step game creation
Created byLaurence Svekis
Last updated 11/2024
English

What you'll learn

  • How to Create a HTML5 Canvas Game
  • How to apply JavaScript to make a simple HTML5 canvas game
  • Draw with JavaScript in HTML5 Canvas
  • Apply Game design and logic to make gameplay
  • How to plan and create a JavaScript game
  • Creating games with JavaScript

Course content

2 sections • 23 lectures • 1h 42m total length

  • Introduction how to make a game using JavaScript and HTML51:58
  • Get ready and Setup Game HTML code1:41
  • How to JavaScript Create Elements from code6:35
  • Draw on Canvas Code Snippet0:08
  • How to add Keyboard Event Listeners to HTML5 game9:16
  • Keyboard events to move Canvas item Code Snippet0:12
  • How to create enemies in game Drop random items5:18
  • Source Code to Generate Random Items on Canvas0:16
  • How to move enemies on canvas game Move Random Objects5:21

    Move enemies with random speed from off-screen, loop to update their Y positions, remove off-screen ones, and render them as colored circles, setting up for future random color variations.

  • Moving objects and making them round on Canvas source Code0:20
  • How to Add Colors and Set hazards in JavaScript game8:05
  • Source Code grow and shrink bad objects falling Code Snippet0:28
  • How to setup Collision Detection HTML5 JavaScript game13:05
  • How to run code and add actions for Collision Actions in JavaScript game3:41
  • Source Code for Collision detection with JavaScript on HTML5 Canvas1:02
  • How to Add Scoring to Game in JavaScript7:34
  • Source Code for adding scoring in Game HTML5 JavaScript1:11
  • How to add Game Controls within your JavaScript Game9:03
  • Source Code for JavaScript Game Controls1:33
  • How to setup start and end within JavaScript game - Start Game Option14:42

    Implement a start button and canvas click to start a JavaScript HTML5 canvas catcher game, reset scores and lives, center the player, and use collision detection for start-end state control.

  • Source Code Adding Clickable Buttons to Canvas Game1:49
  • JavaScript HTML5 Canvas game Catcher Game Code Review.9:05

Requirements

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

Description

Do you want to learn how to make Games online ????

Start here - perfect to see how a game can be created from scratch using HTML5 and JavaScript

No libraries no shortcuts - straight pure JavaScript to draw on canvas and add game controls and interactions.

This is a one of kind build that you will only get here - custom code from start to finish -

Step by step learning on how to create all the game functionality you need to complete a full functional game.

Quick tutorial in just over 1 hour will give you a fast paced no filler content course that you can learn from.

Professional instruction - taught by a developer with over 20 years experience - having developed over 100 web games.

Instructor is ready to help you learn and answer any questions you may have.

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 with JavaScript!!!

Course covers all the core functions needed in a game

  • Basics of drawing on HTML5 canvas

  • Clearing and drawing shapes

  • Adding key event listeners

  • Making objects MOVE with keypresses

  • Tracking key presses to make game interaction.

  • Collision detection

  • Adding buttons that are interactive on the canvas

  • Adding game scoring and game controls

  • Creating enemies and building unlimited enemies within an array

  • Movement and animation of objects

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



Who this course is for:

  • Anyone who wants to create a fun simple game online
  • Anyone who wants to practice creating games with JavaScript
  • Anyone who is starting out with game development
  • HTML5 game developers
  • JavaScript developers
  • Web Coders and web designers

Report abuse