Reputation: 21

Simple JavaScript game [Mastermind] issue

I am coding a simple JavaScript version of the classic boardgame "Mastermind".

I have some (for sure fundamental) problems, 99% with JavaScript arrays and referencing their values or elements. These issues am I "solving" currently for quite long time, so I decided to ask.

Facts:

my game pegs, and the game board at all is made in HTML table, pegs are implemented like this(a row contains 4 pegs and a td containing the results image):

<td>
    <a href="javascript:void(0)"
       onClick="changePegColor('0','0'); return false"
       onFocus="this.blur()">
        <img src="img/void.png" width=22 height=22  name="peg_0_0">
    </a>
</td>

my default array declaration looks this (showing both variants tried, none of them worked for me):

var pegsAI = ['pegAI_0', 'pegAI_1', 'pegAI_2', 'pegAI_3'];
var pegsAI = new Array('pegAI_0', 'pegAI_1', 'pegAI_2', 'pegAI_3');

Setting AI's pegs, which is the player going to guess works this way (this is working, no problem with array):
```
pegsAI[position] = Math.floor((Math.random() * possibleColorsNumber));
```

And here are my issues:

At the moment of clicking Submit button, there is a check if every peg in a row has a colour this way (this does neither work, nor throws an error in chrome F12):

...
for (var position = 0; position <= 3; position++) {
    if (document["peg_" + currentRow + "_" + position].src === "img/void.png") {
            alert('Finish color picking!');
        return false;
    }
}
...

After this check, there is function that should convert players pegs to numbers and save it to an array and there is probably a problem, because it doesn't work (array got undefined values in result):

function convertToNumbers() {
    for (var position = 0; position <= 3; position++) {                                         //4 pegs in row, var 'position' declares peg's position
        if (document["peg_" + currentRow + "_" + position].src === possibleColors[index] ) {  //if a peg has an color (his img's src is equal to an element of array 'possibleColors', which contains possible img's src's), then ->
            pegsPlayer[position] = index;                                                       // -> then index of this color saves to pegsPlayer[] array
        }
    }
}

///added for explanation

my function for calculating score:

var goodPegPlayer = [false, false, false, false];
var goodPegAI = [false, false, false, false];

function calcSkore() {
convertToNumbers();
alert("array values" + pegsPlayer[0] + "_" + pegsPlayer[1] + "_" + pegsPlayer[2] + "_" + pegsPlayer[3]);
for (var position = 0; position <= 3; position++) {
    goodPegPlayer[position] = false;
    goodPegAI[position] = false; 
    if (pegsPlayer[position] === pegsAI[position]) {
        skoreBlack++;
        goodPegPlayer[position] = true;
        goodPegAI[position] = true;
    }
} 

for (var position = 0; position <= 3; position++) {
    if (goodPegPlayer[position] === false) {
        for (var positionAI = 0; positionAI <= 3; positionAI++) {
            if ((position !== positionAI) && (goodPegPlayer[position] === false) && (goodPegAI[positionAI] === false)) {
                if (pegsPlayer[position] === pegsAI[positionAI]) {
                    skoreWhite++;
                    goodPegPlayer[position] = true;
                    goodPegAI[positionAI] = true;
                }
            }
        }
   }
}

resultsSubmit();

}

!! right after using converToNumber() function in this function, an alert() is used to check if the values are correct.

Upvotes: 2

Answers (2)

John Slegers

Reputation: 47101

I wrote my own version of Mastermind back in 2004.

The code is a bit outdated, but it still works in modern browsers. I'm not sure if it's helpful to you, but feel free to take a look!

The code is MIT licensed, which means you can freely use it (or parts of it) anywhere you want!

Resources

Upvotes: 1

net.uk.sweet

Reputation: 12431

You're not accessing the DOM correctly. Try using the id attribute instead of name to identify your images and update your JavaScript as follows:

for (var position = 0; position <= 3; position++) {
    var id = "peg_" + currentRow + "_" + position;
    if (document.getElementById(id).src === "img/void.png") {
            alert('Finish color picking!');
        return false;
    }
}