¿Cómo colocar el círculo en posiciones aleatorias continuamente?
Quiero colocar este círculo en posiciones aleatorias, como saltar de una posición aleatoria a otra y así sucesivamente... Por favor, responda ¿Cómo hacer eso?
let canvas = document.getElementById("canvas"); let context = canvas.getContext("2d"); // for canvas size var window_width = window.innerWidth; var window_height = window.innerHeight; canvas.width = window_width; canvas.height = window_height; let hit_counter=0; function randomIntFromInterval(min, max) { // min and max included return Math.floor(Math.random() * (max - min + 1) + min) } class Circle { constructor(xpos, ypos, radius, color, text) { this.position_x = xpos; this.position_y = ypos; this.radius = radius; this.text = text; this.color = color; } // creating circle draw(context) { context.beginPath(); context.strokeStyle = this.color; context.fillText(this.text, this.position_x, this.position_y); context.textAlign = "center"; context.textBaseline = "middle" context.font = "20px Arial"; context.lineWidth = 5; context.arc(this.position_x, this.position_y, this.radius, 0, Math.PI * 2); context.stroke(); context.closePath(); } update() { if(hit_counter%70 == 0){ this.text =Math.floor((randomIntFromInterval(1, 20))); hit_counter = 1; } hit_counter++; context.clearRect(0, 0, window_width, window_height) this.draw(context); if ((this.position_x + this.radius) > window_width) { this.dx = -this.dx; } if ((this.position_x - this.radius) < 0) { this.dx = -this.dx; } if ((this.position_y - this.radius) < 0) { this.dy = -this.dy; } if ((this.position_y + this.radius) > window_height) { this.dy = -this.dy; } this.position_x += this.dx; this.position_y += this.dy; } } let my_circle = new Circle(100, 100, 50, 'Black', hit_counter); my_circle.update(); <canvas id="canvas"></canvas>Puede usarsetInterval para llamar a una función después de un período de tiempo retrasado.
Según su fragmento de código, recomendaría usar setInterval para construir y luego destruir un círculo en una nueva posición:
// Circle Definition ... const WAIT_TIME_IN_MS = 3000; let circle = new Circle(x, y, 50, 'Black', hit_counter); // Assuming you want one circle const interval = setInterval(() => { circle.update(); }, WAIT_TIME_IN_MS); Simplemente actualice Circle.position_x y Circle.position_y desde Circle.update antes de llamar a Circle.draw :
... update() { ... context.clearRect(0, 0, window_width, window_height); this.position_x = randomIntFromInterval(window_width, window_height); this.position_y = randomIntFromInterval(window_width, window_height); ... } ... Cuando desee detener este intervalo, puede llamar a clearInterval(interval) .