Estoy tratando de hacer un límite de lienzo para mi minijuego. Ya he creado el lienzo con un personaje que se puede mover con las flechas. Usé una declaración de cambio para hacer esto, el siguiente paso es crear un límite y no estoy seguro de cómo hacerlo. Así es como se ve el Código Javascript en este momento:
function place(id,x_pos, y_pos) { let 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) { let x = e.keyCode; let character = document.getElementById("character").getBoundingClientRect(); let canvasWidth = document.getElementById("canvas").getBoundingClientRect(); let left = parseInt(character.left,10); let top = parseInt(character.top,10) switch (x) { //left case 37: place('character', left-15, top); break; //right case 39: place('character', left+15, top); break; //up case 38: place('character', left, top-15); break; //down case 40: place('character', left, top+15); break; } console.log(x) return x } update()Supongo que el límite del que estás hablando es un límite para que tu personaje se mueva. Si es así...
Querrá verificar el método keyPress antes de mover su personaje.
Algo como esto:
Primero, consideraría cambiar el nombre de canvasWidth a algo como canvasBound , y de manera similar para la variable de límites de su carácter.
if (!(characterBound.left - 15 < canvasBound.left)) { ...move character left... } ... else do nothing (don't have to actually include this)repite lo mismo para moverte hacia arriba, abajo, a la derecha, etc. Tendrás que jugar con los valores para hacerlo bien para tu sprite.