I have made a simple rocket with controls and I want it to stop when it hits the ground but for whatever reason the only number that I can use to test it against is 0. I have tried context.canvas.height - this.size.height because that is what I want it to be, but when I use that in the if statement the code does not work as desired. The goal is to be able to stop all of the rocket's movement when it hits the ground. Here is my JavaScript code
(function () {
// the canvas constants
const canvas = document.getElementById('game');
const context = canvas.getContext('2d');
// setting the canvas size
context.canvas.width = window.innerWidth;
context.canvas.height = window.innerHeight;
// the game constants
const ROCKET_SIZE = { width: 20, height: 30 };
const ROCKET_POSITION = { x: 200, y: 200 };
const GRAVITY = 2;
const THRUST = 5;
const AFTERBURNER_THRUST = 20;
const INERTIAL_DAMPING = 0.98;
// the rocket ship class
class RocketShip {
constructor(size, position) {
this.color = 'white';
this.size = size;
this.position = position;
this.angle = 0;
this.engineOn = false;
this.afterburner = false;
this.inertialDampeners = false;
this.rotatingLeft = false;
this.rotatingRight = false;
this.velocity = {
x: 0,
y: 0,
};
}
draw() {
// the center of the rocket
const triangleCenterX = this.position.x + 0.5 * this.size.width;
const triangleCenterY = this.position.y + 0.5 * this.size.height;
context.save();
context.translate(triangleCenterX, triangleCenterY);
context.rotate(this.angle);
context.lineWidth = 1;
context.beginPath();
// drawing the delta rocket
context.moveTo(0, -this.size.height / 2);
context.lineTo(-this.size.width / 2, this.size.height / 2);
context.lineTo(this.size.width / 2, this.size.height / 2);
context.closePath();
context.strokeStyle = this.color;
context.stroke();
// drawing the engine if it is active
if (this.engineOn) {
const fireYPos = this.size.height / 2 + 5;
const fireXPos = this.size.width * 0.25;
context.beginPath();
context.moveTo(-fireXPos, fireYPos);
context.lineTo(fireXPos, fireYPos);
context.lineTo(0, fireYPos + Math.random() * 50);
context.lineTo(-fireXPos, fireYPos);
context.closePath();
context.fillStyle = 'orange';
context.fill();
}
// drawing the afterburner if it is active
if (this.afterburner) {
const fireYPos = this.size.height / 2 + 5;
const fireXPos = this.size.width * 0.25;
context.beginPath();
context.moveTo(-fireXPos, fireYPos);
context.lineTo(fireXPos, fireYPos);
context.lineTo(0, fireYPos + Math.random() * 100);
context.lineTo(-fireXPos, fireYPos);
context.closePath();
context.fillStyle = 'red';
context.fill();
}
context.restore();
}
moveRocket() {
// convert angle from degrees to radians
const degToRad = Math.PI / 180;
// changing the position of the rocket
this.position.x += this.velocity.x;
this.position.y += this.velocity.y;
// moving the rocket to the other side of the screen
if (this.position.x > context.canvas.width) {
this.position.x = 0;
}
if (this.position.x < 0) {
this.position.x = context.canvas.width;
}
if (this.position.y > context.canvas.height) {
this.position.y = 0;
}
if (this.position.y < 0) {
this.position.y = context.canvas.height;
}
// stopping the rocket if it hits the ground
if (this.position.y === context.canvas.height - this.size.height) {
this.velocity.y = -GRAVITY / 100;
this.velocity.x = 0;
}
// turning the rocket
if (this.rotatingLeft) {
this.angle -= degToRad;
}
if (this.rotatingRight) {
this.angle += degToRad;
}
// accelerating the rocket if the thrust is on
if (this.engineOn) {
this.velocity.x += (THRUST / 100) * Math.sin(this.angle);
this.velocity.y -= (THRUST / 100) * Math.cos(this.angle);
}
// accelerating the rocket if the afterburner is on
if (this.afterburner) {
this.velocity.x += (AFTERBURNER_THRUST / 100) * Math.sin(this.angle);
this.velocity.y -= (AFTERBURNER_THRUST / 100) * Math.cos(this.angle);
}
// decelerating the rocket if the inertial dampeners are on
if (this.inertialDampeners) {
this.velocity.x *= INERTIAL_DAMPING;
this.velocity.y *= INERTIAL_DAMPING;
}
// updating the rocket's velocity due to gravity
this.velocity.y += GRAVITY / 100;
}
}
const rocket = new RocketShip(ROCKET_SIZE, ROCKET_POSITION);
// handling the keyboard events
function handleKeyInput(event) {
const { keyCode, type } = event;
const isKeyDown = type === 'keydown';
if (keyCode === 37) {
rocket.rotatingLeft = isKeyDown;
}
if (keyCode === 39) {
rocket.rotatingRight = isKeyDown;
}
if (keyCode === 38) {
rocket.engineOn = isKeyDown;
}
if (keyCode === 32) {
rocket.afterburner = isKeyDown;
}
if (keyCode === 40) {
rocket.inertialDampeners = isKeyDown;
}
}
// resizing the screen
function onResize() {
context.canvas.width = window.innerWidth;
context.canvas.height = window.innerHeight;
}
function draw() {
// drawing space
context.fillStyle = '#111';
context.fillRect(0, 0, canvas.width, canvas.height);
rocket.moveRocket();
// drawing the rocket
rocket.draw();
// repeating the draw function
requestAnimationFrame(draw);
}
// adding event listeners to the webpage
document.addEventListener('keydown', handleKeyInput);
document.addEventListener('keyup', handleKeyInput);
document.addEventListener('resize', onResize);
// starting the game
draw();
})();
My HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Rocket</title>
<link rel=stylesheet href="styles/rocket2.css" >
</head>
<body id="body">
<canvas id="game"></canvas>
<script src="pscripts/rocket/rocket.js"></script>
<button class="info-btn">
Hello World
</button>
</body>
</html>
My CSS:
#body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #111;
}
#game {
position: relative;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.info-btn {
opacity: 1;
position: absolute;
top: 2vh;
right: 2vw;
color: white;
background-color: dimgrey;
font-family: "Agency FB";
font-size: 2vh;
cursor: pointer;
}
.info-btn:hover {
background-color: #4f4f4f;
color: #c7c7c7;
}
.info {
background-color: #4f4f4f;
padding: 2%;
width: 98%;
height: 98%;
}
The code that I have been trying to use to stop the rocket when it reaches context.canvas.height - this.size.height is:
if (this.position.y === context.canvas.height - this.size.height) {
this.velocity.y = -GRAVITY / 100;
this.velocity.x = 0;
}
I am trying to check if the y position of the rocket is equal to the canvas height - the height of the rocket and if so I set the y velocity to the opposite of gravity over 100 so that it has no movement and I set the x velocity to 0.
Thank you to anyone who reads this and tries to help me.