Our fighting game is going to start off with two rectangles: one being our player, one being our enemy. We'll learn how to set up these characters properly using classes and object oriented programming, then add movement with velocity and a gravity implementation.
Premium Features
Download Video
Create Player and Enemy
Published a year ago
Comments
Want to participate?
Create a free Chris Courses account to begin
Login
a
andero posted 10 months ago
Are you able to suggest a way of pushing the sprite rectangles up when the browser window is resized? I know you had a fixed the canvas.height and canvas.width values in the first video of this series, but I was wondering how to make it responsive.
I found this line of code
function mainLoop() { // Check if the canvas size matches the window size if (canvas.width !== innerWidth || canvas.height !== innerHeight){ canvas.width = innerWidth; // resize canvas canvas.height = innerHeight; // also clears the canvas } }and inserted it at the bottom of the code ( i used either one of line 7 or 8)
1 function animate(){2 window.requestAnimationFrame(animate);c.fillStyle = 'black';3 c.fillRect(0,0,canvas.width, canvas.height);4 player.update(); 5 enemy.update();6 // addEventListener("resize", mainLoop );7 // window.requestAnimationFrame(mainLoop);8 }animate();and the canvas is responsive to the window size, but the sprites, being coded to drop to the bottom of the canvas don't reposition themselves when the browser window is resized from the bottom up.
Are you able to point to where I can find answers to solve this?
0
chris posted 10 months ago
Hey Andero, would you be able to post a CodePen or live version of your game so I can see how things are going with responsiveness? Any screenshots with annotations would help as well if possible!
0
hi chris my code doesn't work when i try to create the player i cant it just shows the canvas and nothing else im using visual studio idk if thats the problem