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
0
votes
2answers
51 views

Should I use HTML5 canvas for a 2d image browser game / app?

Ok, I hope this hasn't been asked, but I could not find one, especially nothing recent. Quick Background: I've been away from programming for a couple of years and dusted off an old project to create ...
0
votes
1answer
26 views

I'm trying to work with setInterval inside a loop and it doesn't work the i want it to

I am making a 2d canvas game in Javascript. I am trying to make the enemies that are coming to my hero to shoot a bullet every 3 seconds. ...
0
votes
1answer
45 views

Making an enemy shoot every few seconds

so I am making a 2d canvas game in Javascript and I want the enemy mobs to shoot a bullet every let's say 3 seconds. I'm almost done with the code , i made everything i just don't know how to make the ...
0
votes
1answer
54 views

How do I change the level of my game by changing the file loaded?

I am making this 2d canvas game in JavaScript and I want to switch to file level2/level2.html when the boss of level 1 (...
-1
votes
1answer
49 views

WebGL-HTML5 canvas in two blogger blog posts show individually but not together?

In my blogger blog: https://cglabprojects.blogspot.com I have a newer blog post with <canvas width = "570" height = "570" id = "my_Canvas1"></canvas> ...
0
votes
0answers
25 views

Account for scale offset?

I have an odd situation where I know the position of an item on a mouse click and I know the panning state of a 2D camera pointing at it. So what I do is render an object at the point in which the ...
1
vote
0answers
41 views

Problem with collisions detection on canvas platformer

Having a lot of trouble with my collision detection in my platformer. If you go straight to the right the block will float. Also the corners let the block sink right through and the walls are sticky. ...
0
votes
2answers
62 views

How can I delete an object when it's not stored in an array?

I have a boss appearing in my game, but since it's only one character I didn't put it in an array. Now I'm trying to make disappear if its health is less or equal to 0 but I don't know how to do that. ...
-1
votes
2answers
56 views

I need help with calculating the angle my character is aiming at

So im doing this program where i want my hero to shoot to the direction its facing , but for this job to get done i need to calculate the angle my hero is facing with Math.atan2() , atleasts thats ...
1
vote
1answer
54 views

Collision detection between two arrays with nested loops: why do I get a crash?

I'm creating a game where waves of enemies are coming to me and I have to kill them. So far, I'm doing great: it took me hours to come up with this nested loop to check for collision detection and ...
0
votes
0answers
39 views

Car physics: incorporating lateral forces for high-speed steering

I'm making a car simulation in Javascript and I am using this website to help me with the physics: http://www.asawicki.info/Mirror/Car%20Physics%20for%20Games/Car%20Physics%20for%20Games.html The ...
0
votes
1answer
56 views

frame rate drop in html5 game

i have Incorporated gravity mechanics and collision mechanics to my game. the game works fine for some period of time after that i am getting significant amount of frame rate drop.i am doing some ...
1
vote
1answer
20 views

Changing JavaScript Player Object based on keypress

I'm currently working on a basic JavaScript top-down shooter and I've run into a dilemma. I'm trying to implement a basic toggle weapon system however when I press the key it changes the weapon ...
1
vote
2answers
66 views

Select Neighboring X or Y Tiles

I have a randomly generated set of tiles, and I am trying to select neighboring x or y tiles to perform functions on them based on if they are a certain value of tile, like so: ...
0
votes
2answers
63 views

How to get projectile direction vector in a 2d grid?

I am having trouble figuring out how to trace the path of my projectiles in an Asteroids clone. Currently the ship is locked to the center of the screen and can be rotated a full 360 degrees. I know ...
2
votes
1answer
78 views

How do I rotate individual shapes on an html5 canvas?

So I am doing a basic Asteroids clone as an intro to HTML5 canvas. I want to be able to rotate the main player while leaving the other objects on screen alone. Currently I am using transform and ...
0
votes
0answers
50 views

Using dom elements for game interaction - slow performance

I have a need for my html5 game (using melonjs) to allow users to click tile areas on the map. The idea is it will show a css styled hover area. The browser tested is chrome. I could do this natively ...
1
vote
1answer
141 views

How to rotate player to face mouse on canvas?

I'm building a basic game using plain javascript and I am trying to rotate my object to follow my mouse. I've tried getting the client's mouse X and Y then subtracting the canvas width and height ...
0
votes
0answers
43 views

Stuck at Goomba's speed and cancelling animation at game over

I'll try to be as precise as possible. First Issue: If you look in the code, I have a drawObjects function which calls collisionDetection function. Inside collisionDetection if player(mario) touches ...
2
votes
1answer
94 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, ...
1
vote
0answers
62 views

Junk movement with steady 60fps on Web canvas

I'm new to building games on canvas, and I'm trying to create one. But I encountered a problem with sprite movements. My sprites move is smooth, but sometimes it starts to "jump". FPS is stable 60 ...
1
vote
1answer
56 views

How can I convert screen coordinates from a click to 2D scaled world coordinates?

I need a way to convert screen coordinates obtained from mouse clicks to world coordinates in my 2D game. To create a zoom effect controlled by the user, before drawing a model I will scale all of it'...
1
vote
1answer
38 views

How can I draw lines and curves on a canvas that's not rendered?

I need to draw lines and curves on a canvas that is not rendered on the screen but just updates the array of pixels that would otherwise be rendered. I need this to separate my game engine from my ...
2
votes
1answer
85 views

Issues with AABB on a platformer game

i'm facing an issue at the moment in my javascript/html platformer game that despite searching for this issue i can't solve. The problem is this: When i place two platforms next to each other and the ...
0
votes
2answers
58 views

Player fly's off of canvas when key pressed

I am fairly new to game development. I am programming a basic JavaScript canvas game. Whenever I press a key my player goes flying off of the canvas. Here is the controller code ...
0
votes
1answer
41 views

Can a .exe file ported from a program like NW.js or Electron be put console stores?

I'm early in development working on a game in HTML5/JavaScript canvas, and I wondering if porting the game with some HTML/JS to .EXE converter would allowed it to be posted on consoles? I think it ...
1
vote
1answer
85 views

How do I make sure everyone sees the same distance across different resolutions?

Hello game dev community. I have recently got into making games in a browser window, and me and a friend ran into a common problem. Let's say I have a game like diep.io, where users can control their ...
1
vote
1answer
43 views

Is there a way to automatically group tiles in a A* pathfinding grid to find the largest areas?

I'm making an RTS game using html canvas. I've made a program that randomly generates levels in order to test my pathfinding script. it divides the pathable blocks into squares so that you can apply A*...
0
votes
1answer
43 views

Canvas Infinite Map: How to have reappearing objects at static X,Y even when looping

I made a html canvas example of an infinite scrolling map with objects in static places. As you can see in the Fiddle below, when you move left with the Arrow Keys, you can see that the map does not ...
0
votes
1answer
133 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 ...
2
votes
1answer
731 views

Why are my animations flickering?

My animation is supposed to be used in my physics project I am making. I am using 10 millisecond setInterval() and setTimeout() ...
0
votes
1answer
194 views

Canvas HTML5 Top View -> Isometric

We are working in a simple MP strategy game using Node, Express and Sockets! I'm wondering if there's an easy approach to a transformation to make a Top View game into a 3D Isometric, without adding a ...
1
vote
3answers
193 views

Splice enemy array to destroy enemy (js game)

I am currently working on a basic space invaders game. So far I have created the enemies, a main character, and a laser beam, collision detection between enemy and bullet, however when my bullet ...
1
vote
3answers
124 views

Draw the HUD just once on the canvas

I am not able to draw only one HUD of my game on a separate canvas, so I do not have to redraw it to each frame, I have four functions, init(), render(), loop() and drawHUD(): init() is my function ...
1
vote
1answer
54 views

My Canvas has an image which I am using for my background but it is blocking my Camera from seeing my Game Scene

So I am not entirely sure how to explain this as I have not had any luck searching online and I'm sure this is a simple problem but I'm being stupid and can't see it. I have a Canvas which is for my ...
1
vote
0answers
155 views

Converting 2d cartesian coordinate-based map editor to rendering isometric view

I have been working on a 2d html5 canvas map editor. It is tile based, and originally it was just a top-down view on a grid of tiles (or empty spaces). I decided I wanted to convert it to render the ...
1
vote
0answers
113 views

Performance problems with scrolling html5 canvas for large tile-based game

I try programming a splix.io clone as an electron app and do the visualization via the html5 canvas. The movement across the tiles should look fluent like the original, so I target 60 frames a second. ...
4
votes
1answer
403 views

HTML5 Canvas - Drawing with Floats

I'm trying to implement a game where you have car moving along a line in HTML5 Canvas. Using a little bit of trigonometrie I managed to get the right x and y coordinates to add to the coordinates of ...
0
votes
1answer
358 views

Character collision detection on 2D array tileset based map

I have a very basic collision detection working, but not quite there yet. Now as I understand I'm only checking against the left top corner of the character for collision detection. And it only works ...
1
vote
1answer
31 views

How can I have more values in array on X axis than Y axis in my tilemap?

Following my old question Array of map data renders the map the opposite way after I got the answer to it and fixed my problem, I got another problem that occurs. If my ...
1
vote
0answers
34 views

How to fix html canvas sprite trail when moving to the right side

I have moving background on character movemet. When I move to the sides, I get stacked images, so I found out that I need to clearRect every time to avoid this. But clearing canvas leaves me with ...
0
votes
1answer
79 views

How to get character position in 2D map array by its position on canvas

My arrayMap consists of 0, 1 and 2. 0 is water and character is allowed to be on. 1 and 2 are ground and the collision should happen. To get and check what array number the character is standing on, ...
2
votes
1answer
100 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
2answers
386 views

HTML canvas how to create big game world and show only a part of it on canvas?

I originally created this question at stackoverflow but got no answers, so hopefully someone will be able to help me here. So for the first time ever I'm making a html canvas game. So far I came up ...
0
votes
1answer
34 views

Extract formula from vector drawing

I am creating a game with HTML5 canvas for browser. I want to create animations with many shapes, which would be drawed with canvas, not from spritesheets. The problem i face now is - to create ...
0
votes
1answer
22 views

My sprite is not listening to any keyboard keys

First time ever creating html canvas game. Once I finally got my sprite ant tiles drawn on the canvas, now I want to make my sprite interactive. Unfortunately, for some reason it is not working. I get ...
0
votes
1answer
68 views

Why my canvas isn't showing anything after I put code in the loop for tile map?

My canvas stop showing anything when I want to display a tile 25 times. No errors. Here is the code: ...
1
vote
1answer
229 views

Javascript/HTML5 canvas: Integrate scrolling tilemap with map server

I am playing around adapting the example code at Mozilla Dev Network: Square tilemaps implementation: Scrolling maps to fit with a server I wrote myself. There's a link to the original source code at ...
1
vote
0answers
12 views

How do I fix these touch events? Events respond if there are 2 fingers but not 1

I am making a simple game of mine mobile-friendly. The goal is to: Make character walk if a touchstart event is sensed on right half of screen. Stop character if a touchend event is sensed on the ...
1
vote
2answers
85 views

Why are my shapes teleporting to the center of the map?

I am making a Diep.io Clone, and everything was going smooth until I made a collision resolution system for when a shape collides with another shape. Instead of them bouncing off of each other, they ...