A new feature of HTML5, allowing Javascript apps to have a drawing surface in the browser.
0
votes
1answer
20 views
Rotated canvas sprite not drawing properly
First, sorry for my english. Said that: Recently I began to study JavaScript and like a way to consolidate what I learned I decided to make a simple video game with canvas and javascript: kind of ...
0
votes
0answers
12 views
canvas tile engine optimal drawing technique
I'm building a top down racing game in HTML5. I'm currently experimenting with performance. I currently have about 8 layers that I draw on the canvas with the car in the middle and 4 background and 4 ...
0
votes
1answer
44 views
How to connect circle nodes using arrows?
I'm trying to design a simple game where a series of numbered circles can be connected by arrows (like mobile phone pattern locks).
I have these circles designed here: https://jsfiddle.net/sarmadm/...
0
votes
1answer
26 views
Camera movement, Draw grid
If I have a 20x10 grid (640x320) where tiles are 32x32
The grid are rendered:
for (var y = 0; y < 10; y++) {
for (var x = 0; x < 20; x++) {
var tileX = Math.round(Camera.x / 32);
...
0
votes
1answer
40 views
Perlin noise terrain issue when scrolling
I am generating a terrain in Javascript canvas using this js project for the Perlin noise. I have an array of points, and when one point leaves the left-hand-side of the window, it is removed, and a ...
1
vote
1answer
70 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 ...
0
votes
3answers
45 views
How to make space invaders destructible scenery and conform it to a shape?
We all like the bases that can be destroyed by chunks being split out,
I originally implemented it by making a rectangle filled with individual squares (2x2 pixel size CANVAS rects) that would ...
0
votes
2answers
51 views
How to draw an image on canvas without html
I'm trying to add a sprite to the canvas of my game. However, I don't want to use an image tag. However, I haven't found a way to do this no matter how hard I searched. Something like:
var image = '...
0
votes
1answer
34 views
Character movement resetting x & y position in HTML5 game
I have an HTML5 game I'm working on and I'm at the point where I'm trying to make the character move. For the most part, the character(A rectangular square) is moving, but it's not moving from its ...
1
vote
0answers
53 views
Creating an Isometric tile map with HTML5
I'm trying to create an isometric tile map using HTML5 Canvas. Everything I've found online points me towards using a pre-built engine. I'd like to learn how to do this without using an engine. Is ...
1
vote
1answer
44 views
Infinite space 2d map - how to implement in js
Im not exactly sure how to implement this in JS.
So I want to have a 2d infinite map, but not tiled. The coordinates are there only so that if you are travelling around space you know in what ...
0
votes
1answer
21 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: ...
0
votes
1answer
26 views
Line rect intersection
I've been reading Timothy Wright's "Fundamental 2D Game Programming With Java". I'm trying to apply its principles to a Lunar Lander game - it's a JSFiddle for now, and can be found here.
The problem ...
0
votes
1answer
55 views
JavaScript - Updating a canvas real-time… from server-side or client-side
I have this 2D tilemap game 13x13 viewport (169 tiles drawn on canvas at a time) of a 150x150 map. Each tile is 32x32px. Obviously I only update the 13x13 viewport...
I want to update a canvas in ...
0
votes
2answers
56 views
HTML canvas, Node WebSocket and multiplayer game like slither.io. How to send visual data over websockets?
Where to start creating a multiplayer game like slither.io, agar.io, etc.
I need only learn how to draw live positions and other data of all players into one fullscreen HTML5 canvas with update ...
0
votes
1answer
48 views
How do I make an HTML5 canvas tiled map with tiles which have other than squared edges?
I'm creating an HTML canvas map and I'm trying to have the edges of the tiles not appear square, as in the tiles merge in to each other. I've scoured the internet for hours but can't seem to find ...
0
votes
1answer
42 views
2d animation on html5 canvas using a vector and speed
Im moving a starship from one location to the other. In creating a vector, normalize and magnitude it.
Lets assume my vector looks like this
Vector
x: 156,
y: -90,
m: 180.0000000546,
...
-1
votes
1answer
41 views
How to detect collisions of objects in two different arrays?(html canvas)
I am making a canvas game where you shoot at an endless amount of enemies. My problem is that the I am not sure how to make the objects from the bullets array collide with those of the enemy array. ...
-2
votes
2answers
58 views
Center of Image whose height, width and position are known
I have been struggling to find the center of an image(rectangle). I have following data with me:
width: w,
height: h,
position: (x,y)
My image is an object on canvas. I am using KonvaJS framework. ...
4
votes
1answer
34 views
Javascript canvas rotating single sprite instead of entire context
I am trying to recreate asteroids, but I need the ship to rotate based on user input. I have w,a,s,d keys set to change the [pos] of the ship by 1 in the corresponding direction, but now, I need to ...
0
votes
0answers
24 views
How Do I Create A Ga Sprite From An HTML5 Canvas?
I am attempting to develop a method of procedurally generating images for a game that I am making with Ga. The actual generation is not relevant here; my question is how do I turn an image on an HTML5 ...
1
vote
2answers
71 views
Object have the same “speed” all time JavaScript
I try to create a 2D game with a big map and multiple objects. The player is always in the middle of the screen and all the other objects is moving around so it feels like a big map.
I want the ...
2
votes
1answer
208 views
Dealing With Multiple requestAnimationFrame Calls
I am having issues with requestAnimationFrame calls stacking on top of each other. I am developing a platformer game, which has three separate functions that need animating (main menu, cutscene, in ...
0
votes
0answers
83 views
How to maximum height and body to move in projectile motion( on Canvas)
**Really.anybody Know't this question's Answer? **
I asked this question before, but I think I worded it badly and thus did not get any response. I am trying to use an projectile motion in my game. ...
2
votes
3answers
106 views
Limit access to socket end point
I'm developing a multiplayer canvas game based on socket.io and box2d physics engine. Is there a way to limit connections to my socket endpoint and only allow connections from a specific domain?
...
0
votes
1answer
57 views
Detecting collision of multiple moving objects
I have wrote a simple game that has a 100 balls bouncing off the borders of the canvas. Each ball is an instance of ball class function that has the following definition:
var cnv = document....
0
votes
1answer
90 views
js canvas tiled map - for loop, while, or matrix
I am making a top-down view tiled map in canvas, where player is always in the middle of the screen, and map scrolls depending on where you go, like in moba games. I also want it to loop infinitely in ...
-1
votes
1answer
97 views
How to fill a canvas with triangles that are seemingly random?
Given a canvas say, 1000 X 1000 unit. I would like to fill the canvas with triangles. The triangles can be of any type right angle, equilateral...etc. To avoid big chunks of triangles lets say all ...
2
votes
1answer
60 views
Simulating elastic ball collisions quickly escalates to disaster
I'm trying to learn HTML canvas and was working on a basic physical simulation, where a number of balls are drawn and set in motion, and the program simulates them colliding and bouncing off the walls ...
1
vote
0answers
89 views
Pixel by pixel collision detection pinball
I'm currently working on a Pinball game using the HTML5 Canvas and JavaScript. Right now I'm getting a hard time with the pixel by pixel collision, which is fundamental because of the flippers.
Right ...
4
votes
1answer
110 views
SDD Inverse Kinematics with constraints
I have a question regarding my quest on onderstanding IK solvers.
After viewing this movie on YouTube: https://www.youtube.com/watch?v=MvuO9ZHGr6k I started recreating it with JavaScript. Just 2d on ...
1
vote
2answers
124 views
Canvas slowly degrades in performance after a while
I was creating a simple game and was shocked to see how the performance started to degrade. It never happened to me before, most probably because I use images and not the context drawings. So I used ...
1
vote
0answers
34 views
How to fix my physics functions so they perform at the same speed across different FPS's
My jump function looks like -
self.jump = function(){
//do the initial jump
if (self.pressingUp && self.onGround) {
//this just gets it off the ...
1
vote
1answer
116 views
Fastest way to render isometric world with moving entities?
I've got an isometric diamond-shaped world.
The world consists of isometric planes like rooms. The walls and floors of the rooms and all obstacles and items in the rooms are isometric entities.
So I ...
0
votes
0answers
12 views
Clicking an entity with transformation
I am trying to understand how best to implement a click detection function in a 2d JavaScript game.
I can demonstrate using a simple example of two square 'entities' which can be selected when ...
0
votes
2answers
104 views
How to improve my graphics on HTML5 canvas?
I am making my own army fighting simulator. Designer have made an 3D model with Blender and textured it, made animations. I have made sprites from that model and did programming. But the result is not ...
0
votes
0answers
16 views
Move ball through a direction angle in android canvas [duplicate]
I am building a simple game in android.
I am successful in first step where I draw a ball in canvas in touch point.
Now I am trying to move it from an initial point A (center) through the touch point ...
1
vote
2answers
63 views
Updating code to include states
The Problem
I am having a problem in that I am finding it hard to understand how to update my current code so that it uses states. I am creating a game, the game has a menu, each page in the game ...
0
votes
0answers
65 views
Chrome Canvas bug on Mac OS X when switching spaces?
I have a simple Breakout clone created using the <canvas> element and the 2d context.
Whilst playing the game in Google Chrome (version: 49.0.2623.87 (64-bit)) if I switch spaces within Mac OS ...
0
votes
2answers
457 views
How can I move an object around a canvas in a random direction at random times?
I am currently trying to move an object (circle ball) around the canvas in a random direction.
I have already written the code for the wall collisions so the ball bounces back into canvas when the ...
1
vote
1answer
120 views
How should I efficiently clear and redraw my canvas with lots of animated sprites?
My current solution is to clear the entire canvas and redraw all sprites on every requestFrame(). This works but feels inefficient:
I only need to clear the part of the canvas made invalid by ...
0
votes
1answer
15 views
Mousedown event not performing drawImage
I've been working on the basic gameplay. I'm to a point where I think it should draw a card in the quadrant clicked/tapped, but nothing is happening. I can't see what's wrong. Please help. My only ...
0
votes
1answer
52 views
Why are my canvas drawings larger than the actual image?
For the following page source, I've finally gotten a grip on rendering the cards. I'm puzzled why they appear about 2.5x larger on the canvas.
<html>
<head>
<style>
...
0
votes
1answer
117 views
How to display a lot of small objects using WebGL?
Introduction
The game scene contains a lot of 10x10 pixel elements: for 1980x1200 px. screen the number of elements on the scene can vary from 0 to 23760 (elements cannot intersect).
The live ...
0
votes
1answer
34 views
HTML Canvas Makes Everything Bolder On Right Side
For some strange and sudden reason, my canvas seems to make lines thicker and darker on the right ~1/4-ish. I have tried multiple browsers and different computers and they all have the same rendering ...
1
vote
1answer
65 views
how to follow(center) a box inside canvas element
If inside a canvas I draw a box, and the I add arrows to move it, the box will eventually be out of my reach since it goes out the border and I cant see it. How could I follow the box so that it is ...
4
votes
1answer
127 views
Fixed Time Step Flutter
I've seen a lot of questions about this problem, but really no solution. Hopefully I can explain the issue well enough that I can get some sort of closure on this problem.
I'm using a Fixed Time ...
0
votes
0answers
141 views
Using canvas graphics instead of traditional sprites in phaser
I'm trying to learn Phaser (total beginner with mild JS experience) and I'm following tutorials and such where everything is using sprites. I'm trying to get by with basic canvas shapes instead of ...
0
votes
0answers
115 views
How to get the angle an object is travelling at
I'm trying to figure out how to get the angle an object is moving at, but have ran into a few problems. My player object is moved by rotating the entity left and right by using the left and right ...
3
votes
0answers
89 views
Check if a point is touching a user drawn curve in HTML5 canvas
I am having trouble detecting whether a ball is colliding with a red curve. The curve below is an example of what a user may draw on to the canvas. I can't think of any fast ways to detect collision ...
