помогите научиться реализовывать стрельбу, как на этой гифке
не смог найти в гугле, что-нибудь путное по этому поводу
var canvas = document.getElementById("d1");
var ctx = canvas.getContext("2d");
// кнопки
var pressedLeft = false; // лево
var pressedRight = false; // право
var pressedSpace = false; // пробел
// параметры игрока
var playerWidth = 20;
var playerHeight = 20;
var playerX = (canvas.width - playerWidth)/2;
var playerY = canvas.height - 25;
//параметры пули
var bulletWidth = 5;
var bulletHeight = 5;
var bulletX = playerX;
var bulletY = playerY;
document.addEventListener("keydown", KeyDown, false);
document.addEventListener("keyup", KeyUp, false);
// кнока нажата
function KeyDown(e) {
if(e.keyCode == 37) {
pressedLeft = true;
}
else if(e.keyCode == 39) {
pressedRight = true;
}
else if(e.keyCode == 32) {
pressedSpace = true;
}
}
// кнопка не нажата
function KeyUp(e) {
if(e.keyCode == 37) {
pressedLeft = false;
}
else if(e.keyCode == 39) {
pressedRight = false;
}
else if(e.keyCode == 32) {
pressedSpace = false;
}
}
// рисуем игрока
function drawPlayer() {
ctx.beginPath();
ctx.fillStyle = "black";
ctx.fillRect(playerX, playerY, playerWidth, playerHeight);
ctx.fill();
ctx.closePath();
}
// рисуем пулю
function drawBullet() {
ctx.beginPath();
ctx.fillStyle = "blue";
ctx.fillRect(playerX, playerY, bulletWidth, bulletHeight); // не уверен что это правильная строчка
ctx.fill();
ctx.closePath();
}
function draw() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
drawPlayer();
drawBullet();
if(pressedLeft && 0 < playerX) {
playerX -= 5;
}
if(pressedRight && playerX < canvas.width - playerWidth) {
playerX += 5;
}
}
setInterval(draw, 10);
#d1 {
border: 1px solid black;
}
<canvas id="d1" width="250" height="250" ></canvas>
стрельба должна происходить по нажатию на пробел.
Заранее спасибо.