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, Main 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, 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.
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.Update your game whenever you want.Players can play the game anywhere, anytime.
6 Introduction to game development for the Web Firefox OS, Games, Guide, Mobile
No summary!
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 CocoonIO, Game, Game publishing, Games, Gaming, HTML5, JavaScript, Mobile Game Distribution, Phonegap, Web Stores, 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, 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
The WebXR 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
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 suit 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, Canvas, Games, Tutorial, WebGL, 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 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.
23 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 two types of shaders: 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.
25 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.
26 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.
27 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.
28 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.
29 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 a console-like experience to the browser without the need for 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.
30 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.
31 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.
32 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.
33 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.
34 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.
35 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.)
36 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.
37 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.
38 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.
39 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.
40 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.
41 Tutorials Canvas, Games, JavaScript, Web, Workflows
This page contains multiple tutorial series that highlight different workflows for effectively creating different types of web games.
42 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.
43 Animations and tweens 2D, Animation, Beginner, Canvas, Games, JavaScript, Phaser, Tutorial, 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.
44 Bounce off the walls 2D, Beginner, Canvas, Games, JavaScript, Phaser, Tutorial, bouncing
Now that physics have been introduced, we can start implementing collision detection into the game — first we'll look at the walls.
45 Build the brick field 2D, Beginner, Canvas, Games, JavaScript, Phaser, Tutorial
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.
46 Buttons 2D, Beginner, Buttons, Canvas, Games, JavaScript, Phaser, Tutorial
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.
47 Collision detection 2D, Beginner, Canvas, Games, JavaScript, Phaser, Tutorial, 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.
48 Extra lives 2D, Beginner, Canvas, Games, JavaScript, Phaser, Tutorial, 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.
49 Game over 2D, Beginner, Canvas, Games, JavaScript, Phaser, Tutorial, 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.
50 Initialize the framework 2D, Beginner, Canvas, Games, HTML, JavaScript, Phaser, 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 — the Phaser framework will generate the required <canvas> element.
51 Load the assets and print them on screen 2D, Beginner, Canvas, Games, JavaScript, Phaser, Sprites, Tutorial
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.
52 Move the ball 2D, Beginner, Canvas, Games, JavaScript, Phaser, Tutorial, 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.
53 Physics 2D, Beginner, Canvas, Games, JavaScript, Phaser, Tutorial, 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.
54 Player paddle and controls 2D, Beginner, Canvas, Games, JavaScript, Phaser, Tutorial
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.
55 Randomizing gameplay 2D, Beginner, Canvas, Games, JavaScript, Phaser, Tutorial
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.
56 Scaling 2D, Beginner, Canvas, Games, JavaScript, Phaser, Tutorial
Scaling refers to how 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.
57 The score 2D, Beginner, Canvas, Games, JavaScript, Phaser, Tutorial, 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.
58 Win the game 2D, Beginner, Canvas, Games, JavaScript, Phaser, Tutorial, winning
Implementing winning in our game is quite easy: if you happen to destroy all the bricks, then you win.
59 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>.
60 Bounce off the walls Animation, Beginner, Canvas, Example, Games, Graphics, Tutorial, collision, detection
It is nice to see our ball moving, but it quickly disappears from the screen, limiting the fun we can have with it! To overcome that we will implement some very simple collision detection (which will be explained later in more detail) to make the ball bounce off the four edges of the Canvas.
61 Build the brick field Beginner, Canvas, Games, Graphics, JavaScript, Tutorial
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!
62 Collision detection Beginner, Canvas, Games, JavaScript, Tutorial, 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.
63 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.
64 Finishing up Beginner, Canvas, Games, JavaScript, Tutorial, lives, requestAnimationFrame
There's always 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.
65 Game over Beginner, Canvas, Games, Graphics, JavaScript, Tutorial, 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.
66 Mouse controls Beginner, Canvas, Controls, Games, JavaScript, Tutorial, 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.
67 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.
68 Paddle and keyboard controls Beginner, Canvas, Controls, Games, Graphics, JavaScript, Tutorial, keyboard
The ball is bouncing off the walls freely and you can watch it indefinitely, but currently there's no interactivity. It's not a game if you cannot control it! So let's add some user interaction: a controllable paddle.
69 Track the score and win Beginner, Canvas, Games, JavaScript, Tutorial, 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.
70 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.
71 Touch Event Horizon NeedsContent, NeedsExample
This tutorial shows how to use Touch Events to create a game on a <canvas>. This is a multi-player game relying on the Tap and Drag gestures.
72 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.
73 Visual typescript game engine HTML, game engine
visualTS
74 Visual-js game engine HTML5, JavaScript, Tools, game engine, visual-js
creator : Nikola Lukic 2017