New answers tagged

1

If I understand correctly, checkCollision should give you the direction in which the player can move. So you are calling it before the motion. However, you are checking if the character is already colliding, here: if (Math.abs(tenantDOM.x - childrenDOM.x) * 2 < (tenantDOM.width + childrenDOM.width) && Math.abs(tenantDOM.y - childrenDOM.y) * 2 &...


0

If you right-click on a game on this site, you get this pop-up menu: Clicking on "EmulatorJS v.0.4.24" takes you to this site explaining the JavaScript video game console emulator they use. So, it seems like the information about how this is done is at your fingertips. What is it that you need to know that's not explicitly described here?


0

Crisp edges css may help. And drawing pixel text from a sprite sheet will be the most crisp vs fillText. canvas { image-rendering: -moz-crisp-edges;image-rendering: -webkit-crisp-edges;image-rendering: pixelated;image-rendering: crisp-edges; border:1px solid #d3d3d3; background-color: #f1f1f1; width: 75%; height: 75%; ...


0

An easy way would be to think of the circle as a rectangle still, so just have a circle displayed, but still be rectangle colliding. And then instead of preventing movement, move first, holding the updated x,y somewhere that is not the final x,y, and then apply that movement if there is not collision, if there is adjust, which you're doing. But let the ...


0

WebGL is not really needed for sprite tilemaps at this point in time. The overhead for WebGL would slow a sprite based web game down. One sprite sheet that has all image data, animations, and everything loaded as an Image, drawn from directly to canvas, that's all that's needed.


1

You don't really need physics. Here is a top down shooter example that you can learn from with code that you can also re-use. https://www.tabageos.com/examples/topDown360Shooter/ It's tile based. For arcs one would utilize geometry. In that example the enemies are somewhat set up to be doing what you describe, for example at the bottom of the code, in the ...


0

You can draw the fonts to the canvas instead, which also helps with positioning and scale. Use a pixel font, copy from an image of the font, letter by letter for what you want to type, then you can just scale as normal. When needing to change fonts, simply copy from a different font image.


Top 50 recent answers are included