Creating a boundary: A step-by-step guide

Question

Creating a boundary: A step-by-step guide

There is an element that I need help with

<div id="square"></div>

This element has the ability to move around the document

var square = document.getElementById("square");
    document.body.onkeydown = function(e) {
    if (e.keyCode == 37) {left()}
    if (e.keyCode == 38) {up()}
    if (e.keyCode == 39) {right()}
    if (e.keyCode == 40) {down()}
}

How can I create a function that prevents movement if the square element is too close to the document border? JSFiddle: https://jsfiddle.net/zutxyLsq/

javascript

Answer 1

Answer №1

In order to ensure that the element stays within boundaries, it's important to check if the position on the left is outside of the boundaries. Here is how you can do this:

function moveLeft() {
    console.log('Moving left');
    var leftPos = parseInt(square.style.left || getComputedStyle(square)['left'], 10);
    if (leftPos >= 50) {
        square.style.left = (leftPos - 50) + 'px';
    }
}

function moveRight() {
    console.log('Moving right');
    var leftPos = parseInt(square.style.left || getComputedStyle(square)['left'], 10);
    if (leftPos + 50 + square.offsetWidth < window.innerWidth) {
        square.style.left = (leftPos + 50) + 'px';
    }
}

For the vertical movements, similar checks can be implemented for up and down directions.

Check out this example on JSFiddle.

Answer 2

In order to ensure that the element stays within boundaries, it's important to check if the position on the left is outside of the boundaries. Here is how you can do this:

function moveLeft() {
    console.log('Moving left');
    var leftPos = parseInt(square.style.left || getComputedStyle(square)['left'], 10);
    if (leftPos >= 50) {
        square.style.left = (leftPos - 50) + 'px';
    }
}

function moveRight() {
    console.log('Moving right');
    var leftPos = parseInt(square.style.left || getComputedStyle(square)['left'], 10);
    if (leftPos + 50 + square.offsetWidth < window.innerWidth) {
        square.style.left = (leftPos + 50) + 'px';
    }
}

For the vertical movements, similar checks can be implemented for up and down directions.

Check out this example on JSFiddle.

Creating a boundary: A step-by-step guide

Answer №1

Similar questions

Is there a way I can modify the display setting to show 4 slides per view?

Convert your Airbnb short link into the full link

The method by which JavaScript identifies when a Promise has resolved or rejected

Leveraging babel-cli on your local machine

Utilizing the {{value}} parameter within the JavaScript block of the thinger.io HTML gadget

How should one go about creating an npm package out of a vuejs component and testing it locally?

Addon for Firefox: Image Upload

Django and its compatibility with modal windows

Determine the necessary adjustment to center the div on the screen and resize it accordingly

Obtain data in JSON format through an xmlhttp request

Is there a way to pass attributes to BufferGeometry in THREE.js without using ShaderMaterial?

Safari displays the contents of JSON files instead of automatically downloading them

ReactJS encountered an error: [function] is not defined, July 2017

Is it possible to determine whether a path leads to a directory or a file?

Tips for implementing a delay in jQuery after an event occurs

This element is not compatible for use as a JSX component

Using JQUERY to execute a callback function after an AJAX request is completed

Choose to either push as a single object or as individual items

Exploring Robotic Arm Actions using three.js

Why Isn't the Element Replicating?