[Free] Code Your First Game: Arcade Classic in JavaScript on Canvas

[Free] Code Your First Game: Arcade Classic in JavaScript on Canvas

Program a complete game today. No special software or install required. All you need is a text editor and a web browser.

What You Will Learn

  • Display, position, and move filled shapes for retro and prototype gameplay
  • Move a ball around your game space such that it bounces off boundaries
  • Handle real-time mouse input
  • Detect and respond to simple collisions
  • Program very basic artificial intelligence
  • Keep and display score during play
  • Understand the subtle, key difference between a classic game in this style which is fun to play versus one that isn't
  • Define and code a win condition and end state for your game


  • Very early on students will need to show file extensions in their operating system (explained briefly in the video)
  • If a plain text editor is available that has programming features like line numbers and auto-indent (ex. Notepad++ on PC, TextWrangler on Mac) that may be handy but is not necessary, as a generic text editor like Notepad or TextEdit will work fine for a program of this size


At the end of this short course you'll have programmed your first game. You'll learn gameplay development fundamentals by really doing it – writing and running real code on your own machine.

Each step of the course has the source code attached exactly as it should look at that time (click "View Resources" then "Downloadable Resources"), for you to compare to or pick up from, so you can't get stuck!

Begin Your Game Programming Journey the Proven Way

"Make the simplest game possible." "Program a ball and paddle project." "Practice by first remaking something from the 1970's." All beginning developers hear this advice from more experienced peers... because it works!

By following this approach you will:
  • Learn design from a fun classic that people know and enjoy.
  • Start your practice today – now! – without waiting for an idea.
  • Finish your game in hours or in a weekend, not over months.
  • Understand every line of code used in the entire program.
  • Avoid distraction from searching for or creating detailed art.
  • Master fundamentals needed to make your own games better.
  • You can program this game with a normal text editor, and run it in the web browser you already have. No special software is needed.

Though you'll be coding in JavaScript for HTML5 canvas in this course, the focus is on common game programming concepts. You can later apply these same patterns to get quick results in other programming languages such as C#, Java, ActionScript 3, C++, or Python.

I'm a private game development trainer, and for clients new to gameplay programming this is exactly the material that I cover to get them started quickly. Within hours you will have finished programming your first project. This is the fastest way to get results. The momentum gained from doing this provides a solid foundation to give more advanced concepts meaning and context as you continue on in your journey of learning game development.

(HTML5 Logo in the course image is by W3C, licensed under Creative Commons Attribution 3.0 Unported.)

Who this course is for:

  • This is for anyone who wants a quick but thorough introduction to simple game programming in a way that doesn't require any special software, download, or installation
  • If you've had at least a little exposure to generic programming concepts like variables, functions, and if-statements you'll have an advantage, however in case you've never heard those terms they're explained briefly as they come up
  • Although this a uses JavaScript and HTML5, it is not intended for someone who is focused on learning HTML5/JS for web page design


Chris DeLeon - Instructor - Udemy
Enroll Now

This Course is Free For Limited Time. So enroll Soon

Blogging Expert, Tech Specialist and YouTuber
Newest Older


  1. Hello sir, now ThemeWiki website has changed domain name to themewiki.net Can you change my domain name extension.

  2. Hey Bro!
    Can I apply for a website affiliate position?

    Link : http://template.fayedark.com/
    Description : Blog chia sẻ template tốt nhất cho Blogger
    Name : Faye-Giao diện Blog

    Thank you!

  3. Hello sir, I want to link the website with you
    URL: https://www.machdao.online
    Title : Mach Dao Blog
    Des: Review, Share, Tech
    thanks, let me know so i can link back <3

  4. Hello,

    Now I have changed the domain name
    Old Blog Name: Quang Linh Sharing
    The new blog name is Quang Linh Pro
    Can you help me change the domain name of quanglinhchiase.com to quanlinhpro.com?
    Thank you so much ❤

    Blog Name: Quang Linh Pro
    Link: https://www.quanglinhpro.com/
    Description: Tech Tricks, Blogger, Facebook Tricks

  5. Hi sir , My name is Shiva

    Can you link my website to you?

    Blog name: Shiva Technic World

    Website URL: https://shivatechnicworldtech.blogspot.com

    Hope you will reply soon



Post a Comment