JSFiddle - React, Tailwind, and code Playground

by Dat

HTML

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title>Color Game</title>
  <style>
    html, body {
        color: white;
        font-family: Helvetica;
      margin: 0; padding: 0;
      width: 100%; height: 100%;
      background: #333;
      display: flex;
      align-items: flex-start;
      justify-content: center;
    }
    #gameArea {
      display: flex;
      flex-direction: column;
      gap: 10px;
      margin-top: 16px; /* Увеличенный отступ */
      align-items: center;
      justify-content: flex-start;
    }
    #colorChoices button {
      margin: 5px;
      padding: 10px 20px;
      cursor: pointer;
    }
    #container {
      display: grid;
      width: 90vh; 
      height: 90vh; 
      gap: 16px;
      box-sizing: border-box;
    }
    #container div {
      cursor: pointer;
      /* border-radius: 50%; */
    }
  </style>
</head>
<body onload="showColorChoices()">
  <div id="gameArea">
    <div id="colorChoices"></div>
    <div id="container"></div>
  </div>

  <script>
    let tones = [0,60,120,240];
    let hueNames = {0:"Красный",60:"Жёлтый",120:"Зелёный",240:"Синий"};
    let hue, level, diff, baseLight, score;

    function resetGameVars(){
      level = 3;
      diff = 35;
      baseLight = 50;
      score = 0;
    }

    function showColorChoices(){
      let choiceDiv = document.getElementById("colorChoices");
      choiceDiv.innerHTML = `
        <button onclick="chooseHue(60)">Жёлтый</button>
        <button onclick="chooseHue(0)">Красный</button>
        <button onclick="chooseHue(240)">Синий</button>
        <button onclick="chooseHue(120)">Зелёный</button>
      `;
      document.getElementById("container").innerHTML = "";
      resetGameVars();
    }

    function chooseHue(selectedHue){
      resetGameVars();  /* Сбрасываем уровень при новом выборе тона */
      hue = selectedHue;
      document.getElementById("colorChoices").innerHTML = "";
      startGame();
    }

    function startGame(){
      draw();
    }

 ...