Witam
Chciałem zrobić grę ale wyszło jak zawsze xD. Zatrzymałem się na porównaniu klikniętej karty z hasłem, gra polega na tym że hasło jest w języku holenderskim a my musimy kliknąć odpowiedni kolor.
Tak jak w kodzie poniżej mam dwie tablice jedna z holenderskimi nazwami druga z angielskimi maja ta sama długość i nazwy są w tej samej kolejności. Do angielskich podłączyłem kliknięcie a losowane hasło do holenderskich i teraz moje pytanie brzmi jak mogę porównać te tablice żeby były takie same elementy?? Próbowałem różnych rzeczy ale nie mogę tego ogarnąć może da się to porównać do długości łańcucha albo coś bo w sumie to ja próbowałem porównywać tylko do nazw i tak tworzyłem nowe tablice nadpisywałem usuwałem itd... i nie wyszło :( Z góry dzięki za odp.Pozdrawiam
JS
const hasla = ["zwart", "bruin", "oranje", "rood", "geel", "wit", "goud", "blauw", "groen", "paars", "grijs", "zilver", "roze", "khaki", "beige", "bosbes"];
const pass = ["black", "brown", "orange", "red", "yellow", "white", "gold", "blue", "green", "violet", "gray", "silver", "pink", "khaki", "beige", "blueberry"];
let activeCard = "";
const klikcard = function()
{
activeCard = this;
/*if(activeCard.className == ...............????.............)
{
console.log("win")
}
else
{
console.log("loos")
if(score <= 0)
{
console.log("loo00ooos")
}
}*/
}
for(i=2; i<=17;i++){
const num = Math.floor(Math.random() * pass.length);
var div = document.getElementsByTagName('div')[i];
div.classList.add(pass[num]);
pass.splice(num, 1);
div.addEventListener("click", klikcard);
//pass1.push(div.className);
console.log()
}
document.getElementById("haslo").style.paddingTop = "50px";
const position = Math.floor(Math.random() * hasla.length);
document.getElementById("haslo").innerHTML = hasla[position];
html
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body>
<div id="container">
<div id="haslo"></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div class="score">Live : 3</div>
</div>
<script src="game1.js"></script>
</body>
</html>
css
body
{
margin:0;
padding:0;
background-color:gray;
color:black;
}
#container
{
width:1000px;
height:100%;
margin-left:auto;
margin-right:auto;
text-align:center;
}
#haslo
{
width:900px;
height:80px;
margin-left:auto;
margin-right:auto;
margin-top:20px;
border:2px solid black;
text-align:center;
font-size:36px;
font-weight:700;
color:white;
letter-spacing:5px;
text-transform:uppercase;
border-radius:40px;
margin-bottom:50px;
}
.black
{
background-color:#000000;
width:200px;
height:150px;
border: 4px solid black;
display:inline-block;
}
.brown
{
background-color:#964B00;
width:200px;
height:150px;
border: 4px solid black;
display:inline-block;
}
.orange
{
background-color:#FFA500;
width:200px;
height:150px;
border: 4px solid black;
display:inline-block;
}
.red
{
background-color:#FF0000;
width:200px;
height:150px;
border: 4px solid black;
display:inline-block;
}
.yellow
{
background-color:#FFFF00;
width:200px;
height:150px;
border: 4px solid black;
display:inline-block;
}
.white
{
background-color:#FFFFFF;
width:200px;
height:150px;
border: 4px solid black;
display:inline-block;
}
.gold
{
background-color:#FFD700;
width:200px;
height:150px;
border: 4px solid black;
display:inline-block;
}
.blue
{
background-color:#0000FF;
width:200px;
height:150px;
border: 4px solid black;
display:inline-block;
}
.green
{
background-color:#008000;
width:200px;
height:150px;
border: 4px solid black;
display:inline-block;
}
.violet
{
background-color:#B803FF;
width:200px;
height:150px;
border: 4px solid black;
display:inline-block;
}
.gray
{
background-color:#808080;
width:200px;
height:150px;
border: 4px solid black;
display:inline-block;
}
.silver
{
background-color:#C0C0C0;
width:200px;
height:150px;
border: 4px solid black;
display:inline-block;
}
.pink
{
background-color:#FFC0CB;
width:200px;
height:150px;
border: 4px solid black;
display:inline-block;
}
.khaki
{
background-color:#618358;
width:200px;
height:150px;
border: 4px solid black;
display:inline-block;
}
.beige
{
background-color:#C2B280;
width:200px;
height:150px;
border: 4px solid black;
display:inline-block;
}
.blueberry
{
background-color:#660066;
width:200px;
height:150px;
border: 4px solid black;
display:inline-block;
}
.score
{
text-align:center;
border: 2px solid black;
font-size:36px;
color:black;
border-radius:40px;
width:300px;
margin-left:auto;
margin-right:auto;
}
