A new feature of HTML5, allowing Javascript apps to have a drawing surface in the browser.
0
votes
0answers
10 views
Isometric simple sorting with xdim and ydim [duplicate]
I have a simple isometric sorting system with this function (code is in Typescript/Javascript) :
public Sort(a: PIXI.Sprite, b: PIXI.Sprite) {
return ((a.IsoZ - b.IsoZ) == 0 ? (a.TileZ - b.TileZ =...
-2
votes
0answers
27 views
Drawing 2d tilemap of a big world in javascript
I'm want to make a 2d game with a big world built with a tilemap.
I will obviously only want to show a small part of the world at a time.
Is it as easy as only drawing the tiles within the view port ...
0
votes
1answer
37 views
A logic error. canvas: balls physics, bounce
Hi I was making a program that simulate a bunch of balls bouncing, but the problem is some balls got stuck to the floor. Since it's a logic error, it is kind of difficult to find. Can someone help, I ...
1
vote
1answer
28 views
Clearing just the object, not the whole canvas, leaving an uwanted trail
I'm working on a platform game via poo.
I heard is more efficient to clear just the object you're drawing instead of clearing the whole canvas. So I'm working on this, and all goes well when the ...
2
votes
0answers
25 views
Optimising my Node.js/Js/Socket shooter game
So here I made a little shooter game just to play around with and on my pc it runs fine but for people with worse internet/less powerful computers (e.g at school/few friends of mine) it is quite laggy ...
0
votes
0answers
24 views
How to have the car follow the created path?
I have developed a game where I move a car towards a human in a diagonal path. Now I want the car to follow a route, that is, by taking some turns and move towards the target instead of going directly ...
0
votes
1answer
13 views
How to make the image move forward properly when rotated in my HTML5 game?
I am just trying to make a simple 2D racing game using canvas. It uses the W,S,A, D keys to move the car. The W key should take me forward and the A and D keys will turn each way. I want the car to ...
1
vote
1answer
49 views
Checking if bullet collides with enemy when I know the start X & Y, the angle, the speed and dist traveled of the bullets
This is the bullet I create when a player clicks to attack
var angInRadians = Math.atan2(data.y - playerArr[i].y, data.x - playerArr[i].x);//data.y & data.x is mouseY and mouseX
var temp = ...
0
votes
0answers
25 views
How to make the car move in my path in canvas
I have developed a game where currently I move a car towards a human in a diagonal path.Now I wanted the car to follow a route.So I followed some tutorials on pathfinding.So my initial step is to ...
1
vote
1answer
101 views
How to automate the game
I am new to game development and I have a game where the car moves and picks the monster.But now I want to automate the game so it looks like it is played automatically.
The control keys are given by ...
2
votes
1answer
60 views
How to blend the surface with HTML5 canvas?
I can simply blend the surface in GameMaker using these codes:
//colour with which to blend the surface.
draw_surface_ext(index, x, y, xscale, yscale, rot, colour, alpha);
or set "the Fade to a ...
0
votes
1answer
14 views
How to change the color of an image when getting points
Currently I have a car game which I give points when a car touches the monster.Now extra to that I also wanted to change the color of the car or replace the car image with a different color car image ...
0
votes
0answers
33 views
Is it legal to have a self-made Tetris clone on a website? [duplicate]
I wrote a javascript tetris clone for a school project. Now I have to uplaod it but I'm not sure if could get problems for copying the game concept and name.
0
votes
1answer
58 views
How to turn the car when pressing left or right key
I am new to canvas and developing a game where a car moves straight and now I want to turn the car to anti clockwise when the left key is pressed and clockwise when right key is pressed.
Currently I ...
0
votes
0answers
24 views
Line following the camera
How can I make a line that follows a camera view? See the example in the image:
(The red line is the one I want to generate, and the blue dot is the camera.)
I have this code that generates the line,...
1
vote
1answer
81 views
Throw ball - distance and force
I have a question, I need a formula to calculate the distance and a force based on the speed that drags the finger up on the phone. And is there any way I can get a look? And also shows the trajectory ...
0
votes
1answer
36 views
BufferedImage canvas is null
I'm sorry if this isn't the right place for this post, but I don't know where to go.
I'm trying to make a simple game loop but it's already failing
package main;
import javax.swing.JPanel;
import ...
1
vote
2answers
81 views
Keep balls in the box and prevent intersection
I'm coding a one-dimentional elastic collision animation (demo) with balls. I've used fixed position values when testing and now I want to use random values.
The problem with random values is that ...
0
votes
0answers
41 views
Choosing a data structure for a group of static (almost) thousands of objects on HTML5 canvas
I have this requirement to implement a data structure for a group of thousands of displayable objects, on HTML5 canvas. Something like a particle system. The objects are randomly spread on the map. ...
0
votes
0answers
97 views
Adding multiple animated sprites on canvas make the game FPS drop sharply
I am using PIXI.js to build a html5 canvas game. Although this is PIXI.js specific question I think this may happen very often in HTML5 canvas games.
I have placed hundreds of static sprites in my ...
0
votes
1answer
156 views
How can I scale/zoom to a point in canvas in the game?
I am using html5 canvas to build a MMO game. When I scale my background by default it scales to (0, 0) which is the top left corner of the background. If I have other sprites on the screen they all ...
1
vote
3answers
138 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 ...
0
votes
2answers
145 views
javascript game camera that follows my player
I am experimenting with game developement here but my player disapears my player is alowed to just walk of the screen and never be seen again so i was wondering if someone could help me with adding a ...
1
vote
2answers
78 views
How can I increase framerate, when drawing tiles to a HTML canvas?
I am using the HTML 5 canvas to make a simple platformer game. I am currently drawing the tiles using a for loop that runs through a list of tiles and checks if they will be drawn to the screen.
for (...
1
vote
1answer
360 views
Javascript game engine that can work 'seamlessly' with react-native [closed]
I have experience with Unity, but I don't like the fact that Unity compiles your game directly into APK (or IOS equivalent). I want to modify the game to provide chat interface for multiplayer mode ...
0
votes
0answers
36 views
How to scale the screen in HTML5 canvas like “Circle Push”?
I would like to implement a scaling feature in my game like that of the game Circle Push which scales the map smoothly and I can hardly notice the changes when it scales. In Circle Push it works like ...
0
votes
1answer
28 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 ...
-1
votes
1answer
99 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
97 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
63 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 ...
2
votes
1answer
415 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
102 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
101 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
57 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
251 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 ...
2
votes
1answer
87 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
28 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
33 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
218 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
250 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
83 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
171 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
86 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
67 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
48 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 ...
1
vote
2answers
99 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 ...
3
votes
1answer
885 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 ...
2
votes
3answers
121 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
78 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
176 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 ...
