i am developing ball game. i am stuck at i want 3 balls are moving top bottom but every time with ra-CodePudding

I have a ball-game. width of board is 600px. 3 ball at that time coming down and on click it disappearing. but i want to have a one time 3 balls should be coming from different places. top 0 but left amount should be different. i write css

@keyframes ball-move {
  0% {
    top: 0;
    left: 0;
  }

For generate random width i make var.

var boardWidth = Math.floor(Math.random() * 600   1);

but i am not understanding how can i over right css in JS. i want to have top:0 to enter ball in frame but i want to enter from different width.

i tried with entering in css over ride but.JS is not reading my css. I have to use only HTML, CSS,j javascript only.

CodePudding user response：

Give each ball a class of ball and select them with javascript to loop through and set custom CSS

document.querySelectAll('.ball').forEach(ball => {
   ball.style.left = Math.floor(Math.random() * 600);
}