martin-pitt / awesome-frontend-games Goto Github PK

This is a special one to make note of, as the tech around it and approach:

https://proxx.app
https://github.com/GoogleChromeLabs/proxx

https://twitter.com/DasSurma/status/1127872805134045184

We built a modern Minesweeper! 🕹
👉 http://proxx.app

➡️Works on low-end feature phones
➡️Playable with keyboard and screen readers
➡️Loads fast even on slow 3G
➡️PWA, offline, all the standard shenanigans
➡️Still like OG Minesweeper

Created by @surma, @jakearchibald, @kosamari & @PaulKinlan

The famous 2048 game is actually a frontend game:

https://github.com/gabrielecirulli/2048

Games that test and improve your skills in design:

• Can't Unsee, a game where your attention to details earns you a lot of coins
• The Boolean Game, play with vector boolean operations
• The Bézier Game, a game to help you master the pen tool
• Color, a color matching game
• Shape Type, the letter shaping game
• Kern Type, the kerning game

I know that Game Dev Tycoon had steam integration with their NW.js, but just learned that they generalised it so that it can be used with Electron as well!
https://github.com/greenheartgames/greenworks

Wayward is a challenging turn-based, top-down, wilderness survival roguelike.

Built with HTML, CSS, TypeScript, WebGL, WebRTC, WebAssembly and Electron.

Originally created as a free game available online. http://www.unlok.ca/wayward/
With an iterative game design and community-feedback driven.
It is now greatly improved, wrapped in Electron and available for purchase on Steam, Humble, Fanatical, and IndieGala. Steam integration via https://github.com/greenheartgames/greenworks

Features multiplayer with up to 32 players. Works via WebRTC with a WebSocket fallback. Notably you can run the electron app in a dedicated server mode via commandline arguments, which is neat and shows how flexible Electron is, given that it has a Node.js core.

It also has an open approach to modding. Although mods are distributed/shared via the Steam Workshop unfortunately, which has known issues with discoverability, accessibility and usability compared to dedicated modding portals, tooling and integration. Mods can be written in TypeScript or JavaScript. There are a few mod examples as well as other interesting tools opensource at: https://github.com/waywardgame

Developers at Unlok are @Spacetech, @vaughnroyko, @Yuudaari & @Sassafrass. (Full credits at: http://www.unlok.ca/credits-thanks/)

@MariuszDabrowski (https://codepen.io/MarioD/) known for making awesome codepens like Hot and Sticky [Process].

• Fishing Game  [Source / GitHub?]  [Tweet / GIF]
  • Fishing game, inspired by the one-dimensional game mechanic from Stardew Valley
  • Composed with HTML, made of SVG, Canvas, CSS & JS

@end3r, or Andrzej Mazur, has long been working on game dev on the web, and still is a big proponent for it.

With the js13kgames competition he fuels a creative challenge to others to showcase and inspire.

Broadcasting news via Gamedev.js Weekly.

Being founder of the studio Enclave Games he has a number of titles under his belt.

I forgot to mention this before, but the OUIGO Let's Play game had an awesome technical case study on how it was created: https://medium.com/@MerciMichel/ouigo-lets-play-case-study-b763f69dd89c

Yaser Saqib is building online WebGL based games using PlayCanvas/BabylonJS at SuperBlack Software:

http://www.superblacksoftware.net/

Web tech is also emerging often in tools, especially custom built tools for specific tasks.

For example, while the game Celeste was made in C# and XNA, using Visual Studio, they levels were actually designed in a level editor created in HTML5 and Electron.

Created by Tobias Springer (github: @tobspr)

• shapez.io (GitHub, Trello)

  • Factory automation game inspired by Factorio
  • Coded in JavaScript, HTML and uses Sass
  • Can build to Electron as a desktop app
  • Custom game engine built upon by previous games
  • Available online, Steam

• Yorg.io 3

• Yorg.io

Iron Helmet have confirmed that their game is built in Electron, although they did not use the Steamworks SDK:
http://store.steampowered.com/app/494220/Blight_of_the_Immortals/

At this intersection of game design and web development, there are a lot of interesting websites that blur the line between a casual game and a website document.

This is a list of experimental WebGL websites that are kind of fascinating:
https://www.awwwards.com/30-experimental-webgl-websites.html

Text based adventure with story and decision making:
http://philome.la/johnayliff/seedship/play

HTML, CSS, JavaScript, SugarCube (Twine)

Bitburner is a programming-based incremental game that revolves around hacking and cyberpunk themes. You can write scripts in JS to help automate gameplay, learn skills, play minigames, solve puzzles and more.

The game can be played at https://danielyxie.github.io/bitburner and is also available on Steam.

Built with HTML, CSS, TypeScript, React, WebPack and Electron. Steam integration via https://github.com/greenheartgames/greenworks

Notably an open source project and has a community, with original developer as @danielyxie and now maintained by @hydroflame, additionally there's also quite a fair amount of community contributions.

Would be great to have resources, tutorials, guides, etc.

• CodeCombat
• CodinGame
• MDN has a Game Development center

Maybe compile a list of general gamedev resources as well? Or rewrite articles/tutorials from a frontend perspective?

This game might be written up in Electron, need to get confirmation of this:
http://store.steampowered.com/app/291410/Duelyst/

A remake of a classic city building game:
https://github.com/rage8885/OpenSC2K

Uses JavaScript, Canvas, SQlite & Electron.

You don't always need to implement a whole game in frontend, sometimes it makes sense to take the best of both worlds.

In fact, quite a lot of games actually delegate their user interface to a transparent layer of chromium, blink, gecko or webkit in their game.

• Riot games team used the Chromium Embedded Framework and written a great overview with some clever tricks (Check the comments for their responses to questions which reveal further detail.)
• I know that Red 5 Studios had used CEF in their MMO game FireFall for UI overlays
• The Guild Wars 2 UI was YUI3 running with Awesomium (webkit)

Maybe look into specific game-related libraries? E.g. controllers, pathfinding

• https://github.com/MozillaReality/gamepad-plus
• https://github.com/MozillaReality/nipplejs
• https://github.com/MozillaReality/gltf-navmesh-generator
  …?

Distributing games onto other platforms like consoles is definitely important for reaching out and providing choice to people.

While I personally greatly prefer gaming on PC, part of that is that is also accepting that every PC setup is different, and consoles are kinda like simplified PCs, not my style but hey.

I've done some research on consoles:

XBox One support however does look really good and someone shared their experiences here: http://www.html5gamedevs.com/topic/29953-xbox-one-html5-game-dev/

Nintendo Web Framework allows you to port games to the Wii U. I've not been able to confirm any support currently or coming to Switch yet. Switch doesn't even have a web browser. Wii U also does not support WebGL and performance is reported to be unplayable for realtime games.

Alternatively, you can look into companies that will help port over a game for you such as Play Every Ware, they have noteably ported over Elliot Quest from ImpactJS.

Created by @Adam13531 (Twitch):

• BotLand (Wiki, FAQ, Blog)

  • Strategy game with a focus on automation
  • Design bots by picking hardware, program the AI visually and then battle a squad of bots against another player
  • Coded in ES6, includes clients, servers and automated tests
  • NodeJS (Express, Babel), Redux/React, PixiJS, Esprima, Blockly, MySQL w/ Knex.js
  • Available online, Steam, iOS, Android

• OpHog (Source)

  • Resembles Tower Defense
  • HTML5/JS

@jackrugile made some awesome polished frontend games:

• Lost Without You   [Source]
  • Turn-Based Action Puzzler
  • Help two friends find each other, alternating between to navigate through a labyrinth in the dark
  • Built with Three.js
• Mono Move   [Source]
  • Single Control Gravity Switching
  • Play to the end with as few deaths as possible in this single control, gravity switching, rage inducing, death tallying obstacle course
  • Built with 2D canvas
• Radius Raid   [Source]
  • Space Shoot 'Em Up
  • Blast away unrelenting enemies before they destroy you. Features 13 enemy types, 5 powerups, parallax backgrounds, retro sound effects, and locally stored stats
  • Received 1st place in js13kGames 2013, standing at 13kb
  • Built with 2D Canvas

He also created an awesome talk/presentation:

• Start Making Games   [Source] [Presentation]
  • An Intro to Game Dev for the Web Dev

Created by Caleb Miller:

• Menja   [Source]
  • Game where you slice cubes to smash them
  • HTML & CSS for UI, uses 2D Canvas to render game world (no WebGL!)
• Supernova
  • Bullet hell shooter
  • HTML & CSS for UI, uses 2D Canvas for game

This is a HTML5 engine and editor. Would be good to check out games made with this. One modern one that looks great is Pepper Grinder by Ahr Ech / Riv Hester.

This doesn't have any gameplay but deserves a special/notable mention because of the interesting workflow.

https://twitter.com/glecollinet/status/935181463967985664

The author used Unity as an editor and exported the scene.

They did not use the WebGL Export from Unity; Instead building an engine using Three.js, which they had edited within Unity and exported using a custom script.

https://twitter.com/glecollinet/status/935460330871971841

We use Unity as our scene editor and exporter. City blocks are pre-assembled in Unity then exported to Three.js via a custom script. Rendering and logic happen on the JS/WebGL side.
What we like in Unity: lightmap baking, the ability to use any third-party asset from the store, FBX import, integration w/ other tools (e.g. Substance Painter, Houdini...).

This is a clever approach, using strings/ascii-art to design a level editor.

https://twitter.com/DasSurma/status/1133855703184154625

I think I've seen this approach many times over with text files and the like, especially from the old-school days, but first time seeing it simplified down with modern allowances of JavaScript.

Thanks @surma for sharing

Vampire Survivors is a roguelite survival bullet hell game. Pretty much surviving as long as you can in an open arena where an onslaught of monsters attack you in waves.

The latest updated game is available on Steam whilst an older version serves as a demo on Itch.io. There's also a discord community.

The game is built with Phaser as the engine and is wrapped in Electron via CapacitorJS as the build system. Steam integration per Greenworks.

Developed by @Poncle.

Doublespeak games are making awesome little frontend games, along the same lines as paperclips universe:

• A Dark Room
• Gridland

Itch.io has a HTML5 category and Web as platform.

Might be worth looking into entries, particularly games that are paid:

• https://itch.io/games/html5/
• https://itch.io/games/html5/platform-web/
• https://itch.io/games/html5/platform-web/store

I love this little tiny game, it has fun music and feels super polished:

• ueno interview
  • HTML, CSS, JS, WebGL, React

The use of react components is really well done.
Recommend inspecting it in React DevTools to see how it was put together.

It might be useful to write a presentation/article on frontend games. What they are, etc.

An old presentation I found from a game development perspective was this:
https://www.matthewgatland.com/javascriptisgoodnow/

However, now with Cordova, Electron & Web all being viable now.
HTML, mostly CSS and especially JS look very different nowadays as well.

https://www.miumiu.com/miumiu-twist/

Would be great to link to opensource games in particular as well, even if they wouldn't typically pass my curation standard. Beneficial for people learning up on gamedev.

https://github.com/Calinou/awesome-gamedev#ecmascript

A highly addictive cookie clicker type game:
http://www.decisionproblem.com/paperclips/index2.html

Love the different stages and challenges. Once you get really into it even has music that just pulls you in deeply into a trance.

Fellow londoner @chrismaltby (https://www.chrismaltby.com/) has been making some awesome retro game dev tools and packages:

• GB Studio  [Source]
  • Visual retro adventure game creator
  • Electron app that is the game editor and has the c-based GDKB.js game engine (via emscripten)
• Untitled GB Game  [Source]
  • Retro walking simulator inspired by Zelda Link's Awakening
  • A solo games jam entry created in one week for Bored Pixels Jam 3. It tells the story of a lone game developer struggling to come up with the perfect idea for a games jam.
  • Created with GB Studio