Hütchen-Spiel
HTML
<html lang="de">
<head>
</head>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hütchen-Spiel</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="flexHut">
<div class="hut">1<img src="#" alt="Hut1"></div>
<div class="hut">2<img src="#" alt="Hut2"></div>
<div class="hut">3<img src="#" alt="Hut3"></div>
</div>
<p>Du hast <span class="win"></span></p>
<p>Die richtige Zahl lautet <span class="zahl"></span></p>
<input type="button" value="Reload">
<script src="main.js"></script>
</body>
</html>
CSS
body {
font-family: sans-serif;
margin: 0;
}
.flexHut {
display: flex;
}
.hut {
width: 10%;
margin: 0 20px;
font-size: 4em;
display: flex;
flex-direction: column;
align-items: center;
}
img {
width: 100%;
}
p {
font-size: 2.5em;
}
span {
font-size: 1.2em;
font-weight: bold;
}
JS
let win = document.querySelector(".win");
let zahl = document.querySelector(".zahl");
let hut = document.querySelectorAll(".hut");
let reload = document.querySelector("input");
let zufallsZahl = getZufallszahl(1, 3);
reload.addEventListener("click", () => {
zufalssZahl = getZufallszahl(1, 3);
win.textContent = "";
zahl.textContent = "";
hut.forEach(addClick);
});
hut.forEach(addClick);
function addClick(elem) {
elem.addEventListener("click", checkWin);
}
function removeClick(elem) {
elem.removeEventListener("click", checkWin);
}
function checkWin(e) {
if (zufallsZahl === parseInt(e.currentTarget.textContent)) {
win.textContent = " gewonnen";
}
else {
win.textContent = " verloren";
}
zahl.textContent = " " + zufallsZahl;
hut.forEach(removeClick);
}
function getZufallszahl(min, max) {
return Math.floor(Math.random() * (max - min + 1));
}