如何为猜谜游戏编写javascript逻辑

时间:2017-03-09 12:43:38

标签: javascript jquery arrays json logic

我正在尝试制作Guess Who猜谜游戏的简单版本。我有一些全局变量来存储东西,例如......



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;
    };
&#13;
<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>
&#13;
&#13;
&#13;

所以 - 在humanTurn()函数中,我要做的是检查下拉列表的值是否与计算机[]中保存的随机字符相同,如果是,则从allTheCharactersComp []中删除该字符 但是,当我在console.log中 - allTheCharacters.splice(index,1)的效果时 - 它只返回数组中的单个对象,而不是删除了与if语句中的条件不匹配的所有字符,这样做。

感谢您阅读本文,我知道这里有很多东西,但我不知道如何让这个工作。任何帮助将不胜感激。

如果您需要看到任何其他代码,请大声喊出来。 再次感谢。

2 个答案:

答案 0 :(得分:2)

您可以使用更简单的代码,如下所示。

解释在代码中

&#13;
&#13;
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();
}
&#13;
#found{
display:none;
}
&#13;
<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>
&#13;
&#13;
&#13;

答案 1 :(得分:0)

由于<?php session_start(); if (isset($_SESSION ['username']) && date("Y-m-d H:i:s")<date('Y-m-d H:i:s', strtotime($_SESSION['timestamp'].' + 20 minute'))) { echo 'Welcome, ' .$_SESSION['username']; } else { session_unset; echo 'please log in'; } 返回已删除的元素并更改原始数组,只需执行

splice()