Code Your First Game: Arcade Classic in JavaScript on Canvas
4.7 (4,778 ratings)
Instead of using a simple lifetime average, Udemy calculates a course's star rating by considering a number of different factors such as the number of ratings, the age of ratings, and the likelihood of fraudulent ratings.
50,351 students enrolled
Wishlisted Wishlist

Please confirm that you want to add Code Your First Game: Arcade Classic in JavaScript on Canvas to your Wishlist.

Add to Wishlist

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.
4.7 (4,778 ratings)
Instead of using a simple lifetime average, Udemy calculates a course's star rating by considering a number of different factors such as the number of ratings, the age of ratings, and the likelihood of fraudulent ratings.
50,351 students enrolled
Last updated 9/2015
English
Price: Free
Includes:
  • 2 hours on-demand video
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
What Will I 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
View Curriculum
Requirements
  • 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
Description

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 is the target audience?
  • 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
Students Who Viewed This Course Also Viewed
Curriculum For This Course
Expand All 12 Lectures Collapse All 12 Lectures 02:09:51
+
Setting Up the Code and Learning Essential Concepts
4 Lectures 47:55

By following along with this video you'll create your first code file by using a plain text editor, and you'll test run that code by using any common web browser. You'll also see how to view your browser's console, which will be very useful for troubleshooting errors later.

In case you get stuck at any point in this video – or any one later in this course – you can download each video's example source code zip file in order to have a snapshot of exactly how the code ought to look after completing each step covered in this course.

Introduction and First Code File
14:34

You'll learn how to draw, position, and change the dimensions of rectangles on the screen. This drawing technique will soon be used to represent both paddle positions.

Drawing and Positions
12:24

Live action with motion requires that the code doesn't just happen once – it has to keep running over and over again. In this step you'll get that working, and by doing so you'll open up a whole world of possibilities for dynamic movements and interactivity.

Movement and Time
14:07

For this brief intermission we'll take a few moments to rethink how the functionality has been programmed so far. These changes will not affect what the game does, but they will make the upcoming changes much easier. This type of "refactoring" as the program grows is a common part of programming.

Clean Up the Code
06:50
+
Getting the Core Gameplay Working
5 Lectures 53:36

Here you'll write code to detect when the ball is crossing an edge of the graphics canvas. As it does so, you'll reverse its direction to bounce it off the boundaries, keeping the ball in play and in view.

Bouncing the Ball
13:41

Drawing a circle is a bit more involved than drawing a rectangle, but the game will look much better with a round ball. You'll learn in this step how to display a filled circle on the screen. Next you'll hide all the complex details of doing so in a new helper function, which will greatly reduce how much you'll need to remember or figure out for the next time that you need to draw a circle.

Circle Draw Details
06:56

So far, the ball only moved side-to-side. Now with this step you'll move and bounce the ball vertically, as well. You'll also hook up the paddle's position to follow your mouse input.

Ball 2D Motion, Paddle
12:20

You'll now write the ball collision code for each paddle, causing the ball to reset instantly whenever it collides with the left or right side unless it's striking an area blocked by the paddle.

Ball Reset and Collision
11:47

Here you'll program the right paddle to move and play automatically by implementing a basic form of artificial intelligence. You'll also add scoring to the game, giving your player a way to see how well he or she is performing against the computer opponent.

Paddle AI and Scoring
08:52
+
Polishing Details for a Better Experience
3 Lectures 28:20

There is a subtle but very important design detail in how the ball is supposed to behave when it collides with a paddle, which you'll implement in this step. Secondly, by the end of this lecture you'll have the game set up to end as soon as either player reaches a clearly defined goal score.

Ball Control & Winning
13:59

This is the final stretch! You'll let the player reset a completed round by clicking the mouse, and you'll add a decorative net to the center of the playfield.

In closing, I'll briefly explain how you can carry your momentum from today forward into continuing to learn and practice more about videogame development with this approach.

Mouse Click, Draw Net
09:01

In response to student demand I've created a completely new video course that covers the next few games from my textbook in the same way that I coach my private clients through the material.

The complete textbook PDF and its related source code is also included with the new course!

Bonus Lecture: Take This New Course Next to Keep Going (Includes Full Textbook!)
05:20
About the Instructor
Gamkedo Game Development Guide Chris DeLeon
4.7 Average rating
5,172 Reviews
51,422 Students
2 Courses
Independent Game Development Educator, 20 years making games

Hey! I live in an L.A. apartment with my fiancée Laura and our 3-year-old gray cat EDI. I've been making games for 20 years, including pro game design on console games for Electronic Arts, in casual web games at a Silicon Valley start-up, and indie mobile (including the #2 top ranked game in 2008). Before starting Gamkedo I taught game creation skills at Georgia Tech. On the side I organize IndieCade's workshops in L.A. and Paris, teach kids coding in Malibu, and do game developer outreach now with over 60 podcast episodes and 120 YouTube videos.