Questions tagged [html-canvas]

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

Filter by
Sorted by
Tagged with
41
votes
5answers
10k 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 <...
9
votes
1answer
3k 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 ...
1
vote
1answer
749 views

Camera movement, Draw grid

If I have a 20x10 grid (640x320) where tiles are 32x32 The grid are rendered: ...
3
votes
1answer
2k 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 for-...
4
votes
2answers
3k 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 ...
2
votes
1answer
1k views

2d Tile Movement and Camera

Let's imagine we have a 60x60 grid (where a Tile is 64x64px). Within the viewport there should be 10 tiles. The player object is 32x32px. To have smooth movement, I have to take delta time in ...
2
votes
3answers
2k 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 ...
10
votes
0answers
957 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?
0
votes
1answer
142 views

How to use arrow keys to navigate between cells in a crossword puzzle

I am making a crossword puzzle, using a canvas. How do you get the keyboard arrows to interact with the screen so that when the user presses any of the arrow keys, the cursor will advance to the next ...
9
votes
2answers
8k 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
5k 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 ...
3
votes
2answers
4k 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: ...
7
votes
1answer
3k 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
25k views

Is it possible to rotate an image on an HTML5 canvas, without rotating the whole canvas?

So I basically want to rotate single sprites on the canvas without rotating the whole canvas, is that someway possible. I also don't want to create a new canvas for each object I have. Also, it ...
1
vote
2answers
4k views

How to draw a tileset using HTML5 canvas?

I have a tileset something like this: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20 My tileset draw code looks like this: ...
6
votes
4answers
3k 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
1answer
97 views

Click on an isometric plane and obtain normal coordinates

I have photos distributed as cells. When I click, I get the corresponding row and column. console.log("Col:" + X + "Row:" + Y); When applying an isometric view conversion like this: ctx.translate(0, ...
2
votes
2answers
2k views

Javascript Isometric draw optimization

I'm having trouble with isometric tiles drawing. At the moment I got an array with the tiles i want to draw. And it all works fine until i increase the size of the array. Since I draw ALL tiles on ...
0
votes
1answer
3k views

HTML5 platformer collision detection problem

I'm working on a 2D platformer game, and I'm having a lot of trouble with collision detection. I've looked trough some tutorials, questions asked here and Stackoverflow, but I guess I'm just too dumb ...
6
votes
2answers
1k 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 ...
5
votes
1answer
733 views

Roguelike 2D Collision Detection

I'm just a normal guy trying to do some basic collision detection but I suck at it. I either get stuck in a wall or I go in reverse in the wrong direction trying to update the player position to a non ...
2
votes
1answer
101 views

Array of map data renders the map the opposite way

A while ago by following some tutorials I made a game map array consisting of 0, 1 and 2. I program it the way I want to see it: ...
2
votes
1answer
1k 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
2k 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 ...
1
vote
3answers
389 views

Is it alright to have hundreds of canvas object on screen?

I am using html5 to build a game and it is based on Canvas not webGL. I am trying to build sprites from canvas object not from images. Because there will be many sprites on the screen and each of them ...
1
vote
2answers
2k views

Calculating angle between two vectors to steer towards a target

I have been trying to implement a path following steering behaviour for AI in a 2D racing game. I have two vectors: futurePosition represents the predicted future ...
0
votes
1answer
72 views

Line rect intersection - lines behave like rays

Why is this? I have a simple ship that is a 14x14 rectangle, and a contour map. I want to be able to determine when the ship hits the ground. Here's a link to the JSFiddle. Here's what happens now: ...