js/index.js - master - memoryspeak/divid

js/index.js
282 строки9 KB
memoryspeak
ver 1
19 янв 2026, 20:06
19 янв 2026, 20:062662f87
const ACTIVE_BUTTON_COLOR = "#73c96d";

let cell1 = {
  number: 0,
  col: null,
  row: null,
  button: null
};

let cell2 = {
  number: 0,
  col: null,
  row: null,
  button: null
};

function clearCells() {
  cell1.number = 0;
  cell1.col = null;
  cell1.row = null;
  cell1.button = null;
  cell2.number = 0;
  cell2.col = null;
  cell2.row = null;
  cell2.button = null;
};

function paintButton(button, isDefault) {
  button.style.backgroundColor = isDefault ? '#fff' : ACTIVE_BUTTON_COLOR;
  button.style.borderRadius = '0.5rem';
};

function fillCells(number, col, row, button) {
  if (cell1.number === 0) {
    cell1.number = number;
    cell1.col = col;
    cell1.row = row;
    cell1.button = button;

    paintButton(cell1.button);
  } else if (cell2.number === 0) {
    if (cell1.col === col && cell1.row === row) return;

    cell2.number = number;
    cell2.col = col;
    cell2.row = row;
    cell2.button = button;

    paintButton(cell2.button);
  };
};

function areCoprime(numbers) {
  for (let i = 0; i < numbers.length; i++) {
    for (let j = i + 1; j < numbers.length; j++) {
      if (gcd(numbers[i], numbers[j]) !== 1) return false;
    };
  };

  return true;
};

function gcd(a, b) {
  if (b === 0) return Math.abs(a);
  return gcd(b, a % b);
};

function calculate() {
  if (cell1.number === 0 || cell2.number === 0) return;
  const gcdNum = gcd(cell1.number, cell2.number);
  if (gcdNum === 1) {
    paintButton(cell1.button, true);
    paintButton(cell2.button, true);
    clearCells();
    return;
  };

  const gameScoreElement = document.getElementById('game-score');
  const gameScore = parseInt(gameScoreElement.textContent);

  gameScoreElement.textContent = gameScore + gcdNum;

  const newNum1 = cell1.number / gcdNum;
  const newNum2 = cell2.number / gcdNum;

  cell1.button.textContent = newNum1 === 1 ? '' : newNum1;
  cell2.button.textContent = newNum2 === 1 ? '' : newNum2;

  paintButton(cell1.button, true);
  paintButton(cell2.button, true);
  clearCells();
};

function isFinish() {
  const board = document.querySelector('.board');
  const buttons = board.querySelectorAll('div button');
  const numList = [];

  buttons.forEach(button => {
    if (button.textContent !== '') numList.push(parseInt(button.textContent));
  });

  if (areCoprime(numList)) alert('Конец игры');
};

function playButtonOnClick() {
  clearCells();
  const bodyCenter = document.getElementById('body-center');
  bodyCenter.innerHTML = `
  <div class="board-title">
    <h1 class="score-label">Счёт игры: <span id="game-score">0<span></h1>
    <button id="new-game-button" class="game-button">Начать заново</button>
  </div>
  <div class="board">
    <div class="board-row">
      <button id="cell::0::0"></button>
      <button id="cell::1::0">2</button>
      <button id="cell::2::0">3</button>
      <button id="cell::3::0">4</button>
      <button id="cell::4::0">5</button>
      <!--button id="cell::5::0">6</button>
      <button id="cell::6::0">7</button>
      <button id="cell::7::0">8</button>
      <button id="cell::8::0">9</button>
      <button id="cell::9::0">10</button-->
    </div>
    <div class="board-row">
      <button id="cell::0::1">6</button>
      <button id="cell::1::1">7</button>
      <button id="cell::2::1">8</button>
      <button id="cell::3::1">9</button>
      <button id="cell::4::1">10</button>
      <!--button id="cell::5::1">16</button>
      <button id="cell::6::1">17</button>
      <button id="cell::7::1">18</button>
      <button id="cell::8::1">19</button>
      <button id="cell::9::1">20</button-->
    </div>
    <div class="board-row">
      <button id="cell::0::2">11</button>
      <button id="cell::1::2">12</button>
      <button id="cell::2::2">13</button>
      <button id="cell::3::2">14</button>
      <button id="cell::4::2">15</button>
      <!--button id="cell::5::2">26</button>
      <button id="cell::6::2">27</button>
      <button id="cell::7::2">28</button>
      <button id="cell::8::2">29</button>
      <button id="cell::9::2">30</button-->
    </div>
    <div class="board-row">
      <button id="cell::0::3">16</button>
      <button id="cell::1::3">17</button>
      <button id="cell::2::3">18</button>
      <button id="cell::3::3">19</button>
      <button id="cell::4::3">20</button>
      <!--button id="cell::5::3">36</button>
      <button id="cell::6::3">37</button>
      <button id="cell::7::3">38</button>
      <button id="cell::8::3">39</button>
      <button id="cell::9::3">40</button-->
    </div>
    <!--div class="board-row">
      <button id="cell::0::4">41</button>
      <button id="cell::1::4">42</button>
      <button id="cell::2::4">43</button>
      <button id="cell::3::4">44</button>
      <button id="cell::4::4">45</button>
      <button id="cell::5::4">46</button>
      <button id="cell::6::4">47</button>
      <button id="cell::7::4">48</button>
      <button id="cell::8::4">49</button>
      <button id="cell::9::4">50</button>
    </div>
    <div class="board-row">
      <button id="cell::0::5">51</button>
      <button id="cell::1::5">52</button>
      <button id="cell::2::5">53</button>
      <button id="cell::3::5">54</button>
      <button id="cell::4::5">55</button>
      <button id="cell::5::5">56</button>
      <button id="cell::6::5">57</button>
      <button id="cell::7::5">58</button>
      <button id="cell::8::5">59</button>
      <button id="cell::9::5">60</button>
    </div>
    <div class="board-row">
      <button id="cell::0::6">61</button>
      <button id="cell::1::6">62</button>
      <button id="cell::2::6">63</button>
      <button id="cell::3::6">64</button>
      <button id="cell::4::6">65</button>
      <button id="cell::5::6">66</button>
      <button id="cell::6::6">67</button>
      <button id="cell::7::6">68</button>
      <button id="cell::8::6">69</button>
      <button id="cell::9::6">70</button>
    </div>
    <div class="board-row">
      <button id="cell::0::7">71</button>
      <button id="cell::1::7">72</button>
      <button id="cell::2::7">73</button>
      <button id="cell::3::7">74</button>
      <button id="cell::4::7">75</button>
      <button id="cell::5::7">76</button>
      <button id="cell::6::7">77</button>
      <button id="cell::7::7">78</button>
      <button id="cell::8::7">79</button>
      <button id="cell::9::7">80</button>
    </div>
    <div class="board-row">
      <button id="cell::0::8">81</button>
      <button id="cell::1::8">82</button>
      <button id="cell::2::8">83</button>
      <button id="cell::3::8">84</button>
      <button id="cell::4::8">85</button>
      <button id="cell::5::8">86</button>
      <button id="cell::6::8">87</button>
      <button id="cell::7::8">88</button>
      <button id="cell::8::8">89</button>
      <button id="cell::9::8">90</button>
    </div>
    <div class="board-row">
      <button id="cell::0::9">91</button>
      <button id="cell::1::9">92</button>
      <button id="cell::2::9">93</button>
      <button id="cell::3::9">94</button>
      <button id="cell::4::9">95</button>
      <button id="cell::5::9">96</button>
      <button id="cell::6::9">97</button>
      <button id="cell::7::9">98</button>
      <button id="cell::8::9">99</button>
      <button id="cell::9::9">100</button>
    </div-->
  </div>
  `;
};

window.addEventListener("DOMContentLoaded", () => {
	const splashLogo = document.getElementById('splash-logo');
  const bodyCenter = document.getElementById('body-center');
  splashLogo.addEventListener('animationend', function() {
    bodyCenter.style.display = "block";
  });
  splashLogo.classList.add('show');
});

window.addEventListener('click', function (event) {
  event.preventDefault();
  console.log(event.target.id);
  const [prefix] = event.target.id.split("::");

  switch (prefix) {
    case "cell": {
      const [_, col, row] = event.target.id.split("::");
      const buttonId = `cell::${col}::${row}`;
      const button = document.getElementById(buttonId);
      const number = parseInt(button.textContent) || 0;

      if (number === 0) break;

      fillCells(number, col, row, button);
      calculate();
      isFinish();

      break;
    };
    case "play-button": {
      playButtonOnClick();
      break;
    };
    case "new-game-button": {
      if (confirm('Вы точно хотите начать сначала?')) playButtonOnClick();
      break;
    };
    default: {
      if (cell1.button) paintButton(cell1.button, true);
      if (cell2.button) paintButton(cell2.button, true);
      clearCells();
    };
  };
}.bind(this));