Make a game where there is a sqaure board with alternate blocks. Blocks are different Color’s. There are gaps between blocks which move. For example if row 1 is fixed , row 2 moves. The user draws a card if a certain color on the blocks. The goals is for the user to get to the correct color block by only moving the tiles on the board's game

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

No:37171

←

Prev Next

→

Make a game where there is a sqaure board with alt..ALL
Developer User17013｜Date and time 24/1/20 16:40:11
Build time 12.557 sec｜Game capacity 3.357KB｜

Script

Sure! Here's an example of a game that meets your requirements:

🔴

🟢

🔵

🟡

This HTML file will display a 5x5 square board with alternating color blocks and gaps between them. The user can click on the cards at the bottom to play a card with a specific color. The goal is to reach the correct color block by only moving the tiles on the board. If the user selects the correct color block, they will receive a congratulatory message. Otherwise, they will be informed that the selected color block is not on the board. You can copy and save this code as an HTML file and open it in a browser to play the game.

←

Prev　Next

→ 　

Back　

[PR]現在の人気グッズランキング

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

Sure! Here's an example of a game that meets your requirements:

```html
<!DOCTYPE html>
<html>
<head>
  <style>
    body {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 100vh;
      margin: 0;
      padding: 0;
      background-color: #f5f5f5;
    }

#board {
      display: grid;
      grid-template-columns: repeat(5, 80px);
      grid-template-rows: repeat(5, 80px);
      gap: 4px;
    }

.block {
      background-color: #ddd;
      border-radius: 4px;
    }

.card {
      display: inline-block;
      width: 80px;
      height: 80px;
      margin: 10px;
      border: 2px solid #333;
      border-radius: 4px;
      background-color: #fff;
      text-align: center;
      line-height: 80px;
      font-size: 24px;
      cursor: pointer;
    }
  </style>
</head>
<body>
  <div id="board"></div>
  <div id="cards">
    <div class="card" onclick="playCard('red')">🔴</div>
    <div class="card" onclick="playCard('green')">🟢</div>
    <div class="card" onclick="playCard('blue')">🔵</div>
    <div class="card" onclick="playCard('yellow')">🟡</div>
  </div>

let currentRow = 0;

function moveRow() {
      const rows = board.children;
      rows[currentRow].style.opacity = 1;
      currentRow = (currentRow + 1) % rows.length;
      rows[currentRow].style.opacity = 0.4;
    }

for (let i = 0; i < 5; i++) {
      const rowDiv = createRow(i === 0, () => moveRow());
      if (i === currentRow) {
        rowDiv.style.opacity = 0.4;
      }
      board.appendChild(rowDiv);
    }
  </script>
</body>
</html>
```

You can copy and save this code as an HTML file and open it in a browser to play the game.