The great thing about HTML5 games is that they run on all modern browsers. You can play these games on modern browsers such as Chrome and Firefox on desktop as well as on devices such as iPhone and Android (via Cordova). Having a look at Open Source HTML5 games is a good way to explore different possibilities and learn how to develop one of your own.
In this post we are listing Open Source HTML5 games which are inspired from other popular game-titles and app store hits such as Tetris, Pacman, Asteroids and even Flappy Bird. All these games are built with HTML5 and JavaScript. You can find a link to play these games online along with the source code. We have included a few multi-player HTML5 games too at the end. Have fun as well as get inspired!
1. 2048 Game
The game that became a craze on almost all platforms, 2048 is open source and available on Github under MIT license. The game is developed by Gabriele Cirulli and is actually a clone of other similar type games. But that didn’t stop it from becoming a success on app stores and many developers finding it easier to clone and publish it in various forms. The game-play is quite simple where you have to slide tiles of different numbers forming a bigger number until you reach the number 2048. A Vue.js version of this game is also available at GitHub.
PLAY 2048 GAME 2048 GAME SOURCE CODE
2. Clumsy Bird
Remember Flappy Bird? The game that took the app stores by storm and made everyone wonder how can such a simple yet hard to play game be so addictive? Well, now you can find the source code of its clone made in HTML5, using MelonJS and is named Clumsy Bird. This game is developed by Ellison Leão and he has made an easy customizing guide also available for his game, in case you get inspired to clone this clone.
PLAY CLUMSY BIRD CLUMSY BIRD SOURCE CODE
3. Hextris
Hextris is a fast paced puzzle game developed by Garrett Finucane and Logan Engstrom. As the name suggests, this game is like playing Tetris on a Hexagonal plane. Apart from playing this game online, you can also find it in Android and iOS store. The source code of this game is licensed under GPL v3 license.
PLAY HEXTRIS HEXTRIS SOURCE CODE
4. Pacman in HTML5 Canvas
This an HTML5 clone of the original Pacman game. This game is developed by Chregi, a developer from Switzerland and the source code is licensed under a Creative Commons Attribution-ShareAlike 4.0 International License.
PLAY HTML5 PACKMAN HTML5 PACKMAN SOURCE CODE
5. Astray
Astray is a WebGL maze game built with Three.js (JavaScript 3D library) and Box2dWeb. Developed by Rye Terrell, this game is a nice demo of 3D capabilities in HTML5 games. The developer has not specified any license for the game and has allowed anyone to use it the way they like.
PLAY ASTRAY ASTRAY SOURCE CODE
6. Canvas Tetris
You can easily guess that Canvas Tetris is a clone of Tetris and implemented in HTML5 canvas. This game was developed by Dionysis Zindros in just 45 minutes. You can watch the making of this game on YouTube. This game’s source code is licensed under MIT license.
PLAY CANVAS TETRIS CANVAS TETRIS SOURCE CODE
7. Agent 8 ball
Agent 8 ball is a fun HTML5 pool game with bombs. Developed by Pixel Lab, Agent 8 ball is quite a polished game built with kbuild and licensed under MIT license.
PLAY AGENT 8 BALL AGENT 8 BALL SOURCE CODE
8. Tic Tac Toe
This is a web version of the popular tic-tac-toe game and has been built using Vue.js by Tim Rijkse. You can see the source code as well as play the game on CodePen, find the links below.
PLAY TIC TAC TOE TIC TAC TOE SOURCE CODE
9. 0hh1
This is a web based logic puzzle game built by Martin Kool. The game’s source code is licensed under MIT license and you can download and play the game on iOS, Android as well as on Windows and Windows Phone.
10. Javascript Pseudo 3D Racer
This is an Outrun-style pseudo-3d racing game built in HTML5 and JavaScript by Jake Gordon and licensed with MIT license. He has written a tutorial about how he built this racing game. You can also read his other tutorials on JavaScript Pong as well as JavaScript Snakes games to learn about game development with JavaScript.
PLAY JAVASCRIPT RACER JAVASCRIPT RACER CODE
Multi-Player Open Source HTML5 Games
The following games are online multi-player games built with HTML5 and JavaScript. A library like Soket.IO is generally used to create multiplayer games in browser. You can take a look at the source code of these games to see how they have implemented the multiplayer capabilities.
1. mk.js
mk.js is a simple Mortal Kombat clone created with HTML5 canvas and JavaScript by Minko Gechev. It allows 2 players on single computer as well as playing over the network (requires installing a server).
2. Shootr
Shootr is a multiplayer spaceship game developed by N. Taylor Mullen. It is built using SignalR and EndGate
PLAY SHOOTR SHOOTR SOURCE CODE
3. Browser Quest
BrowserQuest by Mozilla Foundation is a tribute to classic video-games with a multiplayer twist. It is a role playing multiplayer adventure game powered by HTML5 and Web Sockets.
PLAY BROWSER QUEST BROWSER QUEST SOURCE CODE
4. VueChess
This is a multiplayer online chess game built with Vue.js and Node.js. It also utilizes Socket.IO, Mongodb and Express for its server logic and multiplayer capabilities. The game is developed by Gustavo Crespo Sanchez. Unfortunately, we don’t have a URL for a live version of this game but you can follow the developer’s instruction to download the source code and run the game locally on your machine.
5. Freeciv Web
Freeciv is an Open Source turn based strategy game implemented in HTML5 and WebGL. This game can be played online against other players, or in single player mode against AI opponents. There is both an HTML5 2D version with isometric graphics and a 3D WebGL version of Freeciv-web. The game’s source code is licensed under GNU Affero General Public License v3.0.
PLAY FREECIV WEB FREECIV WEB SOURCE CODE
A word of caution before you start downloading source code of these Open Source HTML5 games:
Please always make sure to read the license associated with the Open Source Project. Just because the source code is open, doesn’t necessarily mean that you can freely use or distribute the code or derivatives of it as your own. Some licenses are open and allow any kind of use however not all are like that. Do let the author know in case you decide to use any of their work as a start for your next project.
Which one of these HTML5 games do you like the most? If you have done any HTML5 game development of your own then do link to them in comments. If not then, we recommend using an HTML5 game framework like Phaser or an HTML5 game development tool such as Construct 2 for you to start developing your own HTML5 games.
You can also develop games using game development tools such as Unity and GameMaker. Take a look at these Android game templates for some ready made games with source code, graphic assets and sounds that you can use to publish your own game.