Changing the global scope variable inside of a function

game
jquery

#1

Hey guys! So I'm building a turn based game with javascript and I'm currently struggling with limiting player movement.
So this is what I have:

let playerOneMoves = 0;
let playerTwoMoves = 0;

function movePlayerOne(){
    $(tile).click(function(){
        playerOneMoves += 1;
        if(playerOneMoves < 4){
            $(".active").append(playerOne);
        }else if(playerOneMoves == 4){
            alert("No more moves, players two turn!");            
            playerTwoMoves = 0;
            movePlayerTwo();
            
        }
    })
}
function movePlayerTwo(){
    $(tile).click(function(){
        playerTwoMoves += 1;
        if(playerTwoMoves < 4){
            $(".active").append(playerTwo);
        }else if(playerTwoMoves == 4){
            playerOneMoves = 0;
            alert("No more moves, players one turn!")
            movePlayerOne();

        }   
    })
}

So as player 2 finishes his move, and the next function (moveplayerone) is loaded, I only have 1 move with player 1. After a few more clicks, it starts appending both players to the same field.
So my question is, why can't I reset the value of "let playerOneMoves = 0;" inside of a function?
If you want to see the code more in-depth, you can check it on CodePen: https://codepen.io/ronydkid/pen/oyqxJY


#2

There's nothing wrong with this code as far as your question is concerned. Your problem is elsewhere. Please give us more information about what errors you're seeing in the console, variable values, or other information we can use to help you.

Side Note: always remember to never use == unless you know why you'd want to use it (it's rare and better if you case the variables), always use a strict comparison of === or !==.


#3

let tile = document.getElementsByClassName('tile');

$(tile).click(function(){

tile is not a selector string, and cant be used in this way.
The appropriate selector string would be ".tile"


#4

That's exactly what's going on my nerves! I don't have any errors in the console. Oh sorry about that, I've changed it. Thanks!
You can inspect my code at the link I've provided, but it's really not something complicated and I can't see where I went wrong.


#5

It's not a class selector, I've declared it already and I'm just using the variable. At the begining of the code I've stated:

let tile = document.getElementsByClassName('tile');

#6

Odd. That shouldnt work, but it does... jQuery should be expecting a string there instead of an element array. Oh well.

One of the problems you're running into is that you're declaring click() over and over again, which doesnt remove the OLD click event, it just sets up a new one. See the off syntax. (Another is that your initial invocation on line 93 should just call movePlayerOne(), rather than bind it to a click.)


#7

Thank you. I will look into that!


#8

Btw, I've bound that just on the codepen, since I couldn't bind it to the body. In the main javascript that's on my pc the moveplayer function is bound to body onload = "moveplayerone"


#9

in jQuery terms, you can do that by:

$(function() { movePlayerOne(); });
which is equivilant to $(document).ready(function() { movePlayerOne(); });


#10

All right, thanks for the help, didn't know about that! I'm still just a beginner at jquery and js :slight_smile: