HTML Canvas Shooting Game: не съемки там, где я нажимаю, и не связан при перемещении игрока ⇐ CSS

[Anonymous]

Я создаю игру на холсте, и я работаю над аспектом стрельбы в игре. Я создал игрока, который может двигаться, и функцию съемки, но у меня есть две проблемы: < /p>

Я хотел бы щелкнуть в холсте и отправить снарядом в местоположение. Что происходит, так это то, что местоположение триггера щелчка отключено от холста, так что, если я нажимаю на верхнюю левую часть страницы, я могу направить, где я снимаю. Я настроил функции движения как для игрока, так и для снаряда, но я не уверен, где я ошибаюсь.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 vertically

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 = canvas.width) {
this.x = canvas.width;
}
}
moveUp() {
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 = canvas.width) {
this.x = canvas.width;
}
}
moveUp() {
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();


Подробнее здесь: https://stackoverflow.com/questions/685 ... hen-moving