[英]How to calculate the angle to shoot a bullet in order to hit a moving target?
[英]How can I shoot a moving bullet?
嗨,我是這里的新手,也是編程界的新手,所以我有一個小問題:我要用JS制作一個簡單的游戲引擎,因為我想復制原始的《太空入侵者》游戲,問題只是子彈不是移動,只會出現和消失,就像激光一樣。 我想擁有一顆動人的子彈。 有人可以幫助我嗎? PS:我不想在這里使用面向對象的編程,我想將整個游戲制作在一個.js文件中。
console.log('GAME LOADED//SPACE INVADERS');
////////////////////////////////////////////////
let screen = document.createElement('canvas');
screen.width = 800;
screen.height = 900;
document.body.appendChild(screen);
document.addEventListener('keydown', keyDown, false);
document.addEventListener('keyup', keyUp, false);
let ctx = screen.getContext('2d');
////////////////////////////////////////////////
let x = screen.width / 2;
let y = screen.height / 2;
let bulletY = screen.height - 20;
let bulletSpeed = 10;
let bulletLifeTime = 3;
let size = 20;
let sWidth = screen.width;
let sHeight = screen.height;
let columns = screen.width / size;
let rows = screen.height / size;
let speed = 5;
let right = false;
let left = false;
let up = false;
let down = false;
let shot = false;
let gravity = 10;
let jumpForce = 40 ;
/////////////////////////////////////////////////
function keyDown() {
switch(event.keyCode) {
case 39: right = true;
break;
case 37: left = true;
break;
//case 40: up = true;
//break;
//case 38: down = true;
//break;
case 32: shot = true;
break;
}
}
function keyUp() {
switch(event.keyCode) {
case 39: right = false;
break;
case 37: left = false;
break;
//case 40: up = false;
//break;
//case 38: down = false;
//break;
case 32: shot = false;
break;
}
}
function move() {
if(right == true) {
x += 1 * speed;
} else if(left == true) {
x -= 1 * speed;
}
//if(up == true) {
//y += 1 * speed;
//} else if(down == true) {
//y -= 1 * speed;
//}
}
function player() {
ctx.fillStyle = '#1CE80D';
ctx.fillRect(x, y, size, size);
ctx.fillRect(x+10, y, size, size);
ctx.fillRect(x+20, y, size, size);
ctx.fillRect(x-10, y, size, size);
ctx.fillRect(x-20, y, size, size);
ctx.fillRect(x+5, y-1, 10, 10);
ctx.fillRect(x+5, y-2, 10, 10);
ctx.fillRect(x+5, y-3, 10, 10);
ctx.fillRect(x+5, y-4, 10, 10);
ctx.fillRect(x+5, y-5, 10, 10);
ctx.fillRect(x+5, y-6, 10, 10);
ctx.fillRect(x+5, y-7, 10, 10);
ctx.fillRect(x+9, y-8, 2, 2);
ctx.fillRect(x+9, y-9, 2, 2);
ctx.fillRect(x+9, y-10, 2, 2);
ctx.fillStyle = 'black';
ctx.fillRect(x+35, y, 5, 5);
ctx.fillRect(x-20, y, 5, 5);
}
function enemy1() {
ctx.fillStyle = '#1CE80D';
ctx.fillRect(444, 375, 5, 5);
ctx.fillRect(411, 375, 5, 5);
ctx.fillRect(416, 380, 5, 5);
ctx.fillRect(439, 380, 5, 5);
ctx.fillRect(410, 385, 40, 5);
ctx.fillRect(405, 390, 50, 5);
ctx.fillRect(400, 395, 60, 5);
ctx.fillRect(400, 400, 60, 5);
ctx.fillRect(400, 405, 5, 5);
ctx.fillRect(455, 405, 5, 5);
ctx.fillRect(410, 405, 40, 5);
ctx.fillStyle = '#001119';
ctx.fillRect(415, 405, 30, 5);
ctx.fillStyle = '#1CE80D';
ctx.fillRect(415, 410, 30, 5);
ctx.fillStyle = '#001119';
ctx.fillRect(440, 390, 5, 5);
ctx.fillRect(414, 390, 5, 5);
ctx.fillRect(428, 410, 4, 5);
}
function draw() {
ctx.fillStyle = '#001119';
let background = ctx.fillRect(0, 0, sWidth, sHeight);
player();
ctx.fillStyle = '#EAEEB7';
let wall1 = ctx.fillRect(0, 0, 10, sHeight);
let wall2 = ctx.fillRect(0, 0, sHeight, 10);
let wall3 = ctx.fillRect(0, sHeight - 10, sWidth, 10);
let wall4 = ctx.fillRect(sWidth - 10, 0, 10, sHeight);
}
function gravityForce() {
y += gravity;
}
function jumpAct() {
if(jump == true) {
y -= jumpForce;
} else if(jump == false) {
gravityForce();
}
}
function bulletDraw() {
let bulletX = x;
ctx.fillStyle = '#1CE80D';
ctx.fillRect(bulletX + 9, bulletY, 1, 8);
}
function bulletPos() {
bulletY -= bulletSpeed;
}
function attack() {
if(shot == true) {
for(let i = screen.height; i > 0; i--) {
bulletDraw();
bulletPos();
}
console.log('shooting');
} else if(shot == false) {
bulletY = 880;
}
}
function gameLoop() {
ctx.clearRect(0, 0, screen.width, screen.height);
draw();
move();
gravityForce();
attack();
enemy1();
bulletPos();
requestAnimationFrame(gameLoop);
if(x > screen.width - size - 30) {
x = 30
} else if(x < 30) {
x = screen.width - 50;
}
if(y > screen.height - size - 10) {
y -= (size - 10);
} else if(y < 0) {
y += size;
}
}
////////////////////////////////////////////////
requestAnimationFrame(gameLoop);
我認為您必須同時管理計時器間隔和畫布重繪功能。 我沒關系在每個間隔重新繪制整個畫布是個好主意,相反,您只能重新繪制所需的畫布區域。 我已經使用setTimeout()函數修改了您的代碼,而沒有重繪整個畫布。 您可以在此提琴手路徑中看到完整的代碼https://jsfiddle.net/SyamKumarD/knyt7shf/18/
您需要檢查的一些關鍵代碼
1. setTimeout() method
2. hitTarget() method and its instantiation
3. Key down and up events
希望這會有所幫助
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.