javascript - 我想多拍

Question

我有这个代码，红色方块是玩家，黑色方块是敌人，黄色，射击，soo，这样只射击一颗子弹，我如何让每一次射击都成为具有自己属性的对象，位置X和 Y 和角度。我知道这可能是一个非常简单的问题，但我可以弄清楚我该怎么做。

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");

ctx.translate(canvas.width / 2, canvas.height / 2);

var playerAltura = 60;
var playerLargura = 60;
var playerPosX = 0 - playerLargura / 2;
var playerPosY = 0 - playerAltura / 2;
var playerStoped = true;

var projectileLargura = 20;
var projectileAltura = 20;
var projectileSpeed = 150;
var projectilePosX = playerPosX + (playerLargura / 2 - projectileLargura / 2);
var projectilePosY = playerPosY + (playerAltura / 2 - projectileAltura / 2);


var enemieLargura = playerLargura / 2;
var enemieAltura = playerAltura / 2;
var enemiePosX = rand(- canvas.width / 2, canvas.width / 2);
var enemiePosY = rand(- canvas.height / 2, canvas.height / 2);

function rand(min, max){
    min = Math.ceil(min);
    max = Math.floor(max);
    return Math.floor(Math.random() * (max - min + 1)) + min;
}

function drawEnemie(){

    ctx.beginPath();
    ctx.fillStyle = "black";
    ctx.fill();
    ctx.fillRect(enemiePosX, enemiePosY, enemieLargura, enemieAltura);
    ctx.closePath();

}

function drawPlayer(){

    ctx.beginPath()
    ctx.fillStyle = "red";
    ctx.fill();
    ctx.fillRect(playerPosX, playerPosY, playerLargura, playerAltura);
    ctx.closePath();
}

function drawProjectile(){

    if (playerStoped == true){
        ctx.beginPath();
        ctx.fillStyle = "blue";
        ctx.fill();
        ctx.fillRect(projectilePosX - projectileLargura / 2, projectilePosY - projectileAltura / 2, projectileLargura, projectileAltura);
        ctx.closePath();
        calcMovementProjectile(-calcDegrees(playerPosX, playerPosY, enemiePosX, enemiePosY), projectileSpeed);
    }
    
}

function calcMovementProjectile(angle, speed){

    var rads = angle * Math.PI / 180;

    var projectileVelX = Math.cos(rads) * speed / 60;
    var projectileVelY = Math.sin(rads) * speed / 60;

    projectilePosX += projectileVelX;
    projectilePosY -= projectileVelY;


}

function calcDegrees(anchorX, anchorY, pointX, pointY){

    degree = Math.atan2(anchorY - pointY, anchorX - pointX) * 180 / Math.PI + 180;

    return degree;

}

function draw(){

    ctx.clearRect(-canvas.width / 2, -canvas.height / 2, canvas.width, canvas.height);

    bullet = new drawProjectile();
    drawPlayer();
    drawEnemie();

}

setInterval(draw, 10);

标签： javascriptcanvas

Answer 1

// var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");

ctx.translate(canvas.width / 2, canvas.height / 2);

var playerAltura = 40;
var playerLargura = 40;
var playerPosX = 0 - playerLargura / 2;
var playerPosY = 0 - playerAltura / 2;
var playerStoped = true;

var enemieLargura = playerLargura / 2;
var enemieAltura = playerAltura / 2;
var enemiePosX = rand(- canvas.width / 2, canvas.width / 2);
var enemiePosY = rand(- canvas.height / 2, canvas.height / 2);

function rand(min, max){
    min = Math.ceil(min);
    max = Math.floor(max);
    return Math.floor(Math.random() * (max - min + 1)) + min;
}

function drawEnemie(){
    ctx.fillStyle = "black";
    ctx.fillRect(enemiePosX, enemiePosY, enemieLargura, enemieAltura);
}

function drawPlayer(){
    ctx.fillStyle = "red";
    ctx.fillRect(playerPosX, playerPosY, playerLargura, playerAltura);
}

function calcDegrees(anchorX, anchorY, pointX, pointY){
    return Math.atan2(anchorY - pointY, anchorX - pointX) * 180 / Math.PI + 180;
}

function draw(){
    ctx.clearRect(-canvas.width / 2, -canvas.height / 2, canvas.width, canvas.height);
    drawPlayer();
    drawEnemie();
    projectiles.forEach(p => p.draw());
}

setInterval(draw, 10);




const projectiles = [];
class Projectile {
  constructor(){
    this.largura = 20;
    this.altura = 20;
    this.speed = 150;
    this.posX = playerPosX + (playerLargura / 2 - this.largura / 2);
    this.posY = playerPosY + (playerAltura / 2 - this.altura / 2);
    projectiles.push(this);
  }
  calc(angle, speed) {
    var rads = angle * Math.PI / 180;
    var projectileVelX = Math.cos(rads) * speed / 60;
    var projectileVelY = Math.sin(rads) * speed / 60;
    this.posX += projectileVelX;
    this.posY -= projectileVelY;  
  }
  draw(){
    if (playerStoped == true){
        ctx.fillStyle = "blue";
        ctx.fillRect(this.posX - this.largura / 2, this.posY - this.altura / 2, this.largura, this.altura);
        this.calc(-calcDegrees(playerPosX, playerPosY, enemiePosX, enemiePosY), this.speed);
    }
  }
}

setInterval(() => new Projectile(), 400);

<canvas id=canvas></canvas>