A new feature of HTML5, allowing Javascript apps to have a drawing surface in the browser.

learn more… | top users | synonyms

39
votes
7answers
2k views

Managing text-maps in a 2D array on to be painted on HTML5 Canvas

So, I'm making a HTML5 RPG just for fun. The map is a <canvas> (512px width, 352px height | 16 tiles across, 11 tiles top to bottom). I want to know if there's a more efficient way to paint the ...
23
votes
3answers
6k views

Double buffering on HTML5 Canvas game?

My simple canvas game seems to work fine on Chrome and FF on Mac/Linux. I haven't had chance to test it on smart phones or Windows environments yet. It doesn't use double buffering but I have seen ...
22
votes
2answers
994 views

My game is just about finished! What do I do now? [closed]

I have an HTML5/canvas game just about finished and ready to launch. It's a 2d game in which you explore and disrupt a procedurally-generated landscape, crafting items and structures to survive. I ...
20
votes
7answers
9k views

HTML5 Game (Canvas) - UI Techniques?

I'm in the process of building a JavaScript / HTML5 game (using Canvas) for mobile (Android / iPhone/ WebOS) with PhoneGap. I'm currently trying to design out how the UI and playing board should be ...
16
votes
4answers
3k views

Should actors in a game be responsible for drawing themselves?

I am very new to game development, but not to programming. I am (again) playing around with a Pong type game using JavaScript's canvas element. I have created a Paddle object which has the following ...
15
votes
6answers
6k views

Are there any alternative JS ports of Box2D?

I have been thinking about creating a top down 2D car game for HTML5. For my first game I wrote the physics and collisions my self but for this one I would like to use some ready made library. I ...
14
votes
8answers
7k views

How should I sort images in an isometric game so that they appear in the correct order?

This seems like a rather simple problem but I am having a lot of difficulty with it. What should I do to properly sort images in an isometric game? In a normal 2d top-down game one could use the ...
12
votes
1answer
11k views

Multiplayer HTML5, Node.js, Socket.IO [closed]

I trying create simple Multi-player with HTML5 Canvas, JavaScript(too using John Resig simple Inheritance library) and Node.js with Socket.IO. My client code: var canvas = ...
10
votes
2answers
575 views

Dirty 2D map rendering

I keep hearing people talk about "dirty rendering" when it comes to map rendering for HTML5. I've Googled and searched the GameDev about it but there isn't much about it. What exactly is it? How to ...
10
votes
2answers
742 views

How should I handling clipping vertices that are closer to the eye than the near clip plane?

I'm rolling my own 3D engine in Javascript and using only canvas drawing, no WebGL. This is another Minecraft clone, I love boxes, don't judge me. So far everything works wonderfully, except for one ...
10
votes
0answers
908 views

How to create 2D shadows [duplicate]

I'd like to create lights and shadows in a 2D environment, like in the image below: I did several searches but got no results. Do you have any hint?
8
votes
5answers
1k views

Good technological solutions to build an ascii map and moving characters in a browser (like dwarf fortress)? [closed]

I'd like to build a webapp for my game website that involves using text characters to represent animals and people, and have them move around on map squares with independent (server driven) AI. So ...
8
votes
5answers
534 views

What implications does JIT (javascript/canvas) vs. AOT (Flash) have in terms of browser based game performance?

In my experience, even till this day, I still see more of a visual lag in entity movement / animation in JavaScript (Canvas) based games than I do in Flash based games. Why is this - what exactly is ...
8
votes
1answer
1k views

Set sprite to face direction of mouse

I'm building a html5 canvas game and I need a way to get my sprite to face the mouse cursor. I have the X and Y co-ordinates for the sprite, and also the X and Y co-ordinates of the pointer. All I'm ...
7
votes
2answers
4k views

Free movement in a tile-based isometric game

Is there a reasonable easy way to implement free movement in a tile-based isometric game? Meaning that the player wouldn't just instantly jump from one tile to another or not be "snapped" to the grid ...
7
votes
1answer
728 views

Jump handling and gravity

I'm new to game development and am looking for some help on improving my jump handling for a simple side scrolling game I've made. I would like to make the jump last longer if the key is held down ...
7
votes
2answers
908 views

How to scroll hex tiles?

I don't seem to be able to find an answer to this one. I have a map of hex tiles. I wish to implement scrolling. Code at present: drawTilemap = function() { actualX = Math.floor(viewportX / ...
6
votes
3answers
812 views

Basic isometric projection in Javascript

I've been working on porting an old closed source game to Javascript with Canvas and I've come to a slight problem. Right now, to display the land, I just have a pretty basic loop that just draws the ...
6
votes
2answers
882 views

android multitouch problem

Im aware that there a a couple of posts on this matter, but Ive tried all of them and none of them gets rid of my problem. Im starting to get close to the end of my game so I bought a cabel to try it ...
6
votes
2answers
888 views

Is using multiple canvas objects a good practice?

We're developing a jump and run game with HTML5 and JavaScript and have to build an own game framework for this. Here we have some difficulties and would like to ask you for some advice: We have a ...
6
votes
1answer
1k views

HTML5 Canvas Converting between cartesian and isometric coordinates

I'm having issues wrapping my head around the Cartesian to Isometric coordinate conversion in HTML5 canvas. As I understand it, the process is two fold: (1) Scale down the y-axis by 0.5, i.e. ...
6
votes
2answers
2k views

How to efficiently store and display a tile map on the web?

About These are actually two questions in one. First of all I am looking for a way to efficiently store large amounts of tile data. The other aspect deals with querying the data set and displaying ...
6
votes
0answers
2k views

Poor performance in android when running APK, runs fine in browser

I have created a small game project in HTML5 using Phaser engine (tried both 1.1.5 and 1.1.6). Then to port it to mobile platform, used Phonegap/Cordova for Windows Phone 8, Android and iOS. In my ...
5
votes
4answers
1k views

Defining the track in a 2D racing game

I am designing a top-down racing game using canvas (html5) which takes a lot of inspiration from Micro Machines. In MM, cars can move off the track, but they are reset/destroyed if they go too far. ...
5
votes
3answers
1k views

HTML5 game programming style [closed]

I am currently trying learn javascript in form of HTML5 games. Stuff that I've done so far isn't too fancy since I'm still a beginner. My biggest concern so far has been that I don't really know what ...
5
votes
1answer
1k views

What's the difference between Canvas and WebGL?

I'm thinking about using CAAT as a part of a HTML5 game engine. One of it's features is the ability to render to Canvas and WebGL without changing anything in the client code. That is a good thing, ...
5
votes
4answers
1k views

Making a startscreen for an HTML5 game?

How would I make a start screen for a game using HTML5 canvas? I'm not looking for something advanced, just the new game button and highscore link etc. The question might be stupid, but I've never ...
5
votes
1answer
740 views

Canvas animation drops to 30fps every 3-4 seconds

Ok! I solved the problem. Chapter One - Multiple Canvases I started to make pong utilizing requestAnimationFrame and I noticed that the ball was stuttering and slowing down every 3-4 seconds. So I ...
5
votes
1answer
833 views

Javascript Canvas Drawing Efficiency

I have just recently started some experiments with game development in Javascript/HTML5, and so far it has been going pretty well. I have a simple test scene running with some basic input handling, ...
5
votes
1answer
2k views

How do I implement side scrolling in a javascript platformer?

I'm building a side scrolling platformer with Javascript and the canvas element for a school project. I have the character all sorted out. He runs left and right, and has a different sprite set for ...
5
votes
3answers
230 views

How to do a genetic algorithm's chromosome which controls movements

First I would like to inform you that I'm french and 15 so my english is not very good. I've read some articles about genetic algorithms (GA) and since I discovered the HTML5's canvas element, I can ...
4
votes
3answers
2k views

Chrome Angry Birds engine?

Was Chrome AngryBirds game made using html5 canvas? And if yes: what kind of engine did they use?
4
votes
5answers
2k views

What would be a good way to implement/render a 2D tiled map for a browser game?

I coded a a little RPG in ruby and I used an array to contain the map squares. The elements of the array (which defines the X coordinates) are arrays themselves whose elements defines the Y ...
4
votes
2answers
1k views

Calculating the angular direction from velocity

I'm trying to calculate the angular direction of a projectile, knowing it's X and Y velocity I can find the magnitude of its movement, but I'm having a hard time wrapping my mind around getting the ...
4
votes
2answers
1k views

canvas ball physics animation

I want to animate ball in html canvas like this. ctx.beginPath(); ctx.arc(75, 75, 10, 0, Math.PI*2, true); ctx.closePath(); ctx.fill(); start position is left top corner and ball's maximum ...
4
votes
2answers
619 views

HTML5 multi-player game data/event validation best practices

I'll start by saying that I am fully aware that this question might seem subjective at first, but I'll try and provide a specific test case scenario for it to be a clear question about validating the ...
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
4answers
879 views

Why wouldn't one use Canvas for HTML 5 game development? [closed]

I'm just getting into the HTML 5 game development. I've discovered that some games seem to be created using just JS/CSS/HTML instead of the canvas. Since canvas seems to enjoy good browser ...
3
votes
3answers
6k views

Huge performance difference when using drawImage with IMG vs CANVAS

I put together a couple of simple tests that render an image to a canvas. One renders from an IMG, while the other renders from an offscreen CANVAS. You can see the code and results here: ...
3
votes
2answers
618 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
3answers
663 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
2k views

how to solve ArrayList outOfBoundsExeption?

Im getting: 09-02 17:15:39.140: E/AndroidRuntime(533): java.lang.IndexOutOfBoundsException: Invalid index 1, size is 1 09-02 17:15:39.140: E/AndroidRuntime(533): at ...
3
votes
3answers
389 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
1answer
313 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
4answers
3k views

2D Collision in Canvas - Balls Overlapping When Velocity is High

I am doing a simple experiment in canvas using Javascript in which some balls will be thrown on the screen with some initial velocity and then they will bounce on colliding with each other or with the ...
3
votes
2answers
159 views

Deactivate keyboard input on collision

I'm creating an online-canvas-game with a tank as player object. Now I have several structures in my canvas, that shouldn't be able to be overdriven by the tank... My solution is to detect the ...
3
votes
1answer
530 views

Best resources for Canvas Html 5 development

I am at a competition at work for who can make the best canvas game. Theme is a top down shooter... Winner gets dinner for free. Anyways I have been looking around looking for some good resources on ...
3
votes
1answer
321 views

How can I detect mouse events on sprites in a canvas?

I'm making an HTML 5 game. I want mouse clicks on sprites drawn in a canvas element cause events that my code can react to. At the moment, I'm doing it by checking through all of my sprites in a ...
3
votes
2answers
224 views

Android Array Lag?

I am making a platform game for Android. It is sort of a tile based game. I added bullets and enemies with AI and a bunch of tile types. I created a simple map with no Enemies. Everything was running ...
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 ...