Исчезновение клеточки в игре

@prototip · Регистрация: 15.05.2021

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

Как сделать, чтобы когда на черную клеточку нажимаешь, то она исчезает?

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
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="stylesheet" href="life.css" />
    <title>life</title>
    <style>
  #canvas {
  width: 300;
  height: 300;
  border: 2px solid black;
  margin: 40px;
}
  </style>
  </head>
  <body>
    <canvas id="canvas" width="300" height="300"></canvas><br>
 
    <label>Высота:</label>
    <input type="text" id="heightInput" value="300" />
    <label>Ширина:</label>
    <input type="text" id="widthInput" value="300" />
    <input type="button" value="Создать поле" id="create" />
    <p>Таймер: <span id="count">0</span></p>
    <button id="start">Start</button>
    <button id="pause">Pause</button>
    <button id="stop">Stop</button>
 
  </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
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
const canvas = document.getElementById("canvas");
    const ctx = canvas.getContext("2d");
    const widthInput = document.getElementById("widthInput");
    const heightInput = document.getElementById("heightInput");
    const count = document.getElementById('count');
    let width, height, sizeFieldWidth, sizeFieldHeight;
 
    const sizeCellwidth = 10;
    const sizeCellheight = 10;
 
    let mas = [];
    let timer;
 
    canvas.onclick = function(event) {
        let x = event.offsetX;
        let y = event.offsetY;
        x = Math.floor(x / sizeCellwidth);
        y = Math.floor(y / sizeCellheight);
        mas[y][x] = 1;
        drawField();
    };
 
    function resizeCanvas() {
        canvas.width = widthInput.value;
        canvas.height = heightInput.value;
        width = canvas.width;
        height = canvas.height;
        sizeFieldWidth = width / sizeCellwidth;
        sizeFieldHeight = height / sizeCellheight;
        goLife();
    }
 
    function goLife() {
        for (let i = 0; i < sizeFieldHeight; i++) {
            mas[i] = [];
            for (let j = 0; j < sizeFieldWidth; j++) {
                mas[i][j] = 0;
            }
        }
    }
    resizeCanvas();
 
    function drawField() {
 
        ctx.clearRect(0, 0, width, height);
        for (let i = 0; i < sizeFieldHeight; i++) {
            for (let j = 0; j < sizeFieldWidth; j++) {
 
                if (mas[i][j] === 1) {
                    ctx.fillRect(j * sizeCellwidth, i * sizeCellheight, sizeCellwidth, sizeCellheight);
                }
            }
        }
    }
 
    function startLife() {
        let mas2 = [];
        for (let i = 0; i < sizeFieldHeight; i++) {
            mas2[i] = [];
            for (let j = 0; j < sizeFieldWidth; j++) {
                let neighbors = [-1, 1].reduce((a, b) => {
                    b = mas[i + b];
                    if (b === undefined)
                        return a;
                    let num = b[j];
                    if (b[j + 1] !== undefined) {
                        num += b[j + 1]
                    }
                    if (b[j - 1] !== undefined) {
                        num += b[j - 1]
                    }
                    return a + num;
                }, 0);
                neighbors = [-1, 1].reduce((a, b) => a += mas[i][j + b] !== undefined && mas[i][j + b], neighbors);
                mas2[i][j] = +(neighbors === 2 || neighbors === 3)
 
 
 
            }
        }
        mas = mas2;
        drawField();
        count.innerHTML++;
        timer = setTimeout(startLife, 300);
    }
 
    function pauseLife() {
        clearInterval(timer)
    }
 
    function stopLife() {
        pauseLife();
        goLife();
        drawField();
        count.innerHTML = 0;
    }
 
    document.getElementById("create").onclick = resizeCanvas;
    document.getElementById("start").onclick = startLife;
    document.getElementById("pause").onclick = pauseLife;
    document.getElementById("stop").onclick = stopLife;

Новые блоги и статьи Все статьи Все блоги /
Модель заражения группы наркоманов alhaos 17.04.2026 Условия задачи сформулированы тут Суть: - Группа наркоманов из 10 человек. - Только один инфицирован ВИЧ. - Колются одной иглой. - Колются раз в день. - Колются последовательно через. . .	Мысли в слух. Про "навсегда". kumehtar 16.04.2026 Подумалось тут, что наверное очень глупо использовать во всяких своих установках понятие "навсегда". Это очень сильное понятие, и я только начинаю понимать край его смысла, не смотря на то что давно. . .	My Business CRM MaGz GoLd 16.04.2026 Всем привет, недавно возникла потребность создать CRM, для личных нужд. Собственно программа предоставляет из себя базу данных клиентов, в которой можно фиксировать звонки, стадии сделки, а также. . .	Знаешь почему 90% людей редко бывают счастливыми? kumehtar 14.04.2026 Потому что они ждут. Ждут выходных, ждут отпуска, ждут удачного момента. . . а удачный момент так и не приходит.
Фиксация колонок в отчете СКД Maks 14.04.2026 Фиксация колонок в СКД отчета типа Таблица. Задача: зафиксировать три левых колонки в отчете. Процедура ПриКомпоновкеРезультата(ДокументРезультат, ДанныеРасшифровки, СтандартнаяОбработка) / / . . .	Настройки VS Code Loafer 13.04.2026 { "cmake. configureOnOpen": false, "diffEditor. ignoreTrimWhitespace": true, "editor. guides. bracketPairs": "active", "extensions. ignoreRecommendations": true, . . .	Оптимизация кода на разграничение прав доступа к элементам формы Maks 13.04.2026 Алгоритм из решения ниже реализован на нетиповом документе, разработанного в конфигурации КА2. Задачи, как таковой, поставлено не было, проделанное ниже исключительно моя инициатива. Было так:. . .	Контроль заполнения и очистка дат в зависимости от значения перечислений Maks 12.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "ПланированиеПерсонала", разработанного в конфигурации КА2. Задача: реализовать контроль корректности заполнения дат назначения. . .

Опции темы