JavaScript - 游戏。匹配随机生成器生成的两个变量的算法

Question

我在简单游戏中的算法有问题。

游戏规则： 将颜色名称（在底部选择一个）与文本的颜色（在顶部）匹配。 如果底部的两个名称都不匹配，请单击 NEXT。

所以问题是第一个正确的匹配在控制台中给出“GOOD”，但第二个、第三个和任何之后的匹配，即使控制台中有正确的匹配，我首先总是“错误”，然后我有“GOOD”。

---

This is a picture with the problem described

脚本似乎记住了过去的随机数并将当前结果与它们匹配，因为在几次匹配后，分数指针很快上升（例如，一次 20 分）。

我很高兴收到您的来信，我该如何解决这个问题。 感谢您的帮助！

这里有 codepen 的链接： http://codepen.io/anon/pen/bWGGga

"use strict"


/*Start Container*/
/* var startContainer = document.getElementById("start_container");
var letsPlay = document.getElementById("start_game"); */
/* letsPlay.addEventListener("click", openTheGame); */


function openTheGame(){
    setInterval(startGame, 3000);
};

openTheGame();


var btn1 = document.getElementById("btn1");
var btn2 = document.getElementById("btn2");
var btn3 = document.getElementById("btn3");

var showColor = document.getElementById("show_color");

//SCORE
var score = document.getElementById("score");




var gameContainer = document.getElementById("game_container");
var gameOverContainer = document.getElementById("game_over_container");

/*Array of Colors*/

var arrCol = ["GREEN", "RED", "YELLOW", "BLUE", "ORANGE", "PURPLE"]


//Array from buttons texts to draw Show Color
var arrShowColor = [];

function startGame(){
    



/*BUTTONS TEXT & COLOR*/



btn1.addEventListener("click", matchColor1);
btn2.addEventListener("click", matchColor2);
btn3.addEventListener("click", matchColor3);

    
    
    //draw numbers for buttons texts & colors
var randomBtn1Num = Math.floor(Math.random() * 3); 
var randomBtn2Num = Math.floor(Math.random() * 3)+3; 
var randomBtn3Num = Math.floor(Math.random() * 6); 


    //Buttons text (next button always "next")
btn1.innerHTML = arrCol[randomBtn1Num];
btn2.innerHTML = arrCol[randomBtn2Num];

    //Buttons Color from random_color class
btn1.className = "random_color" + randomBtn2Num;
btn2.className = "random_color" + randomBtn3Num;
btn3.className = "random_color" + randomBtn1Num;
    
    
/*SHOW TEXT & COLOR*/
    
    //Array from buttons texts to draw Show Color


arrShowColor[0] = randomBtn1Num;
arrShowColor[1] = randomBtn2Num;
arrShowColor[2] = randomBtn3Num;

console.log(arrShowColor);
    
    //Show color
var randomShowColorNum = Math.floor(Math.random()*3);
var randomShowColor = arrShowColor[randomShowColorNum];
    
showColor.className = "random_color" + randomShowColor; 
    
console.log(randomShowColor);
    
    //Show text
    var randomShowText = Math.floor(Math.random() * 6); 
    showColor.innerHTML = arrCol[randomShowText];

    
/*CLICK BUTTON - IF MATCH COLORS*/

function matchColor1(){
  
    if( randomBtn1Num == randomShowColor) {
            
        console.log("GOOD");
      
         score.innerHTML ++;
        
    } else {
        console.log("WRONG");
        /*gameContainer.style.display = "none";
        gameOverContainer.style.display = "inline-block";*/
    } 
};

function matchColor2(){
  
    if( randomBtn2Num == randomShowColor) {
            
        console.log("GOOD");
        
        score.innerHTML ++; 
        
    } else {
        console.log("WRONG");
       
        /*gameContainer.style.display = "none";
        gameOverContainer.style.display = "inline-block";*/
    }
};

function matchColor3(){
    if(randomBtn1Num != randomShowColor && randomBtn2Num != randomShowColor){
        console.log("GOOD");
        
        score.innerHTML ++;
        
    } else {
        console.log("WRONG");
        /*gameContainer.style.display = "none";
        gameOverContainer.style.display = "inline-block";*/
    } 
};


/*Finish startGame*/  
};

/*Main Styles*/

body {
    background-image: url()
}

h4 {
    color: #2626e6;
}


/*Main Container Styles*/

#main_container {
    width:100%;
    text-align:center;
}



/*Start Container Styles*/

#start_container {
    position: relative;
    display: inline-block;
    width: 400px;
    height: 400px;
    top: 20px;
    background-color: rgb(0, 0, 0);
    border-radius: 50%;
    box-shadow: 0px 0px 10px 10px black;
}

#start_container button {

}

/*Game Container Styles*/

#game_container {
    position: relative;
    display: inline-block;
    width: 400px;
    height: 400px;
    top: 20px;
    background-color: rgb(0, 0, 0);
    border-radius: 50%;
    box-shadow: 0px 0px 10px 10px black;
}

.second_level{
     transform: rotateY(180deg);
}

.third_level{
     transform: rotateX(180deg);
}

/*Score Container*/

#score_container {
    display: inline-block;
    position: relative;
    height: 150px;
    width: 150px;
    background-color: rgb(0, 0, 0);
    top: -40px;
    margin-left: -5px;
    margin-right: 30px;
    border-radius: 50%;
    box-shadow: 0px 0px 10px 10px black;
}

#score_container #score {
    display: inline-block;
    height: 30px;
    width: 80px;
    color: #ffffff;
    margin-left: 0;
    margin-right: 0;
}

/*Level Container*/

#time_container {
    display: inline-block;
    position: relative;
    height: 150px;
    width: 150px;
    background-color: rgb(0, 0, 0);
    top: -40px;
    margin-left: 30px;
    border-radius: 50%;
    box-shadow: 0px 0px 10px 10px black;
}

#time_container #time {
    display: inline-block;
    height: 30px;
    width: 80px;
    color: #ffffff;
    margin-left: 0;
    margin-right: 0;
}


/*Random Show Color Style*/

#show_color{
    margin-top: 50px;
    font-size: 40px;
    font-family: sans-serif;
    font-weight: 800;
}


/*Random Colors Classes*/

.random_color0{
    color: green;
}

.random_color1{
    color: red;
}

.random_color2{
    color: yellow;
}

.random_color3{
    color: blue;
}

.random_color4{
    color: orange;
}

.random_color5{
    color: purple;
}

/*Buttons Container Styles*/

#game_container #buttons_container {
    position: relative;
    display: inline-block;
    margin:0 auto;
    margin-top: 120px;
    border-top: 1px solid white;
    padding-top: 30px;
    
}

/*Buttons Style*/

#buttons_container button {
    height: 40px;
    width: 150px;
    font-size: 30px;
    font-weight: 800;
    border: none;
    border-radius: 3px;
    background-color: rgb(0, 0, 0);
    margin: 3px;
}

#buttons_container button:focus{
    outline: 0;
}

#buttons_container button:hover{
    cursor: pointer;
}

/*Game Over Container*/

#game_over_container {
    display: none;
    position: relative;
    width: 400px;
    height: 400px;
    top: 20px;
    background-color: rgb(0, 0, 0);
    border-radius: 50%;
    box-shadow: 0px 0px 10px 10px black;
}

<div id="main_container">
        
       <!--  <div id="start_container">
            <button id="start_game">PLAY GAME</button>
        </div> -->

        <div id="score_container">
            <h4>SCORE:</h4>
                <div id="score">0</div>
        </div>
        
        <div id="game_container">
            <div id="show_color_container">

                <div id="show_color"></div>
                
            </div>

            <div id="buttons_container">

                <button class="btn_select" id="btn1">ONE</button>
                <button class="btn_select" id="btn2">TWO</button>
                <button class="btn_select" id="btn3">NEXT</button>

            </div>
            
        </div>
        
        <div id="game_over_container">
                <h2 id="game_over">GAME OVER</h2>
        </div>
            
       
        
    </div>

Answer 1

在 openTheGame() 内部，您使用的是 setInterval，它每 3 秒调用一次 startGame()，然后每 3 秒创建（添加）新的事件处理程序，调用您的 console.logs 等。将 setInterval 替换为setTimeout:

function openTheGame(){
    setTimeout(startGame, 3000);
};

openTheGame();

编辑：没有彻底检查您的代码，但如果您需要每 3 秒调用一次该函数，那么您需要将点击处理程序的设置移到该函数之外。