JavaScript Canvas Shooting

Question

help to learn how to implement the shooting, as on this gif

could not find in google something worthwhile about this

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>

Shooting should occur by pressing the spacebar.

Thank you in advance.

Darth darth 12k 2 sixteen 45 · Accepted Answer · 2018-05-14T10:44:59

Like that:

 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 == 32) { pressedSpace = true; } 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 == 32) { pressedSpace = false; } 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(); } const bullets = []; class Bullet { constructor(){ this.x = playerX; this.y = canvas.height - 25; bullets.push(this); } draw(){ this.y--; if(this.y < 0){ bullets.splice(bullets.indexOf(this)); } // fillRect не требует openPath! ctx.fillStyle = "blue"; ctx.fillRect(this.x, this.y, bulletWidth, bulletHeight); } } function draw() { ctx.clearRect(0, 0, canvas.width, canvas.height); drawPlayer(); // рисуем пули bullets.forEach(bullet => bullet.draw()); if(pressedLeft && 0 < playerX) { playerX -= 5; } if(pressedRight && playerX < canvas.width - playerWidth) { playerX += 5; } if(pressedSpace ) { new Bullet(); } } setInterval(draw, 10);

 #d1 { border: 1px solid black; }

 <canvas id="d1" width="250" height="250" ></canvas>

In order to be just like on the gif, you need to add to the player the reload time to igerit bullets only if the player is charged (charging takes place after a timeout after the shot)

Answer 2 · 2018-05-24T13:10:08

 var canvas = document.getElementById("d1"); var ctx = canvas.getContext("2d"); var pressedSpace = false; var pressedRight = false; var pressedLeft = false; document.addEventListener("keydown", keyDown, false); document.addEventListener("keyup", keyUp, false); function keyDown(e) { if(e.keyCode == 32) { pressedSpace = true; } else if(e.keyCode == 37) { pressedRight = true; } else if(e.keyCode == 39) { pressedLeft = true; } } function keyUp(e) { if(e.keyCode == 32) { pressedSpace = false; } else if(e.keyCode == 37) { pressedRight = false; } else if(e.keyCode == 39) { pressedLeft = false; } } var bullet = []; var player = { x: (canvas.width-20)/2, y: canvas.height - 25, pW: 20, pH: 20, timer: 0, bullets: 0, draw: function() { ctx.beginPath(); ctx.rect(this.x, this.y, this.pW, this.pH); ctx.fillStyle = "black"; ctx.fill(); ctx.closePath(); } } var dBullet = { draw: function() { ctx.beginPath(); ctx.rect(bullet[i].x, bullet[i].y, 5, 5); ctx.fillStyle = "red"; ctx.fill(); ctx.closePath(); } } function draw() { ctx.clearRect(0, 0, canvas.width, canvas.height); for (i = 0; i < bullet.length; i++) { bullet[i].x += bullet[i].vx; bullet[i].y -= bullet[i].vy dBullet.draw(); } player.timer++; if(player.timer % 12 == 0) { player.bullets = 0; } if(pressedSpace) { if(player.bullets < 5) { bullet.push ( { x: player.x + player.pW/2 - 5/2, y: player.y, vx: 0, vy: 10, } ); player.bullets++; } } player.draw(); if(pressedRight && 0 < player.x) { player.x -= 3; } if(pressedLeft && player.x < canvas.width - player.pW) { player.x += 3; } } setInterval(draw, 1000/60);

 #d1 { border: 1px solid black; }

 <canvas id="d1" width="300" height="300"></canvas>

JavaScript Canvas Shooting

2 answers 2

More articles: