Skip to content
Create an HTML5 Canvas Game JavaScript MouseClick Popper cover image
Play overlay
Preview this course

Create an HTML5 Canvas Game JavaScript MouseClick Popper
Discoveryvip

Build a JavaScript Canvas Game from Scratch Bubble Popping game HTML5 Canvas Step by step coding to create a game

Summary

Price
£59.99 inc VAT
Or £20.00/mo. for 3 months...
Study method
Online, On Demand
Duration
1.4 hours · Self-paced
Qualification
No formal qualification
Certificates
  • Reed courses certificate of completion - Free

Overview

What you'll learn

  • How to apply JavaScript to create a interactive web based game

  • Explore how to write code to HTML5 Canvas with JavaScript

  • How to create interactive dynamic web based games with JavaScript

  • 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

Certificates

Reed courses certificate of completion

Digital certificate - Included

Will be downloadable when all lectures have been completed

Curriculum

1
section
19
lectures
1h 24m
total

    • 1: Introduction How to Make a Bubble Popper Game Preview 02:18
    • 2: How to Write the Code Setup HTML for Game Preview 06:15
    • 3: Source Code Draw a Circle on canvas Code Example JavaScript 01:00
    • 4: How to draw bubbles on canvas Gradient Fill 05:09
    • 5: Create Gradient bubble effect HTML5 Canvas Drawing 01:00
    • 6: How to use JavaScript to Generate Bubbles and make game play 05:29
    • 7: Source Code 01:00
    • 8: How to move items within canvas Moving Bubbles HTML5 canvas 07:58
    • 9: Add animation to Game HTML5 Canvas Code Example 01:00
    • 10: How to make dynamic content for javascript game Making Bubbles More 05:49
    • 11: Create Moving Colourful bubbles on Canvas HTML Code Snippet 01:00
    • 12: How to track and make clicks on canvas Add Mouse Clicks on Canvas 12:37
    • 13: Track mouse clicks on Canvas code snippet 01:00
    • 14: How to add Mouse Click Collision Detection 08:20
    • 15: HTML5 Collision detection on HTML5 Canvas Code Example 01:00
    • 16: How to use arrays for the game Multiple Array Collision Detection 04:22
    • 17: Multiple Array Collision Detection Canvas HTML5 Source Code 01:00
    • 18: How to add scoring to your JavaScript game Game Scoring Canvas 06:56
    • 19: Final Code Review Bubble Popper 10:38

Course media

Description

Do you want to build a Bubble Popping Game - That is all done with JavaScript on HTML5 Canvas - No libraries no tricks no shortcuts all JavaScript on HTML5 Canvas. Step by step walkthrough of how to create a game from scratch on an html page. Then apply JavaScript to create the elements, create interaction, setup dynamic content and make animations. Explore building Games with JavaScript see how a game can be created from scratch using HTML5 and JavaScript

One of KIND game using straight pure JavaScript to draw on canvas and add game controls and interactions.

Source code included - BUILD YOUR OWN VERSION of THE GAME TODAY!!!! 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.

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.

Course covers all the core functions needed in a game

  • How to draw on HTML5 canvas with JavaScript

  • Making elements move

  • Event listeners for clicks on canvas

  • Collision detection to check if objects are intersecting

  • Adding game scoring and making it fun

  • 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

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

Who is this course 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

Requirements

  • Basic JavaScript knowledge

  • Understanding of coding

  • Editor and ability to write code

  • Prior Coding Experience

Questions and answers

Currently there are no Q&As for this course. Be the first to ask a question.

Ask a question

Reviews

Currently there are no reviews for this course. Be the first to leave a review.

Leave a review

Legal information

This course is advertised on Reed.co.uk by the Course Provider, whose terms and conditions apply. Purchases are made directly from the Course Provider, and as such, content and materials are supplied by the Course Provider directly. Reed is acting as agent and not reseller in relation to this course. Reed's only responsibility is to facilitate your payment for the course. It is your responsibility to review and agree to the Course Provider's terms and conditions and satisfy yourself as to the suitability of the course you intend to purchase. Reed will not have any responsibility for the content of the course and/or associated materials.

FAQs

Study method describes the format in which the course will be delivered. At Reed Courses, courses are delivered in a number of ways, including online courses, where the course content can be accessed online remotely, and classroom courses, where courses are delivered in person at a classroom venue.

CPD stands for Continuing Professional Development. If you work in certain professions or for certain companies, your employer may require you to complete a number of CPD hours or points, per year. You can find a range of CPD courses on Reed Courses, many of which can be completed online.

A regulated qualification is delivered by a learning institution which is regulated by a government body. In England, the government body which regulates courses is Ofqual. Ofqual regulated qualifications sit on the Regulated Qualifications Framework (RQF), which can help students understand how different qualifications in different fields compare to each other. The framework also helps students to understand what qualifications they need to progress towards a higher learning goal, such as a university degree or equivalent higher education award.

An endorsed course is a skills based course which has been checked over and approved by an independent awarding body. Endorsed courses are not regulated so do not result in a qualification - however, the student can usually purchase a certificate showing the awarding body's logo if they wish. Certain awarding bodies - such as Quality Licence Scheme and TQUK - have developed endorsement schemes as a way to help students select the best skills based courses for them.
View all
Similar subjects: Game development, JavaScript, HTML, IT, Coding
Related searches: Online courses

Interest free credit agreements provided by Zopa Bank Limited trading as DivideBuy are not regulated by the Financial Conduct Authority and do not fall under the jurisdiction of the Financial Ombudsman Service. Zopa Bank Limited trading as DivideBuy is authorised by the Prudential Regulation Authority and regulated by the Financial Conduct Authority and the Prudential Regulation Authority, and entered on the Financial Services Register (800542). Zopa Bank Limited (10627575) is incorporated in England & Wales and has its registered office at: 1st Floor, Cottons Centre, Tooley Street, London, SE1 2QG. VAT Number 281765280. DivideBuy's trading address is First Floor, Brunswick Court, Brunswick Street, Newcastle-under-Lyme, ST5 1HH. © Zopa Bank Limited 2025. All rights reserved.