Index

Found 72 pages:

# Page Tags and summary
1 Game development Apps, Game Development, Gamedev, Games, HTML5 Games, JavaScript Games, Web

Gaming is one of the most popular computer activities. New technologies are constantly arriving to make it possible to develop better and more powerful games that can be run in any standards-compliant web browser.

2 Anatomy of a video game Games, JavaScript, Main Loop, requestAnimationFrame

This article looks at the anatomy and workflow of the average video game from a technical point of view, in terms of how the main loop should run. It helps beginners to modern game development understand what is required when building a game and how web standards like JavaScript lend themselves as tools. Experienced game programmers who are new to web development could also benefit, too.

3 Examples Demos, Example, Games, Web
This page lists a number of impressive web technology demos for you to get inspiration from, and generally have fun with. A testament to what can be done with JavaScript, WebGL, and related technologies. The first two sections list playable games, while the second is a catch-all area to list demos that aren't necessarily interactive/games.
4 Introduction to HTML5 Game Development Firefox OS, Games, HTML5, Mobile
Games built with HTML5 work on smartphones, tablets, PCs and Smart TVs.
5 Introduction to game development for the Web Firefox OS, Games, Guide, Mobile
The modern web has quickly become a viable platform not only for creating stunning, high quality games, but also for distributing those games. 
6 Publishing games Games, HTML5, JavaScript, Monetization, Promotion, distribution, publishing
HTML5 games have a huge advantage over native in terms of publishing and distribution — you have the freedom of distribution, promotion and monetization of your game on the Web, rather than each version being locked into a single store controlled by one company. You can benefit from the web being truly multiplatform. This series of articles looks at the options you have when you want to publish and distribute your game, and earn something out of it while you wait for it to become famous.
7 Game distribution CocoonIO, Game, Game publishing, Games, Gaming, HTML5, JavaScript, Mobile Game Distribution, Phonegap, Web Stores, distribution
You've followed a tutorial or two and created an HTML5 game — that's great! This article covers all you need to know about the ways in which you can distribute your newly created game into the wild. This includes hosting it yourself online, submitting it to open marketplaces, and submitting it to closed ones like Google Play or the iOS App Store.
8 Game monetization Games, HTML5, JavaScript, Monetization, advertisements, branding, iap, licensing
When you've spent your time building a game, distributing it and promoting it you should consider earning some money out of it. If your work is a serious endeavour on the path to becoming an independent game developer able to make a living, read on and see what your options are. The technology is mature enough; now it's just about choosing the right approach.
9 Game promotion Community, Games, JavaScript, Online Games, Promotion, blog, competitions
Developing and publishing your game is not enough. You have to let the world know that you have something interesting available that people will enjoy playing. There are many ways to promote your game — most of them being free, so even if you're struggling to make a living as an indie dev with zero budget you can still do a lot to let people know about your great new game. Promoting the game helps a lot when monetizing it later on too, so it's important to do it correctly.
10 Techniques for game development Games, Guide

This page lists essential core techniques for anyone wanting to develop games using open web technologies.

11 2D collision detection 2D, Games, JavaScript, collision detection

Algorithms to detect collision in 2D games depend on the type of shapes that can collide (e.g. Rectangle to Rectangle, Rectangle to Circle, Circle to Circle). Generally you will have a simple generic shape that covers the entity known as a "hitbox" so even though collision may not be pixel perfect, it will look good enough and be performant across multiple entities. This article provides a review of the most common techniques used to provide collision detection in 2D games.

12 3D collision detection 3D, Games, JavaScript, bounding boxes, collision detection
This article provides an introduction to the different bounding volume techniques used to implement collision detection in 3D environments. Followup articles will cover implementations in specific 3D libraries.
13 Bounding volume collision detection with THREE.js 3D, Games, JavaScript, WebGL, bounding boxes, collision detection, three.js
This article shows how to implement collision detection between bounding boxes and spheres using the Three.js library. It is assumed that before reading this you have read our 3D collision detection introductory article first, and have basic knowledge about Three.js.
14 3D games on the Web Games, Graphics, NeedsContent, NeedsExample, WebGL, WebVR, three.js
For rich gaming experiences on the web, the weapon of choice is WebGL, which is rendered on HTML canvas. WebGL is basically an OpenGL ES 2.0 for the Web — it's a JavaScript API providing tools to build rich interactive animations and of course, also games. You can generate and render dynamic 3D graphics with JavaScript that is hardware accelerated.
15 Explaining basic 3D theory 3D, Coordinates, Textures, basics, fragment, lighting, primitives, rendering, theory, vertex, vertices
This article explains all of the basic theory that's useful to know when you are getting started working with 3D.
16 Building up a basic demo with A-Frame 3D, A-Frame, VR, Virtual Reality, Web, WebGL
The WebVR and WebGL APIs already enable us to start creating virtual reality (VR) experiences inside web browsers, but the community is still waiting for tools and libraries to appear, to make this easier. Mozilla's A-Frame framework provides a markup language allowing us to build 3D VR landscapes using a system familiar to web developers, which follows game development coding principles; this is useful for quickly and successfully building prototypes and demos, without having to write a lot of JavaScript or GLSL. This article explains how to get up and running with A-Frame, and how to use it to build up a simple demo.
17 Building up a basic demo with Babylon.js 3D game engines, Babylon.js, Beginner, WebGL
Babylon.js is one of the most popular 3D game engines used by developers. As with any other 3D library it provides built-in functions to help you implement common 3D functionality more quickly. In this article we'll take you through the real basics of using Babylon.js, including setting up a development environment, structuring the necessary HTML, and writing the JavaScript code.
18 Building up a basic demo with PlayCanvas 3D, Animation, Beginner, Canvas, Games, PlayCanvas, Tutorial, WebGL, camera, lighting, rendering
PlayCanvas is a popular 3D WebGL game engine, originally created by Will Eastcott and Dave Evans. It is open sourced on GitHub, with an editor available online and good documentation. The online editor is free for public projects with up to two team members, but there are also paid plans if you'd like to run a commercial private project with more developers.
19 Building up a basic demo with PlayCanvas editor 3D, Animation, Beginner, Canvas, Games, Lightning, Online, PlayCanvas, Tutorial, WebGL, camera, editor, rendering
Instead of coding everything from scratch you can also use the online PlayCanvas editor. This can be a more pleasant working environment if you are not someone who likes to code.
20 Building up a basic demo with the PlayCanvas engine 3D, Animation, Beginner, Canvas, Games, PlayCanvas, Tutorial, WebGL, camera, engine, lighting, rendering
Built for modern browsers, PlayCanvas is a fully-featured 3D game engine with resource loading, an entity and component system, advanced graphics manipulation, collision and physics engine (built with ammo.js), audio, and facilities to handle control inputs from various devices (including gamepads).
21 Building up a basic demo with Three.js 3D, Animation, Beginner, Canvas, Games, Tutorial, WebGL, camera, lighting, rendering, three.js
A typical 3D scene in a game — even the simplest one — contains standard items like shapes located in a coordinate system, a camera to actually see them, lights and materials to make it look better, animations to make it look alive, etc. Three.js, as with any other 3D library, provides built-in helper functions to help you implement common 3D functionality more quickly. In this article we'll take you through the real basics of using Three, including setting up a development environment, structuring the necessary HTML, the fundamental objects of Three, and how to build up a basic demo.
22 GLSL Shaders Beginner, GLSL, OpenGL, Shader, texture shader, three.js, vertex shader
Shaders use GLSL (OpenGL Shading Language), a special OpenGL Shading Language with syntax similar to C. GLSL is executed directly by the graphics pipeline. There are several different kinds of shaders, but two are commonly used to create graphics on the web: Vertex Shaders and Fragment (Pixel) Shaders. Vertex Shaders transform shape positions into 3D drawing coordinates. Fragment Shaders compute the renderings of a shape's colors and other attributes.
23 WebVR — Virtual Reality for the Web 3D, Games, WebGL, WebVR
The concept of virtual reality in itself isn't new, but now we have the technology to have it working as it should be, and a JavaScript API to make use of it in web applications. This article introduced WebVR from the perspective of its use in games.
24 Async scripts for asm.js Games, JavaScript, asm.js, async

Every medium or large game should compile asm.js code as part of an async script to give the browser the maximum flexibility to optimize the compilation process. In Gecko, async compilation allows the JavaScript engine to compile the asm.js off the main thread when the game is loading and cache the generated machine code so that the game doesn't need to be compiled on subsequent loads (starting in Firefox 28). To see the difference, toggle javascript.options.parallel_parsing in about:config.

25 Audio for Web games Audio, Games, Web Audio API, audio sprites, spatialization, syncing tracks
Audio is an important part of any game; it adds feedback and atmosphere. Web-based audio is maturing fast, but there are still many browser differences to navigate. We often need to decide which audio parts are essential to our games' experience and which are nice to have but not essential, and devise a strategy accordingly. This article provides a detailed guide to implementing audio for web games, looking at what works currently across as wide a range of platforms as possible.
26 Implementing game control mechanisms Controls, Desktop, Gamepad, Games, JavaScript, Laptop, Mobile, keyboard, mouse, touch
One of HTML5's main advantages as a game development platform is the ability to run on various platforms and devices. Streamlining cross device differences creates multiple challenges, not least when providing appropriate controls for different contexts. In this series of articles we will show you how you can approach building a game that can be played using touchscreen smartphones, mouse and keyboard, and also less common mechanisms such as gamepads.
27 Desktop gamepad controls Controls, Desktop, Gamepad API, Gamepads, Games, JavaScript, controllers
Now we'll look at adding something extra — support for gamepad controls, via the Gamepad API. It brings a console-like experience to your web games.
28 Desktop mouse and keyboard controls Controls, Desktop, Games, JavaScript, keyboard, mouse
Now, when we have our mobile controls in place and the game is playable on touch-enabled devices, it would be good to add mouse and keyboard support so the game can be playable on desktop also. That way we can broaden the list of supported platforms. We'll look at this below.
29 Mobile touch controls Controls, Games, JavaScript, Mobile, pointer, touch
The future of mobile gaming is definitely web, and many developers choose the mobile first approach in their game development process — in the modern world, this generally also involves implementing touch controls. In this tutorial, we will see how easy it is to implement mobile controls in an HTML5 game, and enjoy playing on a mobile touch-enabled device.
30 Unconventional controls Controls, Doppler, Games, JavaScript, Makey Makey, TV Leap Motion, Voice
Having different control mechanisms in your game helps reach broader audiences. Implementing mobile and desktop controls is recommended is a must, and gamepad controls add that extra experience. But imagine going even further — in this article we will explore various unconventional ways to control your web game, some more unconventional than others.
31 Implementing controls using the Gamepad API Controls, Gamepad API, Gamepads, Games, JavaScript, controllers
This article looks at implementing an effective, cross-browser control system for web games using the Gamepad API, allowing you to control your web games using console game controllers. It features a case study game — Hungry Fridge, created by Enclave Games.
32 Crisp pixel art look with image-rendering 2D, 3D, CSS, Canvas, Games, JavaScript, WebGL, image-rendering, pixel
This article discusses a useful technique for giving your canvas/WebGL games a crisp pixel art look, even on high definition monitors.
33 Efficient animation for web games Animation, Games, JavaScript
This article covers techniques and advice for creating efficient animation for web games, with a slant towards supporting lower end devices such as mobile phones. We touch on CSS transitions and CSS animations, and JavaScript loops involving window.requestAnimationFrame.
34 Tiles and tilemaps overview 2D, Canvas, Games, JavaScript, Static, WebGL, tilemap, tiles
Tilemaps are a very popular technique in 2D game development, consisting of building the game world or level map out of small, regular-shaped images called tiles. This results in performance and memory usage gains — big image files containing entire level maps are not needed, as they are constructed by small images or image fragments multiple times. This set of articles covers the basics of creating tile maps using JavaScript and Canvas (although the same high level techniques could be used in any programming language.)
35 Square tilemaps implementation: Scrolling maps Canvas, Games, JavaScript, atlas, scrolling, spritesheet, tilemap, tiles
This article covers how to implement scrolling square tilemaps using the Canvas API.
36 Square tilemaps implementation: Static maps Canvas, Games, JavaScript, Static, atlas, spritesheet, tilemap, tilemaps, tiles
This article covers how to implement static square tilemaps using the Canvas API.
37 WebRTC data channels API, Games, NeedsContent, Network, P2P, WebRTC, data channels
The WebRTC (Web Real-Time Communications) API is primarily known for its support for audio and video communications; however, it also offers peer-to-peer data channels. This article explains more about this, and shows you how to use libraries to implement data channels in your game.
38 Tools for game development Games, Gecko, Guide, JavaScript

On this page you can find links to our game development tools articles, which eventually aims to cover frameworks, compilers, and debugging tools.

39 asm.js Deprecated, JavaScript, asm.js

Asm.js is a specification defining a subset of JavaScript that is highly optimizable. This article looks at exactly what is permitted in the asm.js subset, what improvements it confers, where and how you can make use of it, and further resources and examples.

40 Tutorials Canvas, Games, JavaScript, Web, Workflows
This page contains multiple tutorial series that highlight different workflows for effectively creating different types of web games.
41 2D breakout game using Phaser 2D, Beginner, Canvas, Games, JavaScript, Phaser, Tutorial
In this step-by-step tutorial, we create a simple mobile MDN Breakout game written in JavaScript, using the Phaser framework.
42 Animations and tweens 2D, Animation, Beginner, Canvas, Games, JavaScript, Phaser, Tutorial, tween

This is the 14th step out of 16 of the Gamedev Phaser tutorial. You can find the source code as it should look after completing this lesson at Gamedev-Phaser-Content-Kit/demos/lesson14.html.

43 Bounce off the walls 2D, Beginner, Canvas, Games, JavaScript, Phaser, Tutorial, bouncing

This is the 6th step out of 16 of the Gamedev Phaser tutorial. You can find the source code as it should look after completing this lesson at Gamedev-Phaser-Content-Kit/demos/lesson06.html.

44 Build the brick field 2D, Beginner, Canvas, Games, JavaScript, Phaser, Tutorial

This is the 9th step out of 16 of the Gamedev Phaser tutorial. You can find the source code as it should look after completing this lesson at Gamedev-Phaser-Content-Kit/demos/lesson09.html.

45 Buttons 2D, Beginner, Buttons, Canvas, Games, JavaScript, Phaser, Tutorial

This is the 15th step out of 16 of the Gamedev Phaser tutorial. You can find the source code as it should look after completing this lesson at Gamedev-Phaser-Content-Kit/demos/lesson15.html.

46 Collision detection 2D, Beginner, Canvas, Games, JavaScript, Phaser, Tutorial, collision detection

This is the 10th step out of 16 of the Gamedev Phaser tutorial. You can find the source code as it should look after completing this lesson at Gamedev-Phaser-Content-Kit/demos/lesson10.html.

47 Extra lives 2D, Beginner, Canvas, Games, JavaScript, Phaser, Tutorial, lives

This is the 13th step out of 16 of the Gamedev Phaser tutorial. You can find the source code as it should look after completing this lesson at Gamedev-Phaser-Content-Kit/demos/lesson13.html.

48 Game over 2D, Beginner, Canvas, Games, JavaScript, Phaser, Tutorial, game over

This is the 8th step out of 16 of the Gamedev Phaser tutorial. You can find the source code as it should look after completing this lesson at Gamedev-Phaser-Content-Kit/demos/lesson08.html.

49 Initialize the framework 2D, Beginner, Canvas, Games, HTML, JavaScript, Phaser, Tutorial

This is the first of 16 tutorials to learn how to use Gamedev Phaser. After completing this tutorial you can find the source code for this section at Gamedev-Phaser-Content-Kit/demos/lesson01.html.

50 Load the assets and print them on screen 2D, Beginner, Canvas, Games, JavaScript, Phaser, Sprites, Tutorial

This is the 3rd step out of 16 in the Gamedev Phaser tutorial. You can find the source code as it should look after completing this lesson at Gamedev-Phaser-Content-Kit/demos/lesson03.html.

51 Move the ball 2D, Beginner, Canvas, Games, JavaScript, Phaser, Tutorial, moving

This is the 4th step out of 16 of the Gamedev Phaser tutorial. You can find the source code as it should look after completing this lesson at Gamedev-Phaser-Content-Kit/demos/lesson04.html.

52 Physics 2D, Beginner, Canvas, Games, JavaScript, Phaser, Tutorial, physics

This is the 5th step out of 16 of the Gamedev Phaser tutorial. You can find the source code as it should look after completing this lesson at Gamedev-Phaser-Content-Kit/demos/lesson05.html.

53 Player paddle and controls 2D, Beginner, Canvas, Games, JavaScript, Phaser, Tutorial

This is the 7th step out of 16 of the Gamedev Phaser tutorial. You can find the source code as it should look after completing this lesson at Gamedev-Phaser-Content-Kit/demos/lesson07.html.

54 Randomizing gameplay 2D, Beginner, Canvas, Games, JavaScript, Phaser, Tutorial

This is the 16th step out of 16 of the Gamedev Phaser tutorial. You can find the source code as it should look after completing this lesson at Gamedev-Phaser-Content-Kit/demos/lesson16.html.

55 Scaling 2D, Beginner, Canvas, Games, JavaScript, Phaser, Tutorial

This is the 2nd step out of 16 of the Gamedev Phaser tutorial. You can find the source code as it should look after completing this lesson at Gamedev-Phaser-Content-Kit/demos/lesson02.html.

56 The score 2D, Beginner, Canvas, Games, JavaScript, Phaser, Tutorial, scoring

This is the 11th step out of 16 of the Gamedev Phaser tutorial. You can find the source code as it should look after completing this lesson at Gamedev-Phaser-Content-Kit/demos/lesson11.html.

57 Win the game 2D, Beginner, Canvas, Games, JavaScript, Phaser, Tutorial, winning

This is the 12th step out of 16 of the Gamedev Phaser tutorial. You can find the source code as it should look after completing this lesson at Gamedev-Phaser-Content-Kit/demos/lesson12.html.

58 2D breakout game using pure JavaScript 2D, Beginner, Canvas, Games, JavaScript, Tutorial
In this step-by-step tutorial we create a simple MDN Breakout game written entirely in pure JavaScript and rendered on HTML5 canvas.
59 Bounce off the walls Animation, Beginner, Canvas, Example, Games, Graphics, Tutorial, collision, detection

This is the 3rd step out of 10 of the Gamedev Canvas tutorial. You can find the source code as it should look after completing this lesson at Gamedev-Canvas-workshop/lesson3.html.

60 Build the brick field Beginner, Canvas, Games, Graphics, JavaScript, Tutorial

This is the 6th step out of 10 of the Gamedev Canvas tutorial. You can find the source code as it would look after completing this lesson at Gamedev-Canvas-workshop/lesson6.html.

61 Collision detection Beginner, Canvas, Games, JavaScript, Tutorial, collision, detection

This is the 7th step out of 10 of the Gamedev Canvas tutorial. You can find the source code as it should look after completing this lesson at Gamedev-Canvas-workshop/lesson7.html.

62 Create the Canvas and draw on it 2D, Beginner, Canvas, Games, HTML, JavaScript, Tutorial

This is the 1st step out of 10 of the Gamedev Canvas tutorial. You can find the source code as it should look after completing this lesson at Gamedev-Canvas-workshop/lesson1.html.

63 Finishing up Beginner, Canvas, Games, JavaScript, Tutorial, lives, requestAnimationFrame

This is the 10th and final step of the Gamedev Canvas tutorial. You can find the source code as it should look after completing this lesson at Gamedev-Canvas-workshop/lesson10.html.

64 Game over Beginner, Canvas, Games, Graphics, JavaScript, Tutorial, game over

This is the 5th step out of 10 of the Gamedev Canvas tutorial. You can find the source code as it should look after completing this lesson at Gamedev-Canvas-workshop/lesson5.html.

65 Mouse controls Beginner, Canvas, Controls, Games, JavaScript, Tutorial, mouse

This is the 9th step out of 10 of the Gamedev Canvas tutorial. You can find the source code as it should look after completing this lesson at Gamedev-Canvas-workshop/lesson9.html.

66 Move the ball 2D, Beginner, Canvas, Games, JavaScript, Loop, Tutorial, movement

This is the 2nd step out of 10 of the Gamedev Canvas tutorial. You can find the source code as it should look after completing this lesson at Gamedev-Canvas-workshop/lesson2.html.

67 Paddle and keyboard controls Beginner, Canvas, Controls, Games, Graphics, JavaScript, Tutorial, keyboard

This is the 4th step out of 10 of the Gamedev Canvas tutorial. You can find the source code as it should look after completing this lesson at Gamedev-Canvas-workshop/lesson4.html.

68 Track the score and win Beginner, Canvas, Games, JavaScript, Tutorial, scoring, winning

This is the 8th step out of 10 of the Gamedev Canvas tutorial. You can find the source code as it should look after completing this lesson at Gamedev-Canvas-workshop/lesson8.html.

69 2D maze game with device orientation Canvas, Device Orientation API, Game Development, HTML5, Phaser, Vibration API

In this tutorial we’ll go through the process of building an HTML5 mobile game that uses the Device Orientation and Vibration APIs to enhance the gameplay and is built using the Phaser framework. Basic JavaScript knowledge is recommended to get the most from this tutorial.

70 Touch Event Horizon NeedsContent, NeedsExample
This article is for Touch Event Horizon and A Game Related To It
71 Visual JS GE Canvas, JavaScript, Server, game engine
Visual-js GameEngine is a small but comprehensive canvas/websocket-based game engine with GUI source editor only for Windows. The server is based on Node.js vs MySql, the client made in four variant on a JavaScript frameworks for 2d canvas JS , three.js , webGL2 vs glmatrix and 2d canvas with matter.js in typescript to complete the stack.
72 Visual-js game engine HTML5, JavaScript, Tools, game engine, visual-js
creator: Nikola Lukic 2017