AI game creator

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

No:43427

←

Prev Next

→

Color Merging
Developer User19182｜Date and time 24/2/15 13:48:31
Build time 7.095 sec｜Game capacity 2.649KB｜

Script

Sure! Here's an example of a color merging game implemented as a single HTML file:

In this game, you have a 4x4 grid of cells, and each cell starts with a randomly assigned color. By clicking on a cell, its color will cycle through a predefined set of colors. The goal is to merge adjacent cells into the same color by strategically clicking on them. The game itself does not keep track of scores or any other advanced mechanics, but you can build upon this base to add more features and complexity if desired.

←

Prev　Next

→ 　

Back　

[PR]現在の欲しいものランキング

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

Sure! Here's an example of a color merging game implemented as a single HTML file:

```html
<!DOCTYPE html>
<html>
  <head>
    <style>
      * {
        box-sizing: border-box;
      }

body {
        font-family: Arial, sans-serif;
        margin: 0;
        padding: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh;
        background-color: #f5f5f5;
      }

#game-board {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        grid-gap: 10px;
        background-color: #fff;
        padding: 20px;
        border-radius: 10px;
      }

.cell {
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 40px;
        font-weight: bold;
        color: #fff;
        background-color: transparent;
        border-radius: 10px;
        cursor: pointer;
        transition: background-color 0.3s ease;
      }

.cell.clicked {
        background-color: #ccc;
      }
    </style>
  </head>
  <body>
    <div id="game-board"></div>

const colors = ["#ff5722", "#00bcd4", "#8bc34a", "#ffc107"];

function getRandomColor() {
          return colors[Math.floor(Math.random() * colors.length)];
        }

function handleCellClick() {
          const cell = this;
          const nextColorIndex = (cell.colorIndex + 1) % colors.length;
          cell.style.backgroundColor = colors[nextColorIndex];
          cell.colorIndex = nextColorIndex;
        }

function initializeGame() {
          for (let i = 0; i < 16; i++) {
            const cell = document.createElement("div");
            cell.className = "cell";
            cell.style.backgroundColor = getRandomColor();
            cell.colorIndex = colors.indexOf(cell.style.backgroundColor);
            cell.addEventListener("click", handleCellClick);
            cells.push(cell);
            board.appendChild(cell);
          }
        }

initializeGame();
      });
    </script>
  </body>
</html>
```