Игра "Убей крота"

@Anna_Batuk · Регистрация: 19.01.2015

Студворк — интернет-сервис помощи студентам

Здраствуйте!
Необходимо реализовать игру по известной "Убей крота"
Проблема в том, что скрипт не работает, и я никак не могу найти где ошибка. Подскажите, пожалуйста
Ниже код html, js и gif работы игры

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
<!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">    
    <link rel="stylesheet" href="../../assets/css/style.css" />
    <link rel="stylesheet" href="task.css">
    <title>Mole Game</title>    
</head>
<body>
    <header class="header">
        <div class="logo__container">
          <a href="https://netology.ru/" class="logo__link"></a>
        </div>
        <h1 class="header__title">
            Домашнее задание к занятию 1.1 «Возможности JavaScript в браузере». Игра «Убей кротов»
        </h1>
    </header>
    <main class="content">
        <div class="card">
            <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>
        </div>
    </main>    
    <script src="base.js"></script>
    <script src="task.js"></script>
</body>
</html>

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
const dead = document.getElementById('dead').innerHTML;
const lost = document.getElementById('lost').innerHTML;
let counterDead = 0;
let counterLost = 0;
getHole = index => document.getElementById(hole$,{index});// выбор дыры по index
for (holeIndex = 1; holeIndex < 10; holeIndex++) {
let hole = getHole(holeIndex);
// holeHandler - функция, которая запустится по клику
hole.addEventListener( 'click', function() {
if ( hole.classList.contains( 'hole_has-mole')){
counterDead++;
dead.textContent = counterDead;
} else {
counterLost++;
lost.textContent = counterLost;
}
 
if (counterDead == 3) {
//dead.textContent = counterDead; //?
// playing = false;
alert ('win');
counterDead = 0;
counterLost = 0;
dead.textContent = counterDead;
}
});
}

Условия победы и поражения

Случайным образом у одной из лунок добавляется класс hole_has-mole, что значит, что в лунке есть крот.
Только если при клике на лунку с классом hole_has-mole вы должны засчитать +1 к победе. В ином случае - поражение.

Используйте цикл для задания обработчика для каждой лунки.
Для проверки на наличие того или иного класса, используйте метод includes:

@klyapa · 11.01.2023, 18:41

Три года задачку решаете что ли? Уже бы и css c другого сайта с аналогичной задачей притащили, для визуализации.

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
.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(images/mole.png);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: contain;
  background-color: brown;
}

@Anna_Batuk · 12.01.2023, 03:58 **[ТС]**

вообще только тут написала про задачу. не тащила с других сайтов ничего. файлы html и css уже прописаны.
а js сама я писала и не копировала

@Deitsura · 12.01.2023, 08:10

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
    const dead = document.getElementById('dead');
    const lost = document.getElementById('lost');
    var time = 1000;
    var place = 1;
    var replaceMole = () => {
        let newPlace = Math.floor( Math.random() * 5 )+1;
        if ( newPlace == place ) {
            replaceMole();
            return;
        }
        //console.log(newPlace);
        document.getElementById(`hole${place}`).classList.remove('hole_has-mole');
        document.getElementById(`hole${newPlace}`).classList.add('hole_has-mole');
        place = newPlace;
        setTimeout( function(){replaceMole();}, time );
    };
 
    let counterDead = 0;
    let counterLost = 0;
    getHole = index => document.getElementById(`hole${index}`);// выбор дыры по index
    for ( holeIndex = 1; holeIndex < 10; holeIndex++ ) {
        let hole = getHole(holeIndex);
        // holeHandler - функция, которая запустится по клику
        hole.addEventListener( 'click', function() {
            if ( hole.classList.contains( 'hole_has-mole')){
                counterDead++;
                dead.textContent = counterDead;
            } else {
                counterLost++;
                lost.textContent = counterLost;
            }
 
            if (counterDead == 3) {
                //dead.textContent = counterDead; //?
                // playing = false;
                alert ('win');
                counterDead = 0;
                counterLost = 0;
                dead.textContent = counterDead;
            }
        });
 
    }
    replaceMole();

добавил рекурсивную функцию смены крота, можете дальше её под своё усмотрение адаптировать или на свой лад

Добавлено через 13 минут
let newPlace = Math.floor( Math.random() * 8 )+1; - в 6 строчке надо 5 на 8 поменять чтобы все 9 кругов проходка была

@klyapa · 12.01.2023, 12:48

Сообщение от Anna_Batuk

вообще только тут написала про задачу. не тащила с других сайтов ничего. файлы html и css уже прописаны.
а js сама я писала и не копировала

Ну тогда ладно, а то я ваш html очень быстро нашёл...
=> [del]

В принципе, это детская задача, которая буквально на коленке решается. ... ща распишу, от нх делать, как я вижу, пошагово...

Добавлено через 2 минуты
таким вижу html и css

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<div>Убито кротов: <span id="dead">0</span></div>
<div>Промахов: <span id="lost">0</span></div>
<table id="table">
    <tr>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td></td>
    </tr>
</table>

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
table {
    border: 1px solid #ddd;
    border-spacing: 40px;
}
 
td {
    width: 70px;
    height: 70px;
}
 
.hole {
    background-color: #808080;
    background-image: url(images/4-3.png); /* здесь свой адрес крота */
    background-position: center;
    background-size: contain;
}

Добавлено через 29 секунд
дальше будет js ...

Добавлено через 2 минуты
таблица table, два счётчика dead и lost, коллекция ячеек cells (или "дырок", по вашему, где будет появляться "крот") и айдишник интервала idInterval, для остановки игры

JavaScript
1
2
3
4
const [table, dead, lost] = ['table', 'dead', 'lost'].map(id => document.getElementById(id));
const cells = table.querySelectorAll('td');
 
let idInterval = null;

Добавлено через 2 минуты
функция rand возвращает рандомное число от 0 (включительно) до n (не включая n)

JavaScript
1
2
3
function rand(n) {
    return Math.floor(Math.random() * n);
}

Добавлено через 47 секунд
такая конструкция возвратит рандомную ячейку

JavaScript
1
cells[rand(cells.length)]

Добавлено через 2 минуты
функция cls принимает элемент, устанавливает ему класс hole и через 0.5 сек. удаляет этот класс

JavaScript
1
2
3
4
function cls(elem) {
    elem.classList.add('hole');
    setTimeout(() => elem.classList.remove('hole'), 500);
}

Добавлено через 6 минут
функция shot - обработчик клика. считает клики (промах/попадание) и проверяет счетчики.
в зависимости от результата вызывает функцию stop, с соотв. аргументом

stop я ещё не допилил...

JavaScript
1
2
3
4
5
6
7
function shot(e) {
    if(e.target.classList.contains('hole')) dead.innerText = Number(dead.innerText) + 1;
    else lost.innerText = Number(lost.innerText) + 1;
    
    if(Number(dead.innerText) === 10) stop('выиграли');
    if(Number(lost.innerText) === 10) stop('проиграли');   
}

Добавлено через 6 минут
функция start запускает всю эту шнягу, устанавливает обработчик на всю таблицу (Делегирование событий) и ежесекундно вызывает функцию cls, передавая ей рандомную ячейку

на функции stop слегка подвис... )

JavaScript
1
2
3
4
function start() {
    idInterval = setInterval(() => cls(cells[rand(cells.length)]), 1000);
    table.addEventListener('click', shot);
}

Добавлено через 4 минуты
а вот и функция stop
обнуляет счётчики, останавливает игру, удаляет обработчик, предлагает повтор

JavaScript
1
2
3
4
5
6
7
8
function stop(m) {
    setTimeout(() => {
        if(confirm(`Вы ${m}. Ещё раз?`)) start();
        dead.innerText = lost.innerText = 0;
    });
    table.removeEventListener('click', shot);
    clearInterval(idInterval);
}

Добавлено через 3 минуты
всё в сборе ...

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
const [table, dead, lost] = ['table', 'dead', 'lost'].map(id => document.getElementById(id));
const cells = table.querySelectorAll('td');
 
let idInterval = null;
 
function rand(n) {
    return Math.floor(Math.random() * n);
} 
 
function cls(elem) {
    elem.classList.add('hole');
    setTimeout(() => elem.classList.remove('hole'), 500);
}
 
function shot(e) {
    if(e.target.classList.contains('hole')) dead.innerText = Number(dead.innerText) + 1;
    else lost.innerText = Number(lost.innerText) + 1;
    
    if(Number(dead.innerText) === 10) stop('выиграли');
    if(Number(lost.innerText) === 10) stop('проиграли');   
}
 
function start() {
    idInterval = setInterval(() => cls(cells[rand(cells.length)]), 1000);
    table.addEventListener('click', shot);
}
 
function stop(m) {
    setTimeout(() => {
        if(confirm(`Вы ${m}. Ещё раз?`)) start();
        dead.innerText = lost.innerText = 0;
    });
    table.removeEventListener('click', shot);
    clearInterval(idInterval);      
}
 
start();

@Anna_Batuk · 13.01.2023, 01:03 **[ТС]**

Сообщение от klyapa

у тогда ладно, а то я ваш html очень быстро нашёл...
=> [del]
В п

Просто обучение прохожу... есть уже готовы файлы, которые формируют основную структуру, так сказать. Все лежит в одной папке, файл js пустой, вот его и нужно заполнить
Видимо за три кода никто не парился и тупо одну задачу крутит и все

За Ваш Вариант спасибо! Я для общего развития его возьму для разбора, для себя и постараюсь все сделать

Новые блоги и статьи Все статьи Все блоги /
Валидация и контроль данных табличной части документа перед записью Maks 22.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа, разработанного в КА2. Задача: контроль и валидация данных табличной части документа перед записью с учетом регламента компании. . .	Отчёт о затраченных материалах за определенный период с макетом печатной формы Maks 21.04.2026 Отчёт из решения ниже размещён в конфигурации КА2. Задача: разработка отчёта по затраченным материалам за определённый период, с возможностью вывода печатной формы отчёта с шапкой и подвалом. В. . .	Отчёт о спецтехнике находящейся в ремонте Maks 20.04.2026 Отчёт из решения ниже размещен в конфигурации КА2. Задача: отобразить спецтехнику, которая на данный момент находится в ремонте. Есть нетиповой документ "Заявка на ремонт спецтехники" который. . .	Памятка для бота и "визитка" для читателей "Semantic Universe Layer (Слой семантической вселенной)" Hrethgir 19.04.2026 Сгенерировано для краткого описания по случаю сборки и компиляции скелета серверного приложения. И пусть после этого скажут, что статьи сгенерированные AI - туфта и не интересно. И это не реклама -. . .
Запрет удаления строк ТЧ документа при определённом условии Maks 19.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "Аккумуляторы", разработанного в конфигурации КА2. У данного документа есть ТЧ, в которой в зависимости от прав доступа. . .	Модель заражения группы наркоманов alhaos 17.04.2026 Условия задачи сформулированы тут Суть: - Группа наркоманов из 10 человек. - Только один инфицирован ВИЧ. - Колются одной иглой. - Колются раз в день. - Колются последовательно через. . .	Мысли в слух. Про "навсегда". kumehtar 16.04.2026 Подумалось тут, что наверное очень глупо использовать во всяких своих установках понятие "навсегда". Это очень сильное понятие, и я только начинаю понимать край его смысла, не смотря на то что давно. . .	My Business CRM MaGz GoLd 16.04.2026 Всем привет, недавно возникла потребность создать CRM, для личных нужд. Собственно программа предоставляет из себя базу данных клиентов, в которой можно фиксировать звонки, стадии сделки, а также. . .

@Anna_Batuk 0 / 0 / 0 Регистрация: 19.01.2015 Сообщений: 62 Записей в блоге: 1
	12.01.2023, 03:58 [ТС]
	вообще только тут написала про задачу. не тащила с других сайтов ничего. файлы html и css уже прописаны. а js сама я писала и не копировала 0

Игра "Убей крота"

Решение