Click here to Skip to main content
15,391,859 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
I'm trying to make a game in HTML5 Canvas. In the game, I try to make particles shoot out of under the player at random angles, but I can't get it done. Here is what I tried:

What I have tried:

JavaScript
class Practicals {
  constructor() {
    this.x = player.x + 20;
    this.y = player.y + 25;
    this.height = Math.round(10 + Math.random() * 10);
    this.width = 4;
    this.vy = -10;
    this.vx = 10;
    this.rotation = 30;
  }

  draw() {
    context.fillRect(this.x, this.y, this.width, this.height);
  }

  update(secondsPassed) {
    this.y += this.vy * secondsPassed;
    this.x += this.vx * secondsPassed;
    this.y += 10;
  }

}

function handelPracticals(secondsPassed) {
  practicals.unshift(new Practicals());
  for (let i = 0; i < practicals.length; i++) {
    practicals[i].update(secondsPassed);
    context.save();
    context.translate(
      practicals[i].x + practicals[i].width / 2,
      practicals[i].y + practicals[i].height / 2
    );
    context.rotate((Math.PI / 360) * Math.round(Math.random() * 10) * 10);
    context.translate(
      -practicals[i].x - practicals[i].width / 2,
      -practicals[i].y - practicals[i].height / 2
    );
    practicals[i].draw();
    context.restore();
  }

  if (practicals.length > 200) {
    for (let i = 0; i < 20; i++) {
      practicals.pop(practicals[i]);
    }
  }
}

Thank you in advance
Posted
Updated 2-Jun-22 9:39am
v2
Comments
Gerry Schmitz 2-Jun-22 12:44pm
   
You should have (design) a particle function that accepts a random angle (from an "random angle generator"); instead you have random functions buried in the main routine.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900