Found 75 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, 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 75 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 also 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, 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, 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 |
| 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 |
| 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, 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. | ||
| 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 |
| 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, 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. | ||
| 52 | 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. |
||
| 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 |
| 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 |
| 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. | ||
| 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 |
| 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, 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, 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, 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, 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, keyboard |
| Technical review completed. | ||
| 71 | 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. | ||
| 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 a small but comprehensive game engine, canvas/websocket orientend. The Server is based on node.js, the client on a javascript framework, along with a windows GUI editor, and a game instance creator to complete the stack. | ||
| 75 | Visual-js game engine | HTML5, JavaScript, Tools, game engine, visual-js |
| windows GUI application version 1.0 (using visual-js 0.9 lib) Important : you will need NET 4.5.2 minimum also redistribution pack for c++ Take a look Project Setting window : |
||