πŸ’‘ This page contain affiliate links. By making a purchase through them, we may earn a commission at no extra cost to you.
12 JavaScript Game Ideas with Source Code

12 JavaScript Game Ideas with Source Code

JavaScript game projects with tutorials and source code provided
Ferenc Almasi β€’ Last updated 2023 February 13 β€’ Read time 5 min read
12 JavaScript game ideas with source code included. Learn more about game development in JavaScript from beginner to more advanced concepts.
  • twitter
  • facebook
JavaScript

If you're into game development and you already have some basic JavaScript knowledge, then you're at the right place. This article collects some JavaScript game ideas with tutorials and source code included.

The following tutorials will help you learn more about building games in JavaScript, and give you some ideas on what project to take on next. Let's start with the simpler, easier games to make, the ones that can be created entirely with vanilla JavaScript, then we'll move on to more advanced stuff.


Vanilla JavaScript Game Ideas

The following game ideas can all be recreated using only vanilla JavaScript, but later on, we'll also look at more complex ideas for which we can use a game framework. We'll leave a link to the tutorial for every game idea, and you'll also find links to the GitHub projects there.

Create a Hangman

Building a hangman is a fun project to take on, and we can learn a lot along the way. Working with game logic, randomization, and switching between game assets. This tutorial is available on Webtips as part of a preview lesson from our JavaScript course.

How to Build Hangman in JavaScript From Scratch

πŸ“š You'll learn:

  • check Working in Node
  • check CJS vs ESM format
  • check Regular expressions
  • check Game logic flow
  • check Using Inquirer
  • check Handling terminal input and output

Create a Memory Game

One of our recent tutorials covers how to create a memory game to improve your memory and your JavaScript skills. You'll learn about how to flip cards, and how to interact with them. We'll also see how to work with timers and game states.

How to Create a Memory Game in JavaScript

πŸ“š You'll learn:

  • check Working with DOM
  • check Event listeners
  • check CSS animations and transforms
  • check Shuffling algorithms and randomization
  • check setTimeout and setInterval
  • check Handling game states

Create a Tic-Tac-Toe Game

Next, we have the classic tic-tac-toe game. In this tutorial, you can learn more about grids, event listeners, and working with a game state. Here you'll see how to create turn-based games. The entire logic for the game will fit into less than 100 lines of code.

How to Recreate Tic-Tac-Toe in Vanilla JavaScript

πŸ“š You'll learn:

  • check DOM manipulation
  • check Array methods
  • check CSS Grid
  • check Pseudo-selectors and elements
  • check State handling
  • check Restart functionality

Create a Snake Game from Checkboxes

Want to look into creating a snake game? This is made entirely with checkboxes and a radio button. In this project, you'll learn a lot about working with arrays and manipulating DOM elements. We'll also look into how to create a scoring system.

How I Made A Snake Game Out Of Checkboxes

πŸ“š You'll learn:

  • check World generation
  • check Keyboard input
  • check Character movement
  • check Working with configurations
  • check Randomization
  • check Scoring system
  • check CSS animations
  • check Game over state

Create Particle Effects

Want to create particle effects for a game? For this, you can use the canvas element. This tutorial is not a game on its own, but it teaches you a fundamental part of game development, how to create particle effects. This project will tackle this from the point of fireworks.

Learn How to Make Colorful Fireworks in JavaScript

πŸ“š You'll learn:

  • check Working with canvas
  • check Particle effects
  • check Canvas mouse actions
  • check Canvas gradients
  • check JavaScript animations
  • check Calculating distance in JavaScript

Create a Rock, Paper, Scissors Game

The following game ideas can be found on Youtube, as we have yet to create tutorials for these games on Webtips. The first one is rock, paper scissors, created by WebDevSimplied that you can play against your computer.

How To Code Rock Paper Scissors In JavaScript

πŸ“š You'll learn:

  • check How to simplify complex game logic
  • check CSS Grid and Flexbox
  • check Randomization

Create a Quiz Game

Also created by the same channel, is a quiz game that teaches you what steps you need to take when building out JavaScript games, or any other project for that matter. It teaches you how to create a quiz game that you can later easily extend and customize.

Build A Quiz App With JavaScript

πŸ“š You'll learn:

  • check Dynamic display
  • check Working with child elements
  • check Array randomization
  • check CSS variables

Create a Minesweeper

Looking for an even more complex game idea? Minesweeper it's then. Created by The Coding Train who is all about coding challenges, in this tutorial, you'll learn how to work with cells, loops, arrays, shapes, and there will be some math involved too.

Vanilla JavaScript Hangman Game Tutorial

πŸ“š You'll learn:

  • check Working with grids
  • check Nested loops
  • check Detecting neighboring cells
  • check Flood fill algorithm

Create a Word Scramble

For the last vanilla JavaScript game idea, you can only find the source code on Codepen. This project takes on the challenge to create a word scramble game. Work with multiple difficulty levels, randomization, and event listeners for interaction.

Scrambled Word Game

πŸ“š You'll learn:

  • check Leveling system
  • check Reset functionality
  • check DOM manipulation
  • check Working with random values

Phaser Game Ideas

Now let's move to more advanced concepts. For the following 3 game ideas, we're going to use Phaser, a JavaScript Game Framework to rebuild classic games, such as Atari's Breakout or Mario.

Remake Mario

Mario, first created in 1985 is now a classic platformer game. In this tutorial, you'll learn about working with tiles: generating a world with tilemap, loading it into the game, and working with tilemap objects. You'll also learn about animating sprites, camera movement, and particle effects. This tutorial is broken down into three parts.

How to Remake Mario in PhaserJS

πŸ“š You'll learn:

  • check Phaser 3 basics
  • check Working with tilemaps and sprites
  • check Camera movement
  • check Character movement
  • check Game objects
  • check Interactibles

Remake Chrome's Dino Game

Chrome's Dino comes online when you go offline. Just like Mario, this tutorial is also broken down into three parts due to its complexity. A lot of concepts are covered in this series starting from building out a game UI and generating game objects, all the way to handling game logic with timers.

How to Remake Chrome's Dino Game in PhaserJS

πŸ“š You'll learn:

  • check Creating game UI
  • check Side scroll behavior
  • check Working with Timers
  • check Collision detection
  • check Dynamically spawning game objects
  • check High score system

Create Atari's Breakout

Last but not least, in this tutorial, you'll learn how you can recreate the famous Atari Breakout game, again with the help of Phaser. We'll look at configuring the game, preloading assets, creating the world with physics, displaying texts, adding collision detection, and much more.

Building The Game Breakout Using JavaScript

πŸ“š You'll learn:

  • check Working in Phaser
  • check Loading game assets
  • check Groups and colliders
  • check Working with game text
Looking to improve your skills? Check out our interactive course to master JavaScript from start to finish.
Master JavaScriptinfo Remove ads

Summary

Hope you found the right game idea for your next project. If you're looking for more JavaScript project ideas β€” not necessarily just game ideas β€” check out our 100 JavaScript project ideas with takeaways and resources such as designs and tutorials, so can only focus on coding. Thank you for reading through, happy coding! πŸ‘¨β€πŸ’»

100 JavaScript Project Ideas
  • twitter
  • facebook
JavaScript
Did you find this page helpful?
πŸ“š More Webtips
Mentoring

Rocket Launch Your Career

Speed up your learning progress with our mentorship program. Join as a mentee to unlock the full potential of Webtips and get a personalized learning experience by experts to master the following frontend technologies:

Courses

Recommended

This site uses cookies We use cookies to understand visitors and create a better experience for you. By clicking on "Accept", you accept its use. To find out more, please see our privacy policy.