Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

170
Visualizações
How do you decrease the width and height of a rectangle in HTML canvas by a certain percentage based on a specific number?

Sorry, I don't know how to explaing this very well. I am brainstorming ideas for creating enemies for games in JavaScript. I want to decrease the size of the enemy every time it is hit until its health eventually becomes 0, and it will disappear. For that, I need the enemy's width and height to decrease relative to the health. For example, if the enemy has 200 health, and the width and height are both 50, I would need both the width and height to decrease by 1 every time the enemy takes 4 damage so that the width and height will be 0 by time the health gets to 0. However, I need an equation, that I can plug in variables for so that I don't have to hard code every enemy. I am also using instances of an enemy class with parameters for its x position, y position, width, height, and health if that helps.

class Enemy {
    constructor(x,y,width, height, health) {
        this.x = x;
        this.y = y;
        this.width = width;
        this.height = height;
        this.baseWidth = baseWidth;
        this.baseHeight = baseHeight;
        this.health = health;
    }
    draw() {
        c.clearRect(0,0,canvas.width, canvas.height)
        c.beginPath();
        c.fillStyle = 'black'
        c.fillRect(this.x, this.y, this.width, this.height);
        c.closePath();
        c.fill();
    }
}


const myEnemy = new Enemy(500, 300, 50, 50, 200)

about 4 years ago · Juan Pablo Isaza
1 Respostas
Responde à pergunta

0

Not sure if this is what you envisioned, but here is a possible solution for you.

You essentially want to take the percentage health remaining, and use it to calculate what percentage of an 'enemy's initial height should be used for its current height.

For this you would need to also store the token's max health in for example in a baseHealth property.

Then, using your baseHeight field, you could then calculate it:

let healthFraction = myEnemy.health / myEnemy.baseHealth; // Fraction for health, for example 0.3.
let newHeight = Math.round(myEnemy.baseHeight * healthFraction); // Will then round to nearest integer, so if baseHeight = 200, then newHeight in this example would be 60.
myEnemy.height = newHeight;

Some better rounding in the initial calc could be needed, but that should get you a fraction height based on health. You can add this as an event trigger, or a function, or wherever. And then do the same for width.

Whenever your myEnemy object 'takes damage', the health component reduces, afterwhich you can recalculate the height.

about 4 years ago · Juan Pablo Isaza Relatório
Responde à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda