If statement that checks a class name

JavaScript
1

Hey guys! So I’m making a game with js and jquery, and I have 2 players that need to spawn randomly.
The game map is composed of tiles and some of the tiles are blocked(the player can’t click on them), they have a class of “unavaliable” and I need to make it so that when the players spawn, they don’t spawn on those tiles that are blocked. The question is, can you make an if statement that checks if the tile has a certain class, and if it does, then don’t spawn the player there. What I have for now is:

// This asigns 2 random tiles for player one and player two
let randomSpawn = tiles[Math.floor(Math.random() * tiles.length)];
let randomSpawnTwo = tile[Math.floor(Math.random() * tile.length)];
// This is an if statement that chekcs if the class name coresponds to "unavaliable"
function checkIfempty(){
    
    if(randomSpawn.className === "unavaliable"){
        randomSpawn = tiles[Math.floor(Math.random() * tiles.length)]
        console.log('heyo it does')
    }else if(randomSpawn.classname !== "unavaliable"){
        randomSpawn.appendChild(playerOne);
    }
    
    if(randomSpawnTwo.className === "unavaliable"){
        randomSpawnTwo = tiles[Math.floor(Math.random() * tiles.length)];
    }else if(randomSpawnTwo.className !== "unavaliable"){
        randomSpawnTwo.appendChild(playerTwo);
    }
}

So what I bassically want, is, if the already assigned random tile has a class of “unavaliable”, pick another random field, and place the player there. This of course doesn’t work for some reason that I’m unaware of :smiley:
And the function is set to run on load.

2

Your code assumes that all divs have exactly one classname, while in reality they can have multiple. The easiest way to check is to use is classList. The check would then be

if (randomSpawn.classList.contains('unavailable')) {}

Also, you’re referring to the global state from within a function, which is a Bad Idea TM as it can get quite complicated to debug.

Lastly, what if the second random item from the list is also unavailable? You need to keep picking a new random spot until you find one that is available.

I would suggest something like this

function getRandomAvailablePosition(tiles) {
    let position;
    while (true) {
        position = tiles[Math.floor(Math.random() * tiles.length)];
        if (!position.classList.contains('unavailable')) {
            return position;
        }
    }
}

randomPositionPlayerOne = getRandomAvailablePosition(tiles);
randomPositionPlayerTwo = getRandomAvailablePosition(tiles);

Also you’d need to make sure that player one and player two don’t get spawned in the same spot, but I’ll leave that as an exercise for the reader.

1 Like
3

Hey! Thanks for your reply! I found out after I’ve posted this that classname can only check for one class so I’ve just used the while loop and jquery’s hasClass(). I’m gonna assume your solution also works, so thanks! :slight_smile:

1 Like
4

classList works different from classname. With classList you can check for any number of classes. As you’ve found a working solution using jQuery though you can leave exploring other options for later.

Just be wary of being trapped in using jQuery when you don’t need to. It can become a crutch that prevents your further growth as a programmer.

5

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.