Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

173
Vistas
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 Respuestas
Responde la pregunta

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 Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda