javascript — Как сделать так, чтобы несколько кликов падали на клик?

Как сделать так, чтобы несколько шариков падали при нажатии?

Просто перепишите объект ball, чтобы он стал инстанцируемым:

 function Ball(W, H) { this.x = W; this.y = H; this.radius = 15; this.color = "blue"; this.vx = 0; this.vy = 1; 

}

Переместите методы в прототипы (это сделает их доступными для всех экземпляров). Кроме того, добавьте метод обновления, чтобы вы могли локализовать обновления:

 Ball.prototype = { draw: function() { ctx.beginPath(); ctx.arc(this.x, this.y, this.radius, 0, Math.PI*2, false); ctx.fillStyle = this.color; ctx.fill(); ctx.closePath(); }, update: function() { this.y  = this.vy; this.vy  = gravity; if(this.y   this.radius {amp}gt; H) { this.y = H - this.radius; this.vy *= -bounceFactor; } } }; 

В событии click (рассмотрите возможность переименования массива во множественное число — так легче отличить. В вашем коде вы переопределяете «массив» (который определяется как объект) с помощью одного объекта ball позже):

 var balls = []; // define an array to hold the balls 

Чтобы событие click использовало положение мыши по оси x и y в качестве начальной точки для шара, сначала нам нужно отрегулировать его относительно окна клиента, а не холста. Для этого мы получаем абсолютную позицию холста и вычитаем ее из клиентских координат:

 canvas.addEventListener('click', function(event) { var rect = this.getBoundingClientRect(), // adjust mouse position x = event.clientX - rect.left, y = event.clientY - rect.top; balls.push(new Ball(x, y)); // add a new instance }); 

Теперь в главном цикле анимации просто перебираем массив. Каждый раз, когда появляется новый шар, он будет рассматриваться и обновляться — мы просто даем циклу работать, пока не будет выполнено какое-то условие (не показано):

 function update() { clearCanvas(); for(var i = 0, ball; ball = balls[i]; i  ) { ball.draw(); // this will draw current ball ball.update(); // this will update its position } requestAnimationFrame(); } 

Если вы сложите их вместе, вы получите:

 var canvas = document.getElementById("canvas"), ctx = canvas.getContext("2d"), W = canvas.width, // simplified for demo H = canvas.height, gravity = .5, bounceFactor = .7; function Ball(x, y) { this.x = x; this.y = y; this.radius = 15; this.color = "blue"; this.vx = 0; this.vy = 1 } Ball.prototype = { draw: function() { ctx.beginPath(); ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2); ctx.fillStyle = this.color; ctx.fill(); ctx.closePath(); }, update: function() { this.y  = this.vy; this.vy  = gravity; // todo: limit bounce at some point or this value will be added if (this.y   this.radius {amp}gt; H) { this.y = H - this.radius; this.vy *= -bounceFactor; } } }; function clearCanvas() { ctx.clearRect(0, 0, W, H); } var balls = []; // define an array to hold the balls canvas.addEventListener('click', function(event) { var rect = this.getBoundingClientRect(), // adjust mouse position x = event.clientX - rect.left, y = event.clientY - rect.top; balls.push(new Ball(x, y)); // add a new instance }); (function update() { clearCanvas(); for (var i = 0, ball; ball = balls[i]; i  ) { ball.draw(); // this will draw current ball ball.update(); // this will update its position } requestAnimationFrame(update); })(); 
 canvas {background:#aaa} 
 {amp}lt;canvas id="canvas" width=600 height=400{amp}gt;{amp}lt;/canvas{amp}gt; 
Понравилась статья? Поделиться с друзьями:
JavaScript & TypeScript
Adblock
detector