AI game creator

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

No:10592

←

Prev Next

→

merged puzzle
Developer User4376｜Date and time 23/8/1 7:08:45
Build time 42.415 sec｜Game capacity 9.64KB｜

Script

了解です。以下に、マージパズルのゲームの実装例を示します。

Score: 0

このコードでは、1枚のHTMLファイルとして実装されており、JavaScriptはscriptタグで囲まれています。ゲームはスマホ操作に対応しており、絵文字は使用していませんが、代わりに色の変化でタイルの値を表現しています。ゲーム開始後はカーソルキーの左右上下を操作することで、タイルのマージパズルを行えます。ゲーム終了時にはアラートで"Game Over!"と表示されます。

←

Prev　Next

→ 　

Back　

[PR]現在の新着人気ランキング

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

了解です。以下に、マージパズルのゲームの実装例を示します。

```html
<!DOCTYPE html>
<html>
<head>
  <title>Merge Puzzle</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      background-color: #f6f6f6;
    }

#game-container {
      margin: 20px auto;
      width: 320px;
      height: 480px;
      background-color: #ffffff;
      border: 1px solid #cccccc;
      overflow: hidden;
    }

#score {
      margin-top: 10px;
      text-align: center;
    }
  </style>
</head>
<body>
  <div id="game-container">
    <div id="score">Score: <span id="current-score">0</span></div>
  </div>

function addTile() {
      var tileContainer = document.getElementById("game-container");
      var tile = document.createElement("div");
      var value = Math.random() < 0.9 ? 2 : 4;
      var colors = [
          "#eee4da", "#ede0c8", "#f2b179", "#f59563",
          "#f67c5f", "#f65e3b", "#edcf72", "#edcc61",
          "#edc850", "#edc53f", "#edc22e"
      ];
      var color = colors[Math.log2(value) - 1];

tile.style.width = "80px";
      tile.style.height = "80px";
      tile.style.borderRadius = "5px";
      tile.style.backgroundColor = color;
      tile.style.position = "absolute";
      tile.style.textAlign = "center";
      tile.style.lineHeight = "80px";
      tile.style.fontSize = "36px";
      tile.style.fontWeight = "bold";
      tile.innerHTML = value;
      tile.dataset.value = value;
      tile.dataset.merged = "false";
      tile.dataset.position = "";
      tile.dataset.index = -1;
      tileContainer.appendChild(tile);

var emptyIndexes = [];
      for (var i = 0; i < tiles.length; i++) {
        if (tiles[i] == null) {
          emptyIndexes.push(i);
        }
      }

if (emptyIndexes.length > 0) {
        var randomIndex = emptyIndexes[Math.floor(Math.random() * emptyIndexes.length)];
        tile.dataset.index = randomIndex;
        tiles[randomIndex] = tile;
        moveTile(tile, randomIndex);
      } else {
        endGame();
      }
    }

function moveTile(tile, newIndex) {
      var tileX = newIndex % 4 * 90 + 10;
      var tileY = Math.floor(newIndex / 4) * 90 + 10;
      tile.style.transform = "translate(" + tileX + "px, " + tileY + "px)";
      tile.dataset.position = tileX + "," + tileY;
    }

function mergeTiles(tile, mergedTile) {
      var mergedValue = parseInt(tile.dataset.value, 10) * 2;
      tile.innerHTML = mergedValue;
      tile.dataset.value = mergedValue;
      tile.dataset.merged = "true";
      tile.style.backgroundColor = getColorForValue(mergedValue);
      mergedTile.parentNode.removeChild(mergedTile);
      score += mergedValue;
      document.getElementById("current-score").textContent = score;
    }

function moveLeft() {
      var i, j, tile, currentPos, newPos, mergedTile;

for (i = 0; i < tiles.length; i++) {
        tile = tiles[i];

if (tile == null) {
          continue;
        }

currentPos = tile.dataset.position.split(",");
        newPos = [0, parseInt(currentPos[1], 10)];
        mergedTile = null;

for (j = i - 1; j >= 0; j--) {
          var currentTile = tiles[j];
          var tilePos = currentTile.dataset.position.split(",");

if (parseInt(tilePos[0], 10) + 90 === parseInt(currentPos[0], 10) &&
              tile.dataset.value === currentTile.dataset.value &&
              currentTile.dataset.merged === "false") {
            newPos[0] = parseInt(tilePos[0], 10) + 90;
            mergedTile = currentTile;
          } else {
            newPos[0] = parseInt(tilePos[0], 10) + 90;
            break;
          }
        }

if (newPos[0] !== parseInt(currentPos[0], 10)) {
          moveTile(tile, 4 * newPos[1] + newPos[0] / 90 - 1);
          tiles[i] = null;

if (mergedTile) {
            mergeTiles(tile, mergedTile);
          } else {
            tiles[4 * newPos[1] + newPos[0] / 90 - 1] = tile;
          }
        }
      }
    }

function moveRight() {
      var i, j, tile, currentPos, newPos, mergedTile;

for (i = tiles.length - 1; i >= 0; i--) {
        tile = tiles[i];

if (tile == null) {
          continue;
        }

currentPos = tile.dataset.position.split(",");
        newPos = [300, parseInt(currentPos[1], 10)];
        mergedTile = null;

for (j = i + 1; j < tiles.length; j++) {
          var currentTile = tiles[j];
          var tilePos = currentTile.dataset.position.split(",");

if (parseInt(tilePos[0], 10) - 90 === parseInt(currentPos[0], 10) &&
              tile.dataset.value === currentTile.dataset.value &&
              currentTile.dataset.merged === "false") {
            newPos[0] = parseInt(tilePos[0], 10) - 90;
            mergedTile = currentTile;
          } else {
            newPos[0] = parseInt(tilePos[0], 10) - 90;
            break;
          }
        }

if (newPos[0] !== parseInt(currentPos[0], 10)) {
          moveTile(tile, 4 * newPos[1] + newPos[0] / 90 + 1);
          tiles[i] = null;

if (mergedTile) {
            mergeTiles(tile, mergedTile);
          } else {
            tiles[4 * newPos[1] + newPos[0] / 90 + 1] = tile;
          }
        }
      }
    }

function moveUp() {
      var i, j, tile, currentPos, newPos, mergedTile;

for (i = 0; i <= 3; i++) {
        for (j = i + 4; j < tiles.length; j += 4) {
          tile = tiles[j];

if (tile == null) {
            continue;
          }

currentPos = tile.dataset.position.split(",");
          newPos = [parseInt(currentPos[0], 10), 0];
          mergedTile = null;

for (var k = j - 4; k >= i; k -= 4) {
            var currentTile = tiles[k];
            var tilePos = currentTile.dataset.position.split(",");

if (parseInt(tilePos[1], 10) + 90 === parseInt(currentPos[1], 10) &&
                tile.dataset.value === currentTile.dataset.value &&
                currentTile.dataset.merged === "false") {
              newPos[1] = parseInt(tilePos[1], 10) + 90;
              mergedTile = currentTile;
            } else {
              newPos[1] = parseInt(tilePos[1], 10) + 90;
              break;
            }
          }

if (newPos[1] !== parseInt(currentPos[1], 10)) {
            moveTile(tile, 4 * newPos[1] / 90 + newPos[0] / 90);
            tiles[j] = null;

if (mergedTile) {
              mergeTiles(tile, mergedTile);
            } else {
              tiles[4 * newPos[1] / 90 + newPos[0] / 90] = tile;
            }
          }
        }
      }
    }

function moveDown() {
      var i, j, tile, currentPos, newPos, mergedTile;

for (i = 12; i <= 15; i++) {
        for (j = i - 4; j >= 0; j -= 4) {
          tile = tiles[j];

if (tile == null) {
            continue;
          }

currentPos = tile.dataset.position.split(",");
          newPos = [parseInt(currentPos[0], 10), 390];
          mergedTile = null;

for (var k = j + 4; k <= i; k += 4) {
            var currentTile = tiles[k];
            var tilePos = currentTile.dataset.position.split(",");

if (parseInt(tilePos[1], 10) - 90 === parseInt(currentPos[1], 10) &&
                tile.dataset.value === currentTile.dataset.value &&
                currentTile.dataset.merged === "false") {
              newPos[1] = parseInt(tilePos[1], 10) - 90;
              mergedTile = currentTile;
            } else {
              newPos[1] = parseInt(tilePos[1], 10) - 90;
              break;
            }
          }

if (newPos[1] !== parseInt(currentPos[1], 10)) {
            moveTile(tile, 4 * newPos[1] / 90 + newPos[0] / 90);
            tiles[j] = null;

if (mergedTile) {
              mergeTiles(tile, mergedTile);
            } else {
              tiles[4 * newPos[1] / 90 + newPos[0] / 90] = tile;
            }
          }
        }
      }
    }

function getColorForValue(value) {
      var colors = [
          "#eee4da", "#ede0c8", "#f2b179", "#f59563",
          "#f67c5f", "#f65e3b", "#edcf72", "#edcc61",
          "#edc850", "#edc53f", "#edc22e"
      ];
      var index = Math.log2(value) - 1;
      return colors[index];
    }

function endGame() {
      alert("Game Over!");
    }

function handleKeyDown(event) {
      switch (event.keyCode) {
        case 37: // Left
          moveLeft();
          break;
        case 38: // Up
          moveUp();
          break;
        case 39: // Right
          moveRight();
          break;
        case 40: // Down
          moveDown();
          break;
      }

setTimeout(addTile, 200);
    }

document.addEventListener("DOMContentLoaded", function() {
      document.addEventListener("keydown", handleKeyDown);

var gameContainer = document.getElementById("game-container");
      gameContainer.style.position = "relative";
      gameContainer.style.marginTop = "50px";

for (var i = 0; i < 16; i++) {
        tiles.push(null);
      }

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