I'm creating a canvas game and I'm working on the shooting aspect of the game. I've created a player that can move and a shooting function but I have two issues:
I would like to click in the canvas and have a projectile send to the click location. What is happening is that the click trigger location is disconnected from the canvas so that if I click around the top left of the page I can aim where I shoot.
I have have enabled movement with the player but I'm not sure how to link the movement of the player and update the origin of the projectile. I have set up movement functions for both player and projectile but I'm not sure where I'm going wrong.
Any help would be greatly appreciated!
https://codepen.io/blacksunmachine/pen/mdmxLxg
const canvas = document.querySelector("canvas");
const context = canvas.getContext("2d");
canvas.width = innerWidth / 2; // this takes up the whole page horizontally
canvas.height = innerHeight / 2; // this takes up the whole page verticallly
class Player {
constructor(x, y, radius, color) {
this.x = x;
this.y = y;
this.radius = radius;
this.color = color;
}
draw() {
context.beginPath();
context.arc(this.x, this.y, this.radius, 0, Math.PI * 2, false);
context.fillStyle = this.color;
context.fill();
}
moveLeft() {
this.x -= 30;
if (this.x <= 0) {
this.x = 0;
}
}
moveRight() {
this.x += 30;
if (this.x >= canvas.width) {
this.x = canvas.width;
}
}
moveUp() {
this.y -= 30;
if (this.y <= 0) {
this.y = 0;
}
}
moveDown() {
this.y += 30;
if (this.y >= canvas.height) {
this.y = canvas.height;
}
}
}
// player position
let newPlayer1 = new Player(canvas.width / 2, canvas.height / 2, 10, "blue");
class Projectile {
constructor(x, y, radius, color, velocity) {
this.x = x;
this.y = y;
this.radius = radius;
this.color = color;
this.velocity = velocity;
}
draw() {
context.beginPath();
context.arc(this.x, this.y, this.radius, 0, Math.PI * 2, false);
context.fillStyle = this.color;
context.fill();
}
update() {
this.draw();
this.x = this.x + this.velocity.x;
this.y = this.y + this.velocity.y;
}
moveLeft() {
this.x -= 30;
if (this.x <= 0) {
this.x = 0;
}
}
moveRight() {
this.x += 30;
if (this.x >= canvas.width) {
this.x = canvas.width;
}
}
moveUp() {
this.y -= 30;
if (this.y <= 0) {
this.y = 0;
}
}
moveDown() {
this.y += 30;
if (this.y >= canvas.height) {
this.y = canvas.height;
}
}
}
function animate() {
requestAnimationFrame(animate);
context.clearRect(0, 0, canvas.width, canvas.height);
newPlayer1.draw();
projectiles.forEach((projectile) => {
projectile.update();
});
}
const projectile = new Projectile(
canvas.width / 2,
canvas.height / 2,
10,
"red",
{
x: -1,
y: -1,
}
);
const projectiles = [];
// need to link shooting with movement of the character
addEventListener("click", (event) => {
console.log(event)
const angle = Math.atan2(
event.clientY - canvas.height / 2,
event.clientX - canvas.width / 2
); // detemine direction of click
console.log(angle); // show where is being clicked
const velocity = {
// speed and direction of click
x: Math.cos(angle) * 20,
y: Math.sin(angle) * 20,
};
// from original position (in the middle of the screen) move a projectile with velocity
projectiles.push(
new Projectile(canvas.width / 2, canvas.height / 2, 10, "red", velocity)
);
});
// difference in X and Y when moving the character - not using this at the moment
// let deltaX = 0;
// let deltaY = 0;
// movement keys for player 1
window.addEventListener("keydown", handleKeyDown);
function handleKeyDown(event) {
switch (
event.keyCode // position of letters might change when on different layouts - same in every language
) {
case 37: // left
newPlayer1.moveLeft();
projectile.moveLeft()
break;
case 38: // up
newPlayer1.moveUp();
projectile.moveUp()
break;
case 39: // right
newPlayer1.moveRight();
projectile.moveRight()
break;
case 40: // down
newPlayer1.moveDown();
projectile.moveDown()
break;
default:
console.log("you cannot move player 1 like that");
}
console.log(event);
}
animate();
