Click here for free DL of the app version that can save data.

No:13436

←

Prev Next

→

Kleuren mengen
Developer User5877｜Date and time 23/8/28 5:21:58
Build time 11.459 sec｜Game capacity 2.536KB｜

Script

Kleuren Mengen Game

Stap 1: Kies twee kleuren om te mengen

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋ゲームランキング

Click here for free DL of the app version that can save data.

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Kleuren Mengen Game</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      text-align: center;
    }

.color-icon {
      display: inline-block;
      width: 100px;
      height: 100px;
      margin: 10px;
      border: 2px solid black;
      border-radius: 50%;
    }
  </style>
</head>
<body>
  <h1>Kleuren Mengen Game</h1>
  <div>
    <h2>Stap 1: Kies twee kleuren om te mengen</h2>
    <div>
      <div class="color-icon" id="color1"></div>
      <div class="color-icon" id="color2"></div>
    </div>
    <button onclick="mixColors()">Meng</button>
  </div>
  <div id="result" style="display: none;">
    <h2>Resultaat:</h2>
    <div class="color-icon" id="mixedColor"></div>
  </div>

// Function to mix two colors
    function mixColors() {
      const color1 = document.getElementById("color1").style.backgroundColor;
      const color2 = document.getElementById("color2").style.backgroundColor;

if (!color1 || !color2) {
        alert("Selecteer twee kleuren om te mengen.");
        return;
      }

const rgb1 = colorRGB(color1);
      const rgb2 = colorRGB(color2);

const mixedRGB = [(rgb1[0] + rgb2[0]) / 2, (rgb1[1] + rgb2[1]) / 2, (rgb1[2] + rgb2[2]) / 2];
      const mixedColor = colorName(mixedRGB);

document.getElementById("mixedColor").style.backgroundColor = mixedColor;
      document.getElementById("result").style.display = "block";
    }

// Function to convert color name to RGB value
    function colorRGB(color) {
      const rgbString = color.replace(/^rgb$|$$/g, "").split(",");
      return rgbString.map(Number);
    }

// Function to find the closest color name for given RGB value
    function colorName(rgb) {
      let closestColor = "";
      let shortestDistance = Infinity;

for (const [color, value] of Object.entries(colors)) {
        const distance = Math.sqrt(
          (rgb[0] - value[0]) ** 2 +
          (rgb[1] - value[1]) ** 2 +
          (rgb[2] - value[2]) ** 2
        );

if (distance < shortestDistance) {
          closestColor = color;
          shortestDistance = distance;
        }
      }

return closestColor;
    }
  </script>
</body>
</html>