Tengo una serie de bolas y quiero agregar bolas a esa matriz cuando el usuario haga clic en el espacio. El problema es que cuando se hace clic en el botón de espacio, las condiciones se mantienen verdaderas de 1 a 2 segundos y se crean cientos de bolas en lugar de una sola bola. ¿Cómo puedo crear solo una bola incluso si la condición es verdadera todo el tiempo?
let balls = [ { x: totalWidth / 2, y: totalHeight / 2, speed: 8, size: 20, color: 'red', leader: true, }, ]; window.addEventListener('keydown', function(e) { if(e.keyCode == 32) { let newSize = (balls[0].size/2); let newBall = { x: balls[0].x +100, y: balls[0].y +100, speed: 0, size: newSize, } balls.push(newBall); console.log(balls); balls.forEach(ball => { ball.size = newSize; }) } });usar removeEventListner
const totalHeight = 10; const totalWidth = 10; let balls = [ { x: totalWidth / 2, y: totalHeight / 2, speed: 8, size: 20, color: 'red', leader: true, }, ]; const keydownFunction = e => { if(e.keyCode == 32) { let newSize = (balls[0].size/2); let newBall = { x: balls[0].x +100, y: balls[0].y +100, speed: 0, size: newSize, } balls.push(newBall); console.log(balls); balls.forEach(ball => { ball.size = newSize; }) window.removeEventListener('keydown', keydownFunction); } } window.addEventListener('keydown', keydownFunction);Si no desea que el evento keydown se active varias veces, el usuario de utilidad libera la tecla. Puede verificar e.repeat al principio en su controlador de eventos.
O bien, si desea que el controlador de eventos solo se invoque una vez. Puede agregar el parámetro { once: boolean } para addEventListener .
La solución más simple podría ser modificar su declaración if aquí:
window.addEventListener('keydown', function(e) { if(e.keyCode == 32) {a
window.addEventListener('keydown', function(e) { if(e.keyCode == 32 && !e.repeat) { El parámetro de repeat indica que se retuvo cierta tecla y, en su caso, queremos realizar algo solo cuando no hubo repetición, es decir e.repeat == false o en forma abreviada !e.repeat