I have been trying to figure out how to make the character stop when it hits the right wall and the bottom wall of the canvas with no luck, Please see the code below:
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', keydown);
}
function keydown(e)
{
let x = e.keyCode;
let character = document.getElementById("character").getBoundingClientRect();
let canvasbound = document.getElementById("canvas").getBoundingClientRect();
let left = parseInt(character.left,10);
let top = parseInt(character.top,10);
switch (x) {
//left
case 37:
if(!(character.left-15 < canvasbound.left))
{
place('character', left-15, top);
}
break;
//right
case 39:
if(!(character.left+15 < canvasbound.left))
{
place('character', left+15, top);
}
break;
//up
case 38:
if(!(character.top-15 < canvasbound.top))
{
place('character', left, top-15);
}
break;
//down
case 40:
if(!(character.top+15 < canvasbound.down))
{
place('character', left, top+15);
}
break;
}
console.log(x)
return x
}
Case 39 is meant to let the character travel until it hits the right wall and stop, but it goes through the wall:
case 39:
if(!(character.left+15 < canvasbound.left))
{
place('character', left+15, top);
}
break;
Same for case 40 except the character goes down and passes the wall which it is not supposed to.
case 40:
if(!(character.top+15 < canvasbound.top))
{
place('character', left, top+15);
}
break;
Is there something I am missing I was thinking that I might be missing something in this area of the code:
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';
}
When moving right, you are testing if character goes through the left boundary (canvasbound.left), you need to change that to test the right boundary (canvasbound.right). Same for the bottom boundary.
The code was a little mixed up which key is which, and the conditions were tough to read. like with x, y, left, right, plus, minus, <, >, and !.
Here, the code is re-organized a bit, separating rules about movement from the constraints, and referring only to the bounding rects (no hard coded constants), to be durable if canvas or character change size.
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';
}
function init() {
const bounds = document.getElementById("canvas").getBoundingClientRect();
place('character', 0, 0);
document.addEventListener('keydown', keydown);
}
init();
function keydown(e) {
let key = e.keyCode;
const character = document.getElementById("character").getBoundingClientRect();
let dx = 0, dy = 0;
// get x and y increments based on the key, don't worry about the bounds
const rules = {
37: () => dx -= character.width, // left
38: () => dy -= character.height, // up
39: () => dx += character.width, // right
40: () => dy += character.height // down
};
if (key in rules) rules[key]();
// functions that clamp x,y to bounds
const bounds = document.getElementById("canvas").getBoundingClientRect();
const clampX = x => Math.min(Math.max(x, bounds.left), bounds.right - character.width);
const clampY = y => Math.min(Math.max(y, bounds.top), bounds.bottom - character.height);
// increment the character position and clamp
const newX = clampX(character.left + dx)
const newY = clampY(character.top + dy)
place('character', newX, newY);
return key
}html, body {
margin: 0;
}<div id="character" style="width:20px; height:20px; background-color:blue"></div>
<canvas id="canvas" style="background-color:yellow;"></canvas>The most important idea relating to the OP is the idea of "clamping". We use this all the time to enforce endpoint constraints. It always takes this form....
Math.min(upperLimit, Math.max(lowerLimit, someValue))