Games in javascript with source code

12 JavaScript Game Ideas with Source Code

If you are into game development and you already have some basic JavaScript knowledge, then you are 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 will move on to more advanced stuff.

Level up your skills and master the art of frontend development with bite-sized tutorials.

We don’t spam. Unsubscribe anytime.

Looking to improve your skills? Check out our interactive course to master JavaScript from start to finish.

Vanilla JavaScript Game Ideas#

The following game ideas can all be recreated using only vanilla JavaScript, but later on, we will also look at more complex ideas for which we can use a game framework. We will leave a link to the tutorial for every game idea, and you will 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 Use the learnings so far to build a hangman with the help of NodeJS Looking for a more challenging game idea? Learn how you can recreate the hangman game with vanilla JavaScript with the help of NodeJS — no frameworks needed. Learn More

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 will learn about how to flip cards, and how to interact with them. We will also see how to work with timers and game states.

How to Create a Memory Game in JavaScript Improve your memory, and your JavaScript In this tutorial, we will be looking into how you can recreate a memory game with flipping cards in vanially JavaScript. A GitHub link is also provided in the tutorial. Learn More

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 will 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 Building games in vanilla JavaScript Want to learn more about turn-based games? Learn how you can recreate the famous tic-tac-toe game in vanilla JavaScript in less than 100 lines of code. Learn More

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 will learn a lot about working with arrays and manipulating DOM elements. We will also look into how to create a scoring system.

How I Made A Snake Game Out Of Checkboxes Recreating the snake game in JavaScript Learn about DOM manipulation through the example of recreating the snake game in HTML and JavaScript, using only checkboxes. Learn More

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 How to work with canvas in JavaScript Learn how to create particle effects in vanilla JavaScript with the help of canvas. Learn More

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 By Web Dev Simplied Rock paper scissors is a classic game with a very simple rule set which makes it perfect for a beginner game project. In this video I will show you exactly how I would setup a rock paper scissors game with HTML, CSS, and JavaScript. Learn More

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 By Web Dev Simplified We will be using modern JavaScript best practices to create this application. We will also be using CSS variables to make changing our site on demand incredibly easy. By the end of this video you will have an entire quiz application built which can be easily extended and customized. Learn More

Create a Minesweeper#

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

Coding Challenge #71: Minesweeper By The Coding Train If you really want to get involved with more complex game logic, then you are looking for the minesweeper. Learn how you can recreate the game in JavaScript, and what logic lies behind the scenes. Learn More

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 By Alex Johnson Want to learn more about randomization and working with different difficulty levels? See how you can create a scrambled word game in vanilla JavaScript. Learn More

Phaser Game Ideas#

Now let’s move to more advanced concepts. For the following 3 game ideas, we are 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 will learn about working with tiles: generating a world with tilemap, loading it into the game, and working with tilemap objects. You will also learn about animating sprites, camera movement, and particle effects. This tutorial is broken down into three parts.

How to Remake Mario in PhaserJS Part I. of III. Learn how you can use a JavaScript game framework called PhaserJS to recreate the base gameplay mechanics of the famous Super Mario with only JavaScript. Learn More

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 Part I. of III. Learn how you can use a JavaScript game framework called PhaserJS to recreate the base gameplay mechanics of the Dinosaur game with only JavaScript. Learn More

Create Atari’s Breakout#

Last but not least, in this tutorial, you will learn how you can recreate the famous Atari Breakout game, again with the help of Phaser. We will 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 Creating your very first game in Phaser Want to build your very first game entirely in JavaScript? Learn how you can use the Phaser game framework to your advantage to build the famous Breakout. Learn More

Level up your skills and master the art of frontend development with bite-sized tutorials.

We don’t spam. Unsubscribe anytime.

Looking to improve your skills? Check out our interactive course to master JavaScript from start to finish.

Summary#

Hope you found the right game idea for your next project. If you are 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 From Junior to Senior Are you looking for your next JavaScript project to take on? Here are 100 JavaScript project ideas for you to choose from. Learn More

📚 More Webtips

Level up your skills and master the art of frontend development with bite-sized tutorials.

We don’t spam. Unsubscribe anytime.

• Unlimited access to hundreds of tutorials
• Access to exclusive interactive lessons
• Remove ads to learn without distractions

Recommended

JavaScript Regular Expression Cheat Sheet

The State of JavaScript in 2021

The State of CSS in 2021

Get access to 300+ webtips 💌

Level up your skills and master the art of frontend development with bite-sized tutorials.

We don’t spam. Unsubscribe anytime.

Источник