JavaScript will only recognize the first two elements of an array when used in an if statement

Question

JavaScript will only recognize the first two elements of an array when used in an if statement

I have recently rebuilt my game in HTML/CSS/JS from scratch, based on an old question. Everything seems to work fine when there is only one player and one brick present. However, as soon as I introduce multiple bricks, things start to go wrong.

I used an array to store objects and implemented a for-of loop to handle movement within the array. The functionality works by checking if the current element (player) is not the same as the object selected by the loop, and then checks for collisions and logs the results accordingly. Here is the code snippet:

.... // code snippet goes here

.... // CSS code snippet goes here

.... // HTML code snippet goes here

While the code successfully detects collisions with the first brick, it fails to do so with the second brick. This issue seems to stem from the if statement within the move function, but I'm unsure. I have researched extensively, but have not found a solution. Can someone please explain why this behavior is occurring? I prefer to avoid using jQuery, but I am open to using it if necessary.

javascript arrays for-of-loop

Answer 1

Answer №1

Upon exiting the move function, you will be returning from the for loop after handling the initial non-currentElement object:

function move(element,direction) {
    let newX=element.x+direction[0];
    let newY=element.y+direction[1];
    for (let Obj of Objects) {
        if (element!==Obj) {
            if (newX>=0&&newY>=0&&(newX+element.width)<=world.width&&(newY+element.height)<=world.height&&(newX>=(Obj.x+Obj.width)||newY>=(Obj.y+Obj.height)||(newX+element.width)<=Obj.x||(newY+element.height)<=Obj.y)) {
                element.x=newX;
                element.y=newY;
                element.setPosition();
                break;
            } else if (newX<=0&&direction[1]==0) {console.log("Off the world to the left")}
            else if (newY<=0&&direction[0]==0) {console.log("Off the world to the bottom")}
            else if ((newX+element.width)>=world.width&&direction[1]==0) {console.log("Off the world to the right")}
            else if ((newY+element.height)>=world.height&&direction[0]==0) {console.log("Off the world to the top")}
            else if (newX<=(Obj.x+Obj.width)) {console.log("Hitting to the right:",Obj)}
            else if (newY<=(Obj.y+Obj.height)) {console.log("Hitting to the top:",Obj)}
            else if ((newX+element.width)>=Obj.x) {console.log("Hitting to the left:",Obj)}
            else if ((newY+element.height)>=Obj.y) {console.log("Hitting to the bottom:",Obj)}

            // It might be more appropriate to simply continue iterating through the Objects array 
            // rather than returning at this point**
            return 1
        }
    }
    return 0;
}

Answer 2

Upon exiting the move function, you will be returning from the for loop after handling the initial non-currentElement object:

function move(element,direction) {
    let newX=element.x+direction[0];
    let newY=element.y+direction[1];
    for (let Obj of Objects) {
        if (element!==Obj) {
            if (newX>=0&&newY>=0&&(newX+element.width)<=world.width&&(newY+element.height)<=world.height&&(newX>=(Obj.x+Obj.width)||newY>=(Obj.y+Obj.height)||(newX+element.width)<=Obj.x||(newY+element.height)<=Obj.y)) {
                element.x=newX;
                element.y=newY;
                element.setPosition();
                break;
            } else if (newX<=0&&direction[1]==0) {console.log("Off the world to the left")}
            else if (newY<=0&&direction[0]==0) {console.log("Off the world to the bottom")}
            else if ((newX+element.width)>=world.width&&direction[1]==0) {console.log("Off the world to the right")}
            else if ((newY+element.height)>=world.height&&direction[0]==0) {console.log("Off the world to the top")}
            else if (newX<=(Obj.x+Obj.width)) {console.log("Hitting to the right:",Obj)}
            else if (newY<=(Obj.y+Obj.height)) {console.log("Hitting to the top:",Obj)}
            else if ((newX+element.width)>=Obj.x) {console.log("Hitting to the left:",Obj)}
            else if ((newY+element.height)>=Obj.y) {console.log("Hitting to the bottom:",Obj)}

            // It might be more appropriate to simply continue iterating through the Objects array 
            // rather than returning at this point**
            return 1
        }
    }
    return 0;
}

JavaScript will only recognize the first two elements of an array when used in an if statement

Answer №1

Similar questions

Is there a way to use javascript to ensure that CSS variables stick even when overwritten by onclick events?

Guide to embedding bootstrap.min.js into ember-bootstrap extension

Retrieving data from a JSON file using JavaScript in a Node.js environment

What are some ways to enhance the functionality of the initComplete feature in Dat

In Javascript, comparing a regular array value with an array value created by the match function

The color input click event does not work properly when triggered within a context menu event

Utilizing JQuery to extract element tags exclusively, without including their interior content

The process of filtering arrays and utilizing the V-for directive in Vue.js

Is it possible to save data to a file using React?

Troublesome GSP: JavaScript not functioning properly in Gr

Challenges arise when using ui-select with both multiple selection and asynchronous options

Guide to creating intricate designs on an HTML5 Canvas, one pixel at a time

Utilizing HTML5 Canvas for Shadow Effects with Gradients

Simplify code by eliminating uuid references

Troubleshooting issue with setting variables in Firefox's JavaScript

Vue's reactivity in Vue 3 is exhibiting strange behavior with boolean data

Make sure that the parent element is only visible once all of its child elements have

"multer's single file upload functionality is not functioning properly, but the array upload

Error: $controller does not function as a controller within another controller

Saving a JavaScript array as a Redis list: A step-by-step guide