Index

Found 74 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, Loop, requestAnimationFrame
I want to be clear that any of the above, or none of them, could be best for your game. The correct decision entirely depends on the trade-offs that you are willing (and unwilling) to make. The concern is mostly with switching to another option. Fortunately, I do not have any experience with this but I have heard it is an excruciating game of Whack-a-Mole.
3 Examples Demos, Examples, 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 Index Meta
Found 74 pages:
5 Introduction to HTML5 Game Development (summary) Firefox OS, Games, HTML5, Mobile
Games built with HTML5 work on smartphones, tablets, PCs and Smart TVs.
6 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 more importantly for distributing those games.
7 Publishing games Games, HTML5, JavaScript, Monetization, Promotion, distribution, publishing
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.
8 Game distribution Games, HTML5, JavaScript, Tools, distribution
Distribution is the way to give the world access to your game. There are many options available and there's no single good answer as to which is the best. When you've published the game it's time to focus on promotion — letting people know your game exists. Without promotion they wouldn't even be able to learn about it and play it.
9 Game monetization Games, HTML5, JavaScript, Monetization, advertisements, branding, iap, licensing
There are many ways to earn money — everything that applies to the "normal" AAA gaming world can be, more or less, applied to casual HTML5 games. You might however also focus on selling licenses, doing branding, or earning on a revenue share basis from the advertisements. It's totally up to you which path you're going to follow.
10 Game promotion Community, Games, JavaScript, Promotion, blog, competitions, promotion, youtube
Any way of promoting your game is good. You have a whole lot of options to chose from with most of them being free, so it's only about your enthusiasm and available time. Sometimes you have to spend more time promoting a game than actually developing it. Remember that it's no use to have the best game in the world if no one knows it exists.
11 Techniques for game development Games, Guide
This page lists essential core techniques for anyone wanting to develop games using open web technologies.
12 2D collision detection 2D, Games, JavaScript, collision detection
One of the simpler forms of collision detection is between two rectangles that are axis aligned — meaning no rotation. The algorithm works by ensuring there is no gap between any of the 4 sides of the rectangles. Any gap means a collision does not exist.
13 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.
14 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.
15 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.
16 Building up a basic demo with A-Frame 3D, A-Frame, VR, Virtual Reality, Web, WebGL
Technical review completed.
17 Building up a basic demo with Babylon.js 3D game engines, Babylon.js, Beginner, WebGL, babylon.js, beginner
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, Camera, Canvas, Games, PlayCanvas, Tutorial, WebGL, camera, lighting, rendering
Of course it depends on your approach — designers may favor the online editor while programmers will prefer having the full control over the coding environment and will probably use the engine's source files. The good thing is that you have a choice and can pick whatever tools suits you best.
19 Building up a basic demo with PlayCanvas editor 3D, Animation, Beginner, Canvas, Games, Lightning, Online, PlayCanvas, Tutorial, WebGL, camera, editor, rendering
Now you can check the PlayCanvas engine article if you haven't seen it yet, go back to the Building up a basic demo with PlayCanvas page, or go back a level higher to the main 3D Games on the Web page.
20 Building up a basic demo with the PlayCanvas engine 3D, Animation, Beginner, Canvas, Games, PlayCanvas, Tutorial, WebGL, camera, engine, lighting, rendering
Now you can continue reading the PlayCanvas editor article, go back to the Building up a basic demo with PlayCanvas page, or go back a level higher to the main 3D Games on the Web page.
21 Building up a basic demo with Three.js 3D, Animation, Beginner, Camera, Canvas, Games, Tutorial, WebGL, beginner, camera, lighting, rendering, three.js
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 Building up a basic demo with Whitestorm.js 3D, Advanced, Animation, Beginner, Canvas, Games, Graphic, JavaScript, Tutori, WebGL, physics, three.js, whitestorm.js
Whitestorm.js is a framework built on the top of Three.js technology, enhanced by features such as a built-in Physics engine — a modified Physi.js that acts as a wrapper around Ammo.js (Bullet Physics ported to JavaScript) with usage of web-workers technology — and a  plugin system providing useful modularity. In this article we show how you can get started with Whitestorm.js.
23 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.
24 GLSL Shaders Beginner, GLSL, OpenGL, Shader, WebGL, beginner, texture shader, three.js, vertex shader
Shaders use GLSL, a special OpenGL shading language with syntax similar to C, which is executed directly by the graphics pipeline. There are two types — Vertex Shaders and Fragment Shaders (or Pixel Shaders) — the former transforms shape positions to real 3D drawing coordinates while the latter computes rendering colors and other attributes.
25 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.
26 Async scripts for asm.js Games, JavaScript, asm.js, async
Editorial review completed.
27 Audio for Web games Audio, Games, Web Audio API, audio sprites
By far the most difficult platforms to provide web audio support for are mobile platforms. Unfortunately these are also the platforms that people often use to play games. There are a couple of differences between desktop and mobile browsers that may have caused browser vendors to make choices that can make web audio difficult for game developers to work with. Let's look at these now.
28 Crisp pixel art look with image-rendering 2D, 3D, CSS, Canvas, Games, JavaScript, WebGL, canvas, 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.
29 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.
30 Implementing controls using the Gamepad API Controls, Gamepad API, Gamepads, Games, JavaScript, controllers
The Gamepad API is very easy to develop with. Now it's easier than ever to deliver console-like experience to the browser without the need of any plugins. You can play the full version of the Hungry Fridge game directly in your browser, install it from the Firefox Marketplace or check the source code of the demo along with all the other resources on the Gamepad API Content Kit.
31 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.
32 Desktop gamepad controls Controls, Desktop, Gamepad API, Gamepads, Games, JavaScript, controllers
That's it! We have successfully implemented gamepad controls in our game — try connecting any popular controller like the XBox 360 one and see for yourself how fun it is to avoid the asteroids and shoot the aliens with a gamepad.
33 Desktop mouse and keyboard controls Controls, Desktop, Games, JavaScript, keyboard, mouse
Ok, we've dealt with touch, keyboard and mouse controls. Now let's move on to look at how to set up the game to  be controlled using a console gamepad, using the Gamepad API.
34 Mobile touch controls Controls, Games, JavaScript, Mobile, pointer, touch
That covers adding touch controls for mobile; in the next article we'll see how to add keyboard and mouse support.
35 Unconventional controls Controls, Doppler, Games, JavaScript, Makey Makey, Proximity, TV Leap Motion, Voice
I hope you liked the experiments — if you have any others that you think might interest other people, feel free to add details of them here.
36 Tiles and tilemaps overview 2D, Canvas, Games, JavaScript, Static, WebGL, canvas, 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.)
37 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.
38 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.
39 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.
40 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.
41 Game engines and tools Apps, Engines, Games, HTML5, JavaScript, Tools
The following are game engines implemented with HTML5 and JavaScript:
42 asm.js 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.
43 Tutorials Canvas, Games, JavaScript, Web, Workflows, canvas
This page contains multiple tutorial series that highlight different workflows for effectively creating different types of web games.
44 2D breakout game using Phaser 2D, Beginner, Canvas, Games, JavaScript, Phaser, Tutorial, beginner, canvas
In this step-by-step tutorial we create a simple mobile MDN Breakout game written in JavaScript, using the Phaser framework.
45 Animations and tweens 2D, Animation, Beginner, Canvas, Games, JavaScript, Javascript, Phaser, Tutorial, animation, beginner, canvas, javascript, tween
To make the game look more juicy and alive we can use animations and tweens. This will result in a better, more entertaining experience. Let's explore how to implement Phaser animations and tweens in our game.
46 Bounce off the walls 2D, Beginner, Canvas, Games, JavaScript, Phaser, Tutorial, beginner, bouncing, canvas
Now that physics have been introduced, we can start implementing collision detection into the game — first we'll look at the walls.
47 Build the brick field 2D, Beginner, Canvas, Games, JavaScript, Phaser, Tutorial, beginner, canvas
Building the brick field is a little bit more complicated than adding a single object to the screen, although It's still easier with Phaser than in pure JavaScript. Let's explore how to create a group of bricks and print them on screen using a loop.
48 Buttons 2D, Beginner, Buttons, Canvas, Games, JavaScript, Phaser, Tutorial, beginner, buttons, canvas
Instead of starting the game right away we can leave that decision to the player by adding a Start button they can press. Let's investigate how to do that.
49 Collision detection 2D, Beginner, Canvas, Games, JavaScript, Phaser, Tutorial, beginner, canvas, collision detection
Now onto the next challenge — the collision detection between the ball and the bricks. Luckily enough we can use the physics engine to check collisions not only between single objects (like the ball and the paddle), but also between an object and the group.
50 Extra lives 2D, Beginner, Canvas, Games, JavaScript, Phaser, Tutorial, beginner, canvas, lives
We can make the game enjoyable for longer by adding lives. In this article we'll implement a lives system, so that the player can continue playing until they have lost three lives, not just one.
51 Game over 2D, Beginner, Canvas, Game Over, Games, JavaScript, Phaser, Tutorial, beginner, canvas, game over
To make the game more interesting we can introduce the ability to lose — if you don't hit the ball before it reaches the bottom edge of the screen it will be game over.
52 Initialize the framework 2D, Beginner, Canvas, Games, HTML, JavaScript, Phaser, Tutorial, beginner, canvas
Before we can start writing the game's functionality, we need to create a basic structure to render the game inside. This can be done using HTML — the Phaser framework will generate the required <canvas> element.
53 Load the assets and print them on screen 2D, Beginner, Canvas, Games, JavaScript, Phaser, Sprites, Tutorial, beginner, canvas
Our game will feature a ball rolling around the screen, bouncing off a paddle, and destroying bricks to earn points — familiar huh? In this article we'll look at how to add sprites into our gameworld.
54 Move the ball 2D, Beginner, Canvas, Games, JavaScript, Phaser, Tutorial, beginner, canvas, moving
We have our blue ball printed on screen, but it's doing nothing — It would be cool to make it move somehow. This article covers how to do just that.
55 Physics 2D, Beginner, Canvas, Games, JavaScript, Phaser, Tutorial, beginner, canvas, physics
For proper collision detection between objects in our game we will need to have physics; this article introduces you to what's available in Phaser, as well as demonstrating a typical simple setup.
56 Player paddle and controls 2D, Beginner, Canvas, Games, JavaScript, Phaser, Tutorial, beginner, canvas
We have the ball moving and bouncing off the walls, but it quickly gets boring — there's no interactivity! We need a way to introduce gameplay, so in this article we'll create a paddle to move around and hit the ball with.
57 Randomizing gameplay 2D, Beginner, Canvas, Games, JavaScript, Phaser, Tutorial, beginner, canvas
You've finished all the lessons — congratulations! By this point you would have learnt the basics of Phaser and the logic behind simple 2D games.
58 Scaling 2D, Beginner, Canvas, Games, JavaScript, Phaser, Tutorial, beginner, canvas
Scaling refers to have the game canvas will scale on different screen sizes. We can make the game scale to fit on any screen size automatically during the preload stage, so we don't have to worry about it later.
59 The score 2D, Beginner, Canvas, Games, JavaScript, Phaser, Tutorial, beginner, canvas, scoring
Having a score can also make the game more interesting — you can try to beat your own highscore, or your friend's. In this article we'll add a scoring system to our game.
60 Win the game 2D, Beginner, Canvas, Games, JavaScript, Phaser, Tutorial, beginner, canvas, winning
Implementing winning in our game is quite easy: if you happen to destroy all the bricks, then you win.
61 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>.
62 Bounce off the walls Animation, Beginner, Canvas, Example, Games, Graphics, Tutorial, collision, detection
Technical review completed. Editorial review completed.
63 Build the brick field Beginner, Canvas, Games, Graphics, JavaScript, Tutorial, beginner, canvas
After modifying the gameplay mechanics, we are now able to lose — this is great as it means the game is finally feeling more like a game. However, it will quickly get boring if all you do is bounce the ball off the walls and the paddle. What a breakout game really needs is some bricks to destroy with the ball, and this is what we'll create now!
64 Collision detection Beginner, Canvas, Games, JavaScript, Tutorial, beginner, canvas, collision, detection
We have the bricks appearing on the screen already, but the game still isn't that interesting as the ball goes through them. We need to think about adding collision detection so it can bounce off the bricks and break them.
65 Create the Canvas and draw on it 2D, Beginner, Canvas, Games, HTML, JavaScript, Tutorial
Before we can start writing the game's functionality, we need to create a basic structure to render the game inside. This can be done using HTML and the <canvas> element.
66 Finishing up Beginner, Canvas, Games, JavaScript, Tutorial, beginner, canvas, lives, requestAnimationFrame
There's always a room for improvements in any game we write. For example, we can offer more than one life to the player. They could make a mistake or two and still be able to finish the game. We could also improve our code rendering.
67 Game over Beginner, Canvas, Games, Graphics, JavaScript, Tutorial, beginner, canvas, game over
It's fun to watch the ball bouncing off the walls and be able to move the paddle around, but other than that the game does nothing and doesn't have any progression or end goal. It would be good from the gameplay point of view to be able to lose. The logic behind losing in breakout is simple. If you miss the ball with the paddle and let it reach the bottom edge of the screen, then it's game over.
68 Mouse controls Beginner, Canvas, Controls, Games, JavaScript, Tutorial, beginner, canvas, mouse
The game itself is actually finished, so let's work on polishing it up. We have already added keyboard controls, but we could easily add mouse controls too.
69 Move the ball 2D, Beginner, Canvas, Games, JavaScript, Loop, Tutorial, movement
You already know how to draw a ball from working through the previous article, so now let's make it move. Technically, we will be painting the ball on the screen, clearing it and then painting it again in a slightly different position every frame to make the impression of movement — just like how movement works with the movies.
70 Paddle and keyboard controls Beginner, Canvas, Controls, Games, Graphics, JavaScript, Tutorial, beginner, canvas, keyboard
Technical review completed.
71 Track the score and win Beginner, Canvas, Games, JavaScript, Tutorial, beginner, canvas, scoring, winning
Destroying the bricks is really cool, but to be even more awesome the game could award points for every brick a user hits, and keep count of the total score.
72 2D maze game with device orientation Canvas, Device Orientation API, Game Development, HTML5, Phaser, Vibration API
I hope this tutorial will help you dive into 2D game development and inspire you to create awesome games on your own. You can play the demo game Cyber Orb and check out its source code on GitHub.
73 Touch Event Horizon NeedsContent, NeedsExample
Editorial review completed.
74 Visual JS GE
"Visual-JS GameEngine" is small but comprehensive game engine , canvas/websocket orientend . 
Server part based on node.js , client part javascript framework also with windows GUI editor and game instance creator for win.

Document Tags and Contributors

Tags: 
 Contributors to this page: fscholz
 Last updated by: fscholz,