HTML 5 refers to new web technologies such as high performance JavaScript engines, canvas 2D and WebGL, video and audio tags.

learn more… | top users | synonyms

3
votes
2answers
3k views

Smooth animation on a persistently refreshing canvas

Yo everyone! I have been working on an Isometric Tile Game Engine in HTML5/Canvas for a little while now and I have a complete working game. Earlier today I looked back over my code and thought: ...
3
votes
2answers
895 views

Client Side Logic vs Server Side Logic for HTML5 Game

I'm writing an HTML5 game that takes place in a single screen and does not have any data that would need to be saved (except for a score). I am writing all of my canvas logic on the front end. because ...
3
votes
2answers
648 views

Converting Doom maps to JSON [closed]

This is a really cool demo of a Canvas Doom Engine made back in 2006: http://canvex.lazyilluminati.com/84/play.xhtml Here is the e1m1 map in JSON format: http://canvex.lazyilluminati.com/84/map1.js ...
3
votes
1answer
798 views

How can I place my Enchant.js game into a DIV in a fully-designed web site?

Following the Enchant.js tutorial I cannot find a way to define the place the game is rendered in the page. It either takes the maximum possible area or limits itself to the given size (using ...
3
votes
1answer
740 views

Creating a frozen bubble clone [closed]

This photo illustrates the environment: http://i.imgur.com/V4wbp.png I'll shoot the cannon, it'll bounce off the wall and it's SUPPOSED to stick to the bubble. It does at pretty much every other ...
3
votes
3answers
412 views

Commonizing cycle time across different browsers for HTML5

Is there a good (accepted) method for "fixing" the cycle time within an HTML5 canvas game implementation? The game that I have been working on runs far quicker in Google Chrome than in other browsers ...
3
votes
3answers
519 views

What is better for the overall performance and feel of the game: one setInterval performing all the work, or many of them doing individual tasks?

This question is, I suppose, not limited to Javascript, but it is the language I use to create my game, so I'll use it as an example. For now, I have structured my HTML5 game like this: var fps = ...
3
votes
5answers
2k views

Html5 games, what is the standard dimension to use?

I am trying to make html5 games to be played on the browser(not offline apps), and I am trying to support the maximum number of platforms, hence I need to know what dimension should I use for the game ...
3
votes
1answer
660 views

Any good smartphone simulators available?

I'm trying to find a good smartphone simulator to test HTML5 games on. Doesn't matter if it is only 1 phone or a library of phones, iOS or android. As long as it's as close as it can get to the ...
3
votes
1answer
412 views

Multilayer game HTML5 canvas

I've have a problem with HTML5 canvas and using multiple layers. I'm using 3 layers. The first layer is where the player and the collision base objects are. And the second and the third layer have ...
3
votes
2answers
787 views

How is an HTML5 game sold?

(I know this site doesn't give legal advice, but what I'm dealing here with isn't anything serious at all. Also, I apologize to JP for being annoying over this.) Someone found a game I made on the ...
3
votes
2answers
343 views

Is it possible create an HTML5 mobile game without the user having internet connection?

I trying to make a app for the Play Store and App Store. My app will be 2D, but will have 3D effects. Is it possible to program it in HTML5 without the user having internet connection? Also, are there ...
3
votes
2answers
7k views

HTML5 - check if font has loaded

At present I load my font for my game in with @font-face For instance: @font-face { font-family: 'Orbitron'; src: url('res/orbitron-medium.ttf'); } and then reference it throughout my JS ...
3
votes
1answer
1k views

Canvas tile grid, hover effects, single tilesheet, etc

I'm currently in the process of building both the client and server side of an HTML5, canvas, and WebSocket game. This is what I have thus far for the client: http://jsfiddle.net/dDmTf/20/ Current ...
3
votes
1answer
1k views

Converting cartesian geo-coordinates to isometric (real world map to game map)

I need to create an automated method to convert real cartesian, geo-coordinate data (such as roads and parks), into isometric coordinates as a game map view for use in HTML5 Canvas. Here is an image ...
3
votes
1answer
96 views

CSS Sprite position updates slow due to addition of 'px'?

I'm moving fewer than 10 position: absolute elements around the screen. An enormous amount of CPU time (profiled in Chrome as (program) i.e. native code) is used where I do the following: style.left ...
3
votes
1answer
3k views

HTML5 - Dynamic canvas grid for scrolling a big map

I've been working on different scrolling algorithms for my JS-based game. My main problem is that I need to draw a huge map and also have it scroll smoothly. I've made a few attempts and while they're ...
3
votes
3answers
1k views

HTML5 Canvas Game Timer

How to create good timer for HTML5 Canvas games? I am using RequestAnimationFrame( http://paulirish.com/2011/requestanimationframe-for-smart-animating/ ) But object's move too fast. Something like ...
3
votes
1answer
747 views

HTML5 Canvas fillStyle as numbers not text

When drawing vector graphics in the canvas you set the fillStyle using an rgba string like this... context.fillStyle = "rgba(255, 223, 191, 1)"; Is it possible to feed in a javascript object ...
3
votes
1answer
1k views

Shoot a bullet towards cursor - top down 2d

I am making a 2D topdown shooter game, in which the player's movement is controlled with WASD and gun with the mouse. I'm having a hard time figuring out how to update the position of the bullet as it ...
3
votes
2answers
1k views

HTML5/JS - Choppy Game Loop

I have been experimenting with HTML5/JS, trying to create a simple game when I hit a wall. My choice of game loop is too choppy to be actually of any use in a game. I'm trying for a fixed time step ...
3
votes
1answer
900 views

Is it possible to load local html pages into Gamemaker games?

I was just wondering if it would be possible somehow to load locally saved web pages into a game. My primary use for them would be as menus, helping to navigate between rooms. I know about the built ...
3
votes
1answer
504 views

How to compute the 2D equations of 3D circular arcs?

I'd like to obtain these equations for the ellipses produced by the perspective projections of (3-dimensionally transformed) circles. This is useful for rendering in 2D contexts which provide curve ...
3
votes
1answer
519 views

Animating DOM elements vs refreshing a single Canvas

A few years ago, when the HTML Canvas element was still kinda fresh, I wrote a small game in a rather "unusual" way: each game element had its own canvas, and frequently animated elements even had ...
3
votes
1answer
2k views

Optimizing HTML5 canvas transformed drawing in Javascript

I am trying to optimize my HTML5 game engine and have noticed that currently a majority of the time taken in the game loop can be taken when drawing transformed tiles. I think this is because each ...
3
votes
1answer
306 views

How do I show the current view from the viewport on my map?

I'm doing HTML5 Canvas development and currently have a large viewport (on the left) and a map (on the right). Like this: I need to show on the map what is currently being viewed in the left. And ...
3
votes
2answers
3k views

HTML5 canvas screen to isometric coordinate conversion

I am trying to create an isometric game using HTML5 canvas, but don't know how to convert HTML5 canvas screen coordinates to isometric coordinates. My code now is: var mouseX = 0; var mouseY = 0; ...
3
votes
0answers
257 views

Choosing a (browser) game environment [closed]

I apologise in advance if this post is something you've heard a million times already or seems like a trolling attempt. I just want some advice and I'm coming up short with my own Google searches. ...
2
votes
4answers
593 views

Can sprite sheet width and height affect performance?

Is there any performance difference in the way the images are placed inside a sprite sheet image (for the same total area)? For example, should I place 50 sprites (50x50 each) in a linear way ...
2
votes
3answers
869 views

Issues with shooting in a HTML5 platformer game

I'm coding a 2D sidescroller using only JavaScript and HTML5 canvas, and in my game I have two problems with shooting: 1) Player shoots continous stream of bullets. I want that player can shoot only ...
2
votes
4answers
525 views

Javascript Audio solution

still has issues. Flash works but... requires flash (an issue for iOS). What do you use in Javascript for audio?
2
votes
2answers
368 views

How to draw objects that have a smaller Y axis first?

In my game there is a large 2D map of various objects. Example. As you see, upon creation objects of the same type (trees for example) are placed correctly, but objects of another type (enemies) are ...
2
votes
3answers
5k views

How do I structure a 2D platform level?

I'm doing a 2D platformer but I don't know how they are usually built. The approach I'm looking at is making it tilebased, with ground tiles on bottom row, then platforms on some places in "mid-air" ...
2
votes
4answers
2k views

Play audio in javascript with a good performance

I'm developing a browser game where the player can shoot. Everytime he shoots it play a sound. Currently i'm using this code to play sounds in JavaScript: var audio = ...
2
votes
4answers
1k views

Cross platform development tool/platform for the modern indie game developer?

I'm a Flash developer, but I think it's time to think of other avenues. Ideally I want to be able to write once but be able to deploy to as many different platforms as possible, so iOS AND ...
2
votes
3answers
323 views

Do larger sprite sheets improve performance in html 5 games?

I know when I did some game development with XNA they recommended that we try to group are sprites into fewer sheets because the graphic card could process it faster. Does this also apply to web based ...
2
votes
3answers
185 views

Instantiate objects that share same variable

I'm just wondering how to instantiate the same objects that all share the same variables, except their positions. I'm basically working on the scene of my HTML5 game, and I've build a streetlamp post ...
2
votes
4answers
3k views

Dividing up spritesheet in Javascript

I would like to implement an object for my spritesheets in Javascript. I'm very new to this language and game-developement so I dont really know how to do it. My guess is I set spritesize to 16, use ...
2
votes
2answers
92 views

How do I detect when an HTML 5 game has ended?

I'd like to embed HTML5 games in a website, but I need to be able to detect when the game has ended so I can run some of my own JavaScript. Looking at the output of some game engines (Construct 2, ...
2
votes
2answers
175 views

Testing HTML5 canvas games on low resource computers

I've made a game in HTML5 & JS and want to test it on varying types of user setups as I've heard it doesn't perform too well on older MacBooks. How can I accomplish this? I'm thinking of ...
2
votes
2answers
253 views

Movement on Multiplayer Games

I'm developing a JavaScript Multiplayer Game (Using NodeJS and Socket.IO). The problem I'm having is, on a Player's movement, the Event with the X and Y positions is sent to the server and then to all ...
2
votes
3answers
88 views

HTML5 tags on my website? [closed]

I'm not here to ask about the merits of HTML 5, CSS 3, Javascript, etc. as game development tools. Lord knows how many people have asked about that already. No, what I'm curious about is what kind ...
2
votes
2answers
2k views

Receiving keyboard events on a canvas in Javascript

I need to receive keyboard events in a canvas element. Click events are received but key presses aren't. Here is my code which doesn't handle key events: var canvasElm = $('canvas'); ...
2
votes
1answer
363 views

mat3x4 in webGL shaders

I am porting the IQM bone animation format to Javascript and have run into a problem... The vertex shader is failing to compile and the only error message I get out is 'mat3x4' : syntax error on the ...
2
votes
2answers
2k views

Efficient collision detection - tile based HTML5/Javascript game

I'm building a basic RPG game and I'm looking at collisions/pickups etc now. It's tile based and I'm using HTML5 and Javascript. I use a 2D array to create my tilemap. I'm currently using a switch ...
2
votes
1answer
3k views

Game 30% done on HTML5. Maybe it was a bad idea. Should I change to Unity3d? [closed]

I'm creating a 3d game on HTML5. It's 30% complete and the hard part is already coded. The server is on node.js.Now I'm realizing that maybe it was not a wise choice. This is because I realized: ...
2
votes
2answers
293 views

For timed levels, how do you determine time steps that are less than 1/(frames per second)?

I have made a simple HTML5 racing game. The laps are timed. I am running the game are 40 frames per second, each frame represents 40 milliseconds. There for my timer will increase in 0.025 ...
2
votes
1answer
467 views

Box2D: Asteroids-Like Spaceship Physics

I'm new to Box2D (JavaScript) (and the world of physics/mathematics) so I'm having a hard time working out the methods I need to use to make a spaceship act like it does in the classic arcade game ...
2
votes
1answer
248 views

Optimising out tiles outside of viewport

I am playing around with the HTML5 canvas and have begun implementing a tile engine. However, it's currently very inefficient: I have a 100x100 2D array and my code loops through the whole thing ...
2
votes
1answer
436 views

Customize Colors for Sprites in Web Game

So I'm working on an html5/javascript/css3-based game. Without going into too much detail, I'm thinking of having the characters be simple 8 or 16-bit style sprites, but I'd like to allow the user to ...