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

learn more… | top users | synonyms

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 ...
14
votes
8answers
6k 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 ...
8
votes
1answer
998 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 ...
3
votes
1answer
309 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 ...
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?
7
votes
1answer
706 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 ...
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 ...
1
vote
3answers
1k views

2D maps, how to structure?

I'm new to this. And I don't really understand 2D tile maps. The tutorials I've read use arrays, but doesn't this get really difficult to manage when they get big? And what if I want different ...
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 ...
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; ...
1
vote
1answer
910 views

Implementing a camera on HTML5 canvas?

I am trying to work out the best way of implementing a camera in my simple 2d game. The way it is structured at the moment is my game objects all have draw functions, which are passed a canvas ...
2
votes
5answers
2k views

Are there any good html 5 mmo design tutorials? [closed]

Hey all. I got a rather inspired after playing gaia online's zOMG and wanted to revive an old project idea I've had laying around for a few years now. I'm looking to work with html5 (ie canvas, svg ...
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. ...
2
votes
2answers
152 views

Glitch-free cross-fades in HTML5

In my HTML5 canvas game, I need to cross-fade two sprites which have some glow around them. (Glow is backed into sprites.) Initially, the first sprite is visible. During the cross-fade the first ...
1
vote
1answer
289 views

Canvas isometric translations to integer coordinates

I'm creating a canvas based game with an isometric playing board. I use the following transformations to get my square tiles to render on the screen: 'applyViewportTransformation' : function() { ...
6
votes
2answers
870 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 ...
1
vote
1answer
348 views

Do you need to make a tileset for a platformer?

I've been tasked to make a platformer, I've never made a tiled game before, is this necessary? I.e. can I just make different child classes of a Sprite class and add place them on the map, adding ...
1
vote
2answers
785 views

Matrix rotation of a rectangle to “face” a given point in 2d

Suppose you have a rectangle centered at point (0, 0) and now I want to rotate it such that it is facing the point (100, 100), how would I do this purely with matrix math? To give some more specifics ...
0
votes
2answers
120 views

How to move an image back and forth with javascript

I currently am trying to make a baseball game and have this code here: http://jsfiddle.net/769BK/ I have the baseballX set to a decrement, and then I try increasing the value using baseballX++; but it ...
0
votes
2answers
143 views

How to move an object using X and Y coordinates in JavaScript

I am making a 2d baseball game with JavaScript and HTML5 and am trying to move an image that I have drawn with JavaScript like so: //canvas var c = document.getElementById("gameCanvas"); ...
-1
votes
2answers
1k views

Moving a sprite towards an x and y coordinate

Given a sprite with an x and y coordinate, how would I move it toward another sprite with an x and y coordinate? I've already made it face towards the other sprite, and I've made it move towards the ...