Code Your First Arcade Game | JavaScript on Canvas

Chris DeLeon

Learn to create your first arcade-style game in JavaScript on Canvas, including game mechanics, collision detection, and AI.

Video CoursesJavaScript

Introduction

Code Your First Game: Arcade Classic in JavaScript on Canvas by Chris DeLeon

Highlights

  • 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

Recommendation

The instructor explains things quickly but clearly and with enough information for you to understand. Despite some video smoothness and syncing issues, it is not a huge problem and he is a very energetic teacher and his videos feel very engaging.

How GetVM Works

Learn by Doing from Your Browser Sidebar

Access from Browser Sidebar

Access from Browser Sidebar

Simply install the browser extension and click to launch GetVM directly from your sidebar.

Select Your Playground

Select Your Playground

Choose your OS, IDE, or app from our playground library and launch it instantly.

Learn and Practice Side-by-Side

Learn and Practice Side-by-Side

Practice within the VM while following tutorials or videos side-by-side. Save your work with Pro for easy continuity.

Explore Similar Hands-on Tutorials

Hands-On Data Visualization

9
Technical TutorialsData ScienceJavaScript
Comprehensive guide to data visualization techniques and best practices. Learn to design interactive charts and customized maps for your website using free and easy-to-learn tools.

Comprehensive Guide to Learning GraphQL | API Development

12
Technical TutorialsJavaScript
Learn GraphQL, a powerful query language for APIs, from a reliable and community-driven source. Covers essential concepts and practical examples to build efficient, flexible, and scalable APIs.

HTML5 Canvas Notes for Professionals

22
Technical TutorialsHTMLJavaScript
Comprehensive guide covering HTML5 Canvas topics including text, polygons, images, paths, animation, and more. Compiled from Stack Overflow Documentation.

HTML5 Shoot em Up in an Afternoon

29
Technical TutorialsHTMLJavaScript
Create a complete shoot 'em up game in a single afternoon using HTML5 and JavaScript. Learn essential game development topics like sprites, game loop, player actions, and object groups.

Building Front-End Web Apps with Plain JavaScript

12
Technical TutorialsJavaScriptObject-Oriented Programming
Learn how to build front-end web applications with plain JavaScript, without using any frameworks or libraries. Covers fundamental object-oriented programming concepts.

Clean Code JavaScript | Software Engineering Principles

11
Technical TutorialsJavaScript
Comprehensive guide to writing readable, reusable, and refactorable JavaScript code. Covers best practices for variables, functions, objects, classes, testing, and more.

Designing Scalable JavaScript Applications

29
Technical TutorialsJavaScriptWeb Development
Comprehensive guide to building high-performance, scalable web applications using JavaScript. Covers architecture, performance optimization, and best practices.

Exploring ES6 | JavaScript ES6 Guide

19
Technical TutorialsJavaScript
Comprehensive guide to the latest ES6 language features and their applications in JavaScript programming. Suitable for beginners and experienced developers.

Functional-Light JavaScript

26
Technical TutorialsFunctional ProgrammingJavaScript
Dive into the principles of functional programming and how to apply them in JavaScript development with Functional-Light JavaScript, a comprehensive guide by Kyle Simpson.