Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   Как заставить функцию getHole работать (https://javascript.ru/forum/misc/78346-kak-zastavit-funkciyu-gethole-rabotat.html)

katjushkabow 30.08.2019 18:32

Как заставить функцию getHole работать
 
Пытаюсь сделать игру "Убей крота". Код получился следующий, но не работает((( Помогите, пожалуйста, нубу найти исправить ошибки.

(() => {
  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;
}


рони 30.08.2019 18:43

katjushkabow,
dead.innerHTML++;
        } else {
            lost.innerHTML++;

и ниже тоже добавить innerHTML.


Часовой пояс GMT +3, время: 00:27.