Пытаюсь сделать игру "Убей крота". Код получился следующий, но не работает((( Помогите, пожалуйста, нубу найти исправить ошибки.
(() => {
let playing = true,
activeHole = 1;
const stop = () => playing = true,
getHole = index => document.getElementById(`hole${index}`),
deactivateHole = index =>
getHole( index ).className = 'hole',
activateHole = index =>
getHole( index ).className = 'hole hole_has-mole',
next = () => setTimeout(() => {
if ( !playing ) {
return;
}
deactivateHole( activeHole );
activeHole = Math.floor( 1 + Math.random() * 9 );
activateHole( activeHole );
next();
}, 800 );
next();
})();
let dead = document.getElementById("dead");
let lost = document.getElementById("lost");
for (let index = 1; index <= 9; index++) {
function getHole (index) {
let holeClick = document.getElementById(`hole${index}`);
return holeClick;
}
let hole = getHole (index);
hole.onclick = function() {
if (hole.className.includes("hole_has-mole") === true) {
dead++;
} else {
lost++;
}
if (dead.textContent === 10) {
alert ("Вы победили!");
dead = 0;
lost = 0;
} else if (lost.textContent === 5) {
alert ("Вы проиграли");
dead = 0;
lost = 0;
}
}
}
|
Код:
|
<!doctype html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Mole Game</title>
<link rel="stylesheet" href="task.css">
</head>
<body>
<div id="status" class="status">
Убито кротов: <span id="dead">0</span><br>
Промахов: <span id="lost">0</span><br>
</div>
<div class="hole-game">
<div class="hole hole_has-mole" id="hole1"></div>
<div class="hole" id="hole2"></div>
<div class="hole" id="hole3"></div>
<div class="hole" id="hole4"></div>
<div class="hole" id="hole5"></div>
<div class="hole" id="hole6"></div>
<div class="hole" id="hole7"></div>
<div class="hole" id="hole8"></div>
<div class="hole" id="hole9"></div>
</div>
<script src="base.js"></script>
<script src="task.js"></script>
</body>
</html> |
|
Код:
|
.hole-game {
width: 800px;
display: flex;
flex-wrap: wrap;
justify-content: space-around;
}
.status {
margin-bottom: 20px;
}
.hole {
width: 200px;
height: 200px;
margin-bottom: 30px;
margin-right: 30px;
background: gray;
border-radius: 50%;
}
.hole_has-mole {
background-image: url(https://i.postimg.cc/rmtGV8h9/mole.png);
background-position: center center;
background-repeat: no-repeat;
background-size: contain;
background-color: brown;
} |
