How to write javascript logic for guessing game

Question

I am trying to make a simple version of the Guess Who guessing game. I have some global variables to store things, for example...

var allTheCharacters = [];
    var allTheCharactersComp = [];
    var theHuman = []; //Random Character stored here
    var theComputer = []; //Random Character stored here
    var singleChar;
        [{
        "id": 1,
        "male": true,
        "female": false,
        "name": "Jimmy",
        "bald": false,
        "black hair": true,
        "white hair": false,
        "blonde hair": false,
        "red hair": false,
        "purple hair": false,
        "blue hair": false,
        "beard": false,
        "moustache": false,
        "glasses": false,
        "earrings": false,
        "hat": true,
        "brown skin": true,
        "pale skin": false,
        "image": "img/face1.jpg"
    }, {
        "id": 2,
        "male": false,
        "female": true,
        "name": "Vanessa",
        "bald": false,
        "black hair": false,
        "white hair": false,
        "blonde hair": true,
        "red hair": false,
        "purple hair": false,
        "blue hair": false,
        "beard": false,
        "moustache": false,
        "glasses": false,
        "earrings": false,
        "hat": false,
        "brown skin": false,
        "pale skin": true,
        "image": "img/face2.jpg"
    }, {
        "id": 3,
        "male": true,
        "female": false,
        "name": "Benjamin",
        "bald": true,
        "black hair": false,
        "white hair": true,
        "blonde hair": false,
        "red hair": false,
        "purple hair": false,
        "blue hair": false,
        "beard": false,
        "moustache": true,
        "glasses": false,
        "earrings": false,
        "hat": false,
        "brown skin": false,
        "pale skin": true,
        "image": "img/face3.jpg"
    }]
    var newGame = function() {
        $('.start-button').one('click', function(event) {
            turn == 0;
            humanTurn();
            //checkForWinner();
    
            turn == 1;
            computerTurn();
            //checkForWinner();
        });
    };
    $(document).ready(function() {
        newGame();
    });

    //Get <SELECT> values
    function grabInputValue() {
        // click event on select submit
        $(".pickAFeatureBtn").on('click', function(e) {
            e.preventDefault();
    
            humanTurn();
            console.log(turn);
        });
    }
    grabInputValue();
    

    function humanTurn() {
        allTheCharacters;
        //console.log(allTheCharactersComp);
        for(i=allTheCharactersComp.length; i >= 0; i-- ){
            //console.log(allTheCharactersComp[i]);
            var singleChar = allTheCharactersComp[i];
            // 
            $.each(singleChar, function(index, val) {
                 // console.log(index, val);
                 
                 var hasFeature = ($('.featureList').val());
                 
                 if(index == hasFeature && val == false){
                    console.log(index + " : " + val);
                    //Need to remove object from allThe Characters
                    allTheCharactersComp.splice(index, 1);
                 }
            });
        }
        
        console.log(allTheCharactersComp);
        turn = 1;
        // console.log(turn);
    };
    
    function computerTurn() {
     // To come...
     // Will this just be similar to the humanTurn() code?
    };

    function checkForWinner() {
     // To come...
     // check for allTheCharacters.length = 1;
    };

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<button type="submit" class="pickAFeatureBtn">Check for Attribute</button>
    <select class="featureList">
    <option class="charFeature" value="male">male</option>
    <option class="charFeature" value="female">female</option>
    <option class="charFeature" value="black hair">black hair</option>
    <option class="charFeature" value="white hair">white hair</option>
    <option class="charFeature" value="blonde hair">blonde hair</option>
    <option class="charFeature" value="red hair">red hair</option>
    <option class="charFeature" value="blue hair">blue hair</option>
    <option class="charFeature" value="purple hair">purple hair</option>
    <option class="charFeature" value="bald">bald</option>
    <option class="charFeature" value="beard">beard</option>
    <option class="charFeature" value="moustache">moustache</option>
    <option class="charFeature" value="glasses">glasses</option>
    <option class="charFeature" value="earrings">earrings</option>
    <option class="charFeature" value="hat">hat</option>
    <option class="charFeature" value="green eyes">green eyes</option>
    <option class="charFeature" value="black eyes">black eyes</option>
    <option class="charFeature" value="brown skin">dark skin</option>
    <option class="charFeature" value="pale skin">light skin</option>
    </select>

So - In the humanTurn() function what I am trying to do is check if the value of the dropdown is the same as the random Character held in theComputer[] and if so delete that character from allTheCharactersComp[] However, when I console.log the effects of the - allTheCharacters.splice(index, 1) - it only returns a single object in the array, rather that having removed all the characters that dont match the condition in the if statement, leaving those that do.

Thank you for reading this far, I know there is a load of stuff here but I'm at a loss how to get this working. Any help would be greatly appreciated.

If there is any other bits of code that you need to see just shout out. Thanks again.

`splice` returns the removed element of the array, do a `console.log` of the array after the splice and it should have only the other elements You should also try using `filter` instead of iterating the array — Paraíso, Mar 09 '17 at 12:55
Thanks, I tried this. However, the result console.logs for each iteration of the loop but still goes all the way down to a single result left. — Orbital676, Mar 09 '17 at 13:16

Weedoze · Accepted Answer · 2017-03-09T13:22:19.137

You can use a simpler code like the following.

Explanation are in the code

var textCharactersLeft = $('#charactersLeft');
var textCharacterToFind = $('#characterToFind');
var foundTitle = $('#found');
var allTheCharacters=[{id:1,male:!0,female:!1,name:"Jimmy",bald:!1,"black hair":!0,"white hair":!1,"blonde hair":!1,"red hair":!1,"purple hair":!1,"blue hair":!1,beard:!1,moustache:!1,glasses:!1,earrings:!1,hat:!0,"brown skin":!0,"pale skin":!1,image:"img/face1.jpg"},{id:2,male:!1,female:!0,name:"Vanessa",bald:!1,"black hair":!1,"white hair":!1,"blonde hair":!0,"red hair":!1,"purple hair":!1,"blue hair":!1,beard:!1,moustache:!1,glasses:!1,earrings:!1,hat:!1,"brown skin":!1,"pale skin":!0,image:"img/face2.jpg"},{id:3,male:!0,female:!1,name:"Benjamin",bald:!0,"black hair":!1,"white hair":!0,"blonde hair":!1,"red hair":!1,"purple hair":!1,"blue hair":!1,beard:!1,moustache:!0,glasses:!1,earrings:!1,hat:!1,"brown skin":!1,"pale skin":!0,image:"img/face3.jpg"}];
textCharactersLeft.text(allTheCharacters.map(c => c.name).join(","));

//Possible characters for computer character
var charactersLeftForComputer = allTheCharacters;
//Possible characters for human character
var characterLeftForHuman = allTheCharacters;

//select a random character for human
var theHuman = allTheCharacters[Math.floor(Math.random() * allTheCharacters.length - 1)];
//select a random character for computer
var theComputer = allTheCharacters[Math.floor(Math.random() * allTheCharacters.length - 1)];

textCharacterToFind.text(theComputer.name);

//Add onclick event to the pick feature button.
$('.pickAFeatureBtn').on('click', function(event) {
  event.preventDefault();
  humanTurn();
});

//Call on pick feature click
function humanTurn() {
  //get the feature selected
  let selectedFeature = document.querySelector('.featureList').value;
  //Remove all the possible characters that have not the feature.
  //eg : If select "male" and computer character is a male. This will remove all the female from charactersLeftForComputer.
  charactersLeftForComputer = charactersLeftForComputer.filter(character => character[selectedFeature] === theComputer[selectedFeature]);
  //if charactersLeftForComputer is only one character. this means that we found the character
  //Else there is still have possibilities
  textCharactersLeft.text(charactersLeftForComputer.map(c => c.name).join(","));
  if(charactersLeftForComputer.length === 1)
    foundTitle.show();
}

#found{
display:none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<button type="submit" class="pickAFeatureBtn">Check for Attribute</button>
<select class="featureList">
    <option class="charFeature" value="male">male</option>
    <option class="charFeature" value="female">female</option>
    <option class="charFeature" value="black hair">black hair</option>
    <option class="charFeature" value="white hair">white hair</option>
    <option class="charFeature" value="blonde hair">blonde hair</option>
    <option class="charFeature" value="red hair">red hair</option>
    <option class="charFeature" value="blue hair">blue hair</option>
    <option class="charFeature" value="purple hair">purple hair</option>
    <option class="charFeature" value="bald">bald</option>
    <option class="charFeature" value="beard">beard</option>
    <option class="charFeature" value="moustache">moustache</option>
    <option class="charFeature" value="glasses">glasses</option>
    <option class="charFeature" value="earrings">earrings</option>
    <option class="charFeature" value="hat">hat</option>
    <option class="charFeature" value="green eyes">green eyes</option>
    <option class="charFeature" value="black eyes">black eyes</option>
    <option class="charFeature" value="brown skin">dark skin</option>
    <option class="charFeature" value="pale skin">light skin</option>
    </select>
    <p>Character to find : <span id="characterToFind"></span></p>
    <p>Characters left :<span id="charactersLeft"></span></p> 
    <h1 id="found">FOUND !</h1>

@Orbital676 No problem. I removed the `console.log`. Now You can see who's left and who you are supposed to find — Weedoze, Mar 09 '17 at 13:22
Hi @weedoze , can you explain the arrow syntax to me please in this line... charactersLeftForComputer = charactersLeftForComputer.filter(character => character[selectedFeature] === theComputer[selectedFeature]); — Orbital676, Mar 09 '17 at 16:27
@Orbital676 If it helped you, don't forget to thick as the answer :) — Weedoze, Mar 10 '17 at 10:09

score 0 · Answer 2 · answered Mar 09 '17 at 13:00

0

Since splice() returns the removed element and changes the original array just do

if(index == hasFeature && val == false){
  console.log(index + " : " + val);
  //Need to remove object from allThe Characters
  //allTheCharactersComp = allTheCharactersComp.splice(index, 1);
  allTheCharactersComp.splice(index, 1);
}

answered Mar 09 '17 at 13:00

vassiliskrikonis

566
2
10

After trying this, when I console.log allTheCharactersComp it still only logs the array containing a single object rather than logging all the objects that met the condition. However, I will change code to reflect your advice. – Orbital676 Mar 09 '17 at 13:09

How to write javascript logic for guessing game

2 Answers2