I want each circle to move sequentially at a different time in Javascript

Question

The circles that I want drawn sequentially.

I want make aimbooster. (http://www.aimbooster.com/).

If a circle is drawn not at the same time, but if one circle is drawn, the next circle wants to appear in a few seconds.

The circles I made do not grow in size and disappear as soon as I make them.

How should I solve this problem?

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

// canvas maximum, minimum size
var max_x = 610,
  min_x = 30,
  min_y = 30,
  max_y = 466;

let balls = [];
let inc = true;
let i = 0;

// ---------------------------------------
class Ball {
  constructor() {
    this.x = Math.random() * canvas.width;
    this.y = Math.random() * canvas.height;
    this.r = 1;
    this.c = "orange";
    this.speed = 1;
    this.ball_life = 0;
  }
  draw() {
    context.beginPath();
    context.arc(this.x, this.y, this.r, 0, Math.PI * 2);
    context.fillStyle = "orange";
    context.fill();
    context.stroke();
  }

  grow() {
    if (inc) {
      this.r += this.speed;
      this.ball_life += 1;
    } else {
      this.r -= this.speed;
      this.ball_life += 1;
    }
  }

  rad_check() {
    if (this.r >= 30) {
      inc = false;
    }
    if (this.r <= 2) {
      inc = true;
    }
  }
}
// ---------------------------------------

class Drawballs {
  constructor() {
    this.rep();
  }
  rep() {
    creatballs();
    balls[i].draw();
    balls[i].rad_check();
    balls[i].grow();
  }
}
// --------------------------------------
function creatballs() {
  balls.push(new Ball());
}
// --------------------------------------
   

 setInterval(() => {
  context.clearRect(0, 0, canvas.width, canvas.height);
  new Drawballs();
  i++;
}, 50);

*{
    margin:0;
}
html, body{
    height:100%;
}
body{
    background:#376481 url(bg.jpg);
    background-size: 100% 100%;
}
#page-container{
    width:100%;
    min-height:100%;
    background:url(bg_stripes.png);
}
#column{
    width: 640px;
    margin-left: auto;
    margin-right: auto;
    display:grid;
}
#top{
    height:80px;
}

.nav{
    height:20px;
    background-color:#CCCCCC;
}
.nav ul{
    padding:0px;
    margin-left:220px;
    text-align: center;
}
.nav ul li{
    font-size:10pt;
    list-style:none;
    float:left
}

.nav ul li a{
    text-decoration:none;
    color:#4477BB;
}

#myCanvas{
    background-color:white;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Aim_Boost</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div id="page-container">
        
        <div id="top"></div>
        <div id="column">
            <img src="header.png" style="width: 640px; height: 116px;" alt="AimBooster">
            <div id="page">
                <div class="nav">
                    <ul>
                        <li>Play</li>
                        <li><a href="#">&nbsp;•&nbsp;News</a></li>
                        <li><a href="#">&nbsp;•&nbsp;FAQ</a></li>
                        <li><a href="#">&nbsp;•&nbsp;Feedback</a></li>
                        <li><a href="#">&nbsp;•&nbsp;Donate</a></li>
                    </ul>
                </div>
                <div id="thi">
                    <canvas id="myCanvas" width="640px" height="497px"></canvas>
                </div>
            </div>
        </div>
        
    </div>
    
    <script src="javas.js"></script>    
</body>
</html>

`time.sleep(3)` in py is similar to `await new Promise(r => setTimeout(r, 3000));` in js :) — async await, Sep 22 '21 at 01:29
I like the concept of creating an aim trainer in JS and think you're off to a good start. This question seems like it needs to be narrowed down here a bit. It would also be helpful to demonstrate a working snippet of the issue you are facing. As far as canvas goes, to accomplish this task I would look at [animation frames](https://stackoverflow.com/questions/38709923/why-is-requestanimationframe-better-than-setinterval-or-settimeout). — async await, Sep 22 '21 at 01:40
Code snippet is throwing an error: `Error{"message": "SyntaxError: expected expression, got '**'", "filename": "https://stacksnippets.net/js", "lineno": 162, "colno": 1}` Edit: At the end of your js code, the double asterisk before `setInterval(...)` — Nakarukatoshi Uzumaki, Sep 22 '21 at 06:38

score 0 · Accepted Answer · answered Sep 23 '21 at 13:50

Don't mind me - I just rewrote your JS to be readable

const canvas = document.getElementById("myCanvas");
const context = canvas.getContext("2d");
let frameCounter = 0;
const drawCircleAfterFrameCount = 10;

// canvas maximum, minimum size
const max_x = 610,
  min_x = 30,
  min_y = 30,
  max_y = 466;

let balls = [];
const frameIntervalInMiliseconds = 50;

class Ball {
  constructor() {
    this.x = Math.random() * canvas.width;
    this.y = Math.random() * canvas.height;
    this.r = 1;
    this.c = "orange";
    this.growSpeed = 1;
    this.isGrowing = true;
    this.timeAlive = 0;
    this.isAlive = true;
    this.isGrowing = true;
  }
  draw() {
    if (!this.isAlive) {
        return;
    }
    context.beginPath();
    context.arc(this.x, this.y, this.r, 0, Math.PI * 2);
    context.fillStyle = "orange";
    context.fill();
    context.stroke();
  }
  grow() {
    if (this.isGrowing && this.r < 30) {
        this.r += this.growSpeed;
    } else {
        this.isGrowing = false;
      this.r -= this.growSpeed;
    }
    if (this.r < 2) {
        this.die();
    } else {
        this.timeAlive += 1;
    }
  }
  die() {
    this.isAlive = false;
  }
}

function drawFrame() {
    let deadBallIndexes = [];
  context.clearRect(0, 0, canvas.width, canvas.height);
  let ballsCount = balls.length;
  for (i = 0; i < ballsCount; i++) {
    const ball = balls[i];
    if (ball.isAlive) {
      ball.grow();
      ball.draw();
    } else {
        deadBallIndexes.push(i);
    }
  }
  deadBallIndexes.forEach(ballIndex => {
    balls.splice(ballIndex, 1);
  })
}

setInterval(() => {
    if (frameCounter % drawCircleAfterFrameCount === 0) {
    balls.push(new Ball());
  }
  drawFrame();
  frameCounter++;
}, frameIntervalInMiliseconds);

*{
    margin:0;
}
html, body{
    height:100%;
}
body{
    background:#376481 url(bg.jpg);
    background-size: 100% 100%;
}
#page-container{
    width:100%;
    min-height:100%;
    background:url(bg_stripes.png);
}
#column{
    width: 640px;
    margin-left: auto;
    margin-right: auto;
    display:grid;
}
#top{
    height:80px;
}

.nav{
    height:20px;
    background-color:#CCCCCC;
}
.nav ul{
    padding:0px;
    margin-left:220px;
    text-align: center;
}
.nav ul li{
    font-size:10pt;
    list-style:none;
    float:left
}

.nav ul li a{
    text-decoration:none;
    color:#4477BB;
}

#myCanvas{
    background-color:white;
}

<div id="page-container">

  <div id="top"></div>
  <div id="column">
    <img src="header.png" style="width: 640px; height: 116px;" alt="AimBooster">
    <div id="page">
      <div class="nav">
        <ul>
          <li>Play</li>
          <li><a href="#">&nbsp;•&nbsp;News</a></li>
          <li><a href="#">&nbsp;•&nbsp;FAQ</a></li>
          <li><a href="#">&nbsp;•&nbsp;Feedback</a></li>
          <li><a href="#">&nbsp;•&nbsp;Donate</a></li>
        </ul>
      </div>
      <div id="thi">
        <canvas id="myCanvas" width="640px" height="497px"></canvas>
      </div>
    </div>
  </div>
</div>

I want each circle to move sequentially at a different time in Javascript

1 Answers1