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

No:5

331

Color game
Developer User1006｜Date and time 23/4/18 20:20:27
Build time unknown sec｜Game capacity 4.692KB｜

Color game

Score:

0

→ 　

1　

0　

[PR]現在のプレゼントランキング

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

(C)2023 HisashiApp

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>色ゲーム</title>
    <style>
      body {
        background-color: #444;
      }
      
      h1 {
        color: white;
        text-align: center;
      }
      
      #gameBoard {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        grid-gap: 10px;
        margin: 0 auto;
      }
      
      .gameTile {
        background-color: #fff;
        box-shadow: 0 0 10px 5px #000;
        transition: background-color 0.2s ease;
        cursor: pointer;
      }
      
      .gameTile:hover {
        background-color: #ddd;
      }
      
      #scoreBoard {
        color: white;
        text-align: center;
      }
      
      #score {
        font-size: 2em;
        margin-top: 0;
      }
      
      #resetButton {
        display: block;
        margin: 20px auto;
        padding: 10px;
        border: 2px solid white;
        background-color: transparent;
        color: white;
        cursor: pointer;
        transition: background-color 0.2s ease;
      }
      
      #resetButton:hover {
        background-color: white;
        color: #444;
      }
    </style>

</head>
  <body>
    <h1>色ゲーム</h1>
    <div id="gameBoard"></div>
    <div id="scoreBoard">
      <p>スコア:</p>
      <p id="score">0</p>
    </div>
    <button id="resetButton">リセット</button>

<script>
      // ゲームの初期化
      function initGame() {
        // タイルの色をランダムに決定
        let colors = generateRandomColors(16);
        
        // ゲームボードにタイルを生成
        const gameBoard = document.getElementById("gameBoard");
        gameBoard.innerHTML = "";
        for (let i = 0; i < 16; i++) {
          let tile = document.createElement("div");
          tile.className = "gameTile";
          tile.setAttribute("data-color", colors[i]);
          tile.addEventListener("click", handleTileClick);
          gameBoard.appendChild(tile);
        }
        
        // スコアボードを初期化
        const scoreBoard = document.getElementById("score");
        scoreBoard.textContent = "0";
        
        // リセットボタンを初期化
        const resetButton = document.getElementById("resetButton");
        resetButton.addEventListener("click", initGame);
      }
      
      // ゲームのメイン処理
      function handleTileClick() {
        let score = parseInt(document.getElementById("score").textContent);
        
        // クリックしたタイルの色を取得
        let tileColor = this.getAttribute("data-color");
        
        // 他のタイルをクリック不可にする
        const gameBoard = document.getElementById("gameBoard");
        gameBoard.style.pointerEvents = "none";
        
        // クリックしたタイルの色と一致するタイルを探す
        let matchingTiles = document.querySelectorAll(`.gameTile[data-color="${tileColor}"]`);
        if (matchingTiles.length >= 2) {
          // 一致するタイルを全て取り除きスコアを加算
          matchingTiles.forEach(function(tile) {
            tile.style.backgroundColor = "#444";
            tile.style.boxShadow = "none";
            tile.removeAttribute("data-color");
          });
          score += matchingTiles.length;
        } else {
          // 一致するタイルがなければスコアを減算
          score -= 1;
        }
        
        // スコアを更新
        document.getElementById("score").textContent = score;
        
        // 全てのタイルが取り除かれたかどうかチェック
        let remainingTiles = document.querySelectorAll(".gameTile");
        if (remainingTiles.length === 0) {
          // ゲームクリアメッセージを表示
          alert(`ゲームクリア！あなたのスコアは${score}です！`);
          
          // ゲームを初期化
          initGame();
        } else {
          // 一定時間後に他のタイルを再びクリック可能にする
          setTimeout(function() {
            gameBoard.style.pointerEvents = "auto";
          }, 500);
        }
      }
      
      // ランダムな色を生成
      function generateRandomColors(num) {
        let colors = [];
        for (let i = 0; i < num; i++) {
          let r = Math.floor(Math.random() * 256);
          let g = Math.floor(Math.random() * 256);
          let b = Math.floor(Math.random() * 256);
          colors.push(`rgb(${r}, ${g}, ${b})`);
        }
        return colors;
      }
      
      // ゲームを初期化
      window.onload = initGame();
    </script>
  </body>
</html>