Estoy tratando de hacer que mi personaje se mueva hacia la izquierda y hacia arriba y creo que las funciones jump() y slideLeft() funcionan correctamente y el problema está en la función del controller(e) ( else if (e.KeyCode===37) ). La primera función está disponible pero no puede acceder a la segunda función de condición. Además, me gustaría hacer que la cuadrícula sea sólida después de hacer una función similar a slideRight() , de modo que si mi personaje salta sobre ella, la plataforma sostendrá el cuadrado. ¿Alguien tiene alguna idea para cualquiera de mis preguntas?
Fragmento de código:
var square = document.querySelector('.square'); var grid = document.querySelector('.grid'); var bottom = 0; let isJumping = false; let isGoingLeft = false; var newBottom; let left = 0; let leftTimerId; function jump() { if (isJumping) return let timerUpId = setInterval(function() { if (bottom > 250) { clearInterval(timerUpId); let timerDownId = setInterval(function() { if (bottom < 0) { clearInterval(timerDownId); isJumping = false; } bottom -= 5; square.style.bottom = bottom + 'px'; }, 20) } isJumping = true; bottom += 30; square.style.bottom = bottom + 'px'; }, 20) } function slideLeft() { console.log('da'); isGoingLeft = true; leftTimerId = setInterval(function() { left -= 5; square.style.left = left + 'px'; }, 20) } function controller(e) { if (e.keyCode === 32) jump(); else if (e.KeyCode === 37) slideLeft(); } document.addEventListener('keydown', controller); .grid { position: absolute; background-color: chartreuse; height: 20px; width: 500px; bottom: 100px; left: 100px; } .square { position: absolute; background-color: darkblue; height: 100px; width: 100px; bottom: 0px; left: 150px; } ` <div class="grid"></div> <div class="square"></div>EDITAR: hay un error tipográfico: la segunda vez que ha escrito KeyCode
function controller(e) { if(e.keyCode===32) { jump(); } else if(e.keyCode===37) { slideLeft(); } }Realmente no entiendo lo que quieres decir con la segunda parte de tu pregunta. Si quieres que un personaje tenga la capacidad de saltar sobre un cuadrado, deberás implementar una detección de colisión. Algo como esto:
if ( isNotOnGround() ) { fall() }