How Can I Make a Condition for Two Values That I Get from Two Randoms Array Elements?-CodePudding

I am trying to make a simple javascript game. I made 8 divs to present cards. I created an array. Array includes two reds, two blues, two yellow, two greens. user will click just 2 cards and if cards are same colors, user will win game. if cant find 2 same colors at once, user will lose. Now when i click a card, it gets a color from this array and i remove this color with indexOf and slice. But i want to make a code that first value and second value condition. we will get two values and ll ask if two values are same, user will win. i am adding codes and waiting your help.

<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="stil.css">
</head>

<div id="ana">
    
<div id="one" onclick="card1f()" ></div>
<div id="two" onclick="card2f()" ></div>
<div id="three" onclick="card3f()" ></div>
<div id="four" onclick="card4f()" ></div>


</div>


<div id="ana2">
    
    <div id="five" onclick="card5f()" ></div>
    <div id="six" onclick="card6f()"></div>
    <div id="seven" onclick="card7f()" ></div>
    <div id="eight" onclick="card8f()" ></div>
    
    
    </div>
    
<script>

var cards = ["red","red","yellow","yellow","blue","blue","green","green"];

function card1f() {

var card1 = document.getElementById("one").style.backgroundColor = cards[Math.floor(Math.random() * cards.length)];
var index = cards.indexOf(card1);
cards.splice(index, 1);

}

function card2f() {

var card2 = document.getElementById("two").style.backgroundColor = cards[Math.floor(Math.random() * cards.length)];
var index = cards.indexOf(card2);
cards.splice(index,1);


}

function card3f() {

var card3 = document.getElementById("three").style.backgroundColor = cards[Math.floor(Math.random() * cards.length)];
var index = cards.indexOf(card3);
cards.splice(index, 1);


}

function card4f() {

var card4 = document.getElementById("four").style.backgroundColor = cards[Math.floor(Math.random() * cards.length)];
var index = cards.indexOf(card4);
cards.splice(index, 1);


}

function card5f() {

var card5 = document.getElementById("five").style.backgroundColor = cards[Math.floor(Math.random() * cards.length)];
var index = cards.indexOf(card5);
cards.splice(index, 1);


}

function card6f() {

var card6 = document.getElementById("six").style.backgroundColor = cards[Math.floor(Math.random() * cards.length)];
var index = cards.indexOf(card6);
cards.splice(index, 1);


}

function card7f() {

var card7 = document.getElementById("seven").style.backgroundColor = cards[Math.floor(Math.random() * cards.length)];
var index = cards.indexOf(card7);
cards.splice(index, 1);


}

function card8f() {

var card8 = document.getElementById("eight").style.backgroundColor = cards[Math.floor(Math.random() * cards.length)];
var index = cards.indexOf(card8);
cards.splice(index, 1);


}

</script>





</html>
</body>

CodePudding user response：

I did not test this, just wrote code here directly, so I'm not sure this is right.

But I think you can make your code like the concept as follow.

var col = ""
function winOrLose(color) {
  if(!col) {
    col = color;
   return;
  }

 if(col == color) {
     alert("You Win");
 } else {
     alert("You Lose");   
 }
 cards = ["red","red","yellow","yellow","blue","blue","green","green"];
 col = "";
}

And call this function in your all function like this

function card7f() {

    var card7 = document.getElementById("seven").style.backgroundColor = 
    cards[Math.floor(Math.random() * cards.length)];
    var index = cards.indexOf(card7);

    winOrLose(cards[index])   //  <-- call function 
    cards.splice(index, 1);
}

CodePudding user response：

You can just use 2 if statements.