Estoy tratando de crear un límite para mi lienzo, no estoy seguro de por dónde empezar a hacerlo. Ya he creado el punto de partida, hice el activo del personaje, que puede moverse, sin embargo, el personaje se mueve fuera del lienzo, quiero que cuando golpee la pared no se mueva fuera del límite.
Aquí está el código CSS:
#canvas { width: 500px; height: 200px; border: 1px solid black; margin: auto; margin-top: 200px; } #character { width: 12px; height: 12px; background-color: blue; border-radius: 20px; position: relative; top:100px; left: 250px; } .animate { animation:UpKey 300ms linear; animation:DownKey 300ms linear; }Código JavaScript:
function place(id,x_pos, y_pos) { var element = document.getElementById(id); element.style.position = "absolute"; element.style.left = x_pos + 'px'; element.style.top = y_pos + 'px'; } setInterval(update,1); function update() { document.addEventListener('keydown', keyPress); } function keyPress(e) { var x = e.keyCode; var character = document.getElementById("character").getBoundingClientRect(); var left = parseInt(character.left,10); var top = parseInt(character.top,10) switch (x) { case 37: place('character', left-10, top); break; case 39: place('character', left+10, top); break; case 38: place('character', left, top-10); break; case 40: place('character', left, top+10); break; } console.log(x); } update();Estoy buscando hacerlo en JavaScript
Antes de establecer la nueva posición para el objeto (estado), debe calcular el valor de antemano y verificar si el valor está fuera del rebote de su lienzo.
Este sería el cambio mínimo necesario para establecer los límites. Solo permite cambios de posición cuando se cumple el requisito.
switch (x) { case 37: if (left-10 >= 0) place('character', left-10, top); break; case 39: if (left+10 <= canvasWidth) place('character', left+10, top); break; case 38: if (top-10 >= 0) place('character', left, top-10); break; case 40: if (top+10 <= canvasHeight) place('character', left, top+10); break; }Hay muchas mejoras posibles en su código:
update()render() (se debe llamar al renderizado después de la actualización)requestAnimationFrame en lugar de setInterval