Intento crear gravedad inversa y tengo un problema después de hacer clic varias veces en el botón "física": se supone que debe reiniciarse con los valores predeterminados, pero después de 10 veces, las bolas van demasiado rápido y no entiendo por qué. La función funciona bien la primera vez, pero luego comienza a acelerarse cada vez que hace clic en "física".
https://codepen.io/Arthur222/pen/QWOgMXq
let isOn = 0; let canvas = document.getElementById("canvas"); if (canvas.getContext('2d') == null ) alert("erreur javascript"); let ctx = canvas.getContext('2d'); let velocity=1, force=1, mass = 1, radius=30; let lastTs; //FCN window.addEventListener('load', ()=>{ resize(); window.addEventListener('resize', resize); createBalls(); drawBalls(); }); // PHYSICS let balls = []; function createBalls(){ for ( let i=0; i<6; i++){ let x = radius+(i*radius*2); if (i>0) x = radius+(i*(radius+10)*2); let vel = Math.random(); let ball = {x:x, y:250, xBase:x, yBase:250, velocity:vel, velocityBase:vel, radius:30, active:true} balls.push(ball); } } function startPhy1(){ if (isOn == 1){ console.log("canvas.width, canvas.height : "+canvas.width, canvas.height); ctx.clearRect(0,0,canvas.width, canvas.height); balls.forEach(element => { element.y = element.yBase; element.active = true; element.velocity = element.velocityBase; }); } isOn = 1; lastTs = getTimestamp(); runPhy(); draw(); } function runPhy(){ let t = (getTimestamp() - lastTs)/1000; balls.forEach(element => { if ( element.active ){ //still below element.y -= element.velocity * t; element.velocity += ( force / mass ) * t; if ( element.y <= element.radius+10 ){//already on top element.active = false; element.y = element.radius;//stay on top } } }); requestAnimationFrame(runPhy); } function getTimestamp() { return new Date().getTime(); } // DRAW function draw(){ drawBalls(); requestAnimationFrame(draw); } function drawBalls(){ ctx.clearRect(0,0,canvas.width, canvas.height); for (let i=0; i< balls.length; i++){ ctx.beginPath(); ctx.arc(balls[i].x, balls[i].y, balls[i].radius, 0, 2 * Math.PI, false); ctx.strokeStyle = "green"; ctx.lineWidth = 2; ctx.stroke(); } } function resize(){ ctx.canvas.width = window.innerWidth*0.7; ctx.canvas.height = window.innerHeight*0.9; }Creo que el problema con su código es que está solicitando el cuadro de animación cada vez que se hace clic en el botón.
Intenté arreglar tu código sin éxito, por eso codifiqué este. Intentalo:
const canvas = document.getElementById('root') const btn = document.getElementById('btn') const ctx = canvas.getContext('2d') const circleImage = new Image() circleImage.src = 'https://i.stack.imgur.com/CdziF.png' var piece = { image: circleImage, x: 100, y: 250, width: 50 } var speed = 0 var max = 10 function gameLoop(){ ctx.clearRect(0, 0, canvas.width, canvas.height) ctx.drawImage(piece.image, piece.x, piece.y) speed < max ? speed += 0.1 : null if(piece.y > 0){ piece.y -= speed piece.y < 0 ? piece.y = 0 : null // Position correction } window.requestAnimationFrame(gameLoop) // Needed to keep looping } function start(){ if(btn.value === 'start'){ btn.value = 'restart' circleImage.onload = window.requestAnimationFrame(gameLoop) // Start gameLoop() } if(btn.value === 'restart'){ speed = 0 piece.y = 250 } } btn.addEventListener('click', start) // When btn is clicked execute start() <input id="btn" type="button" value="start" /> <p> <canvas id="root" height="300" width="300" style="border:1px solid grey">Y vea aquí lo que sucede cuando se solicita el cuadro de animación de solicitud cada vez que se hace clic en el botón:
const canvas = document.getElementById('root') const btn = document.getElementById('btn') const ctx = canvas.getContext('2d') const circleImage = new Image() circleImage.src = 'https://i.stack.imgur.com/CdziF.png' var piece = { image: circleImage, x: 100, y: 250, width: 50 } var speed = 0 var max = 10 function gameLoop(){ ctx.clearRect(0, 0, canvas.width, canvas.height) ctx.drawImage(piece.image, piece.x, piece.y) speed < max ? speed += 0.1 : null if(piece.y > 0){ piece.y -= speed piece.y < 0 ? piece.y = 0 : null // Position correction } window.requestAnimationFrame(gameLoop) // Needed to keep looping } function start(){ if(btn.value === 'start'){ speed = 0 piece.y = 250 circleImage.onload = window.requestAnimationFrame(gameLoop) // Start gameLoop() } } btn.addEventListener('click', start) // When btn is clicked execute start() <input id="btn" type="button" value="start" /> <p> <canvas id="root" height="300" width="300" style="border:1px solid grey">