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

No:7492

2664

←

Prev Next

→

man-cara (Tibetan Buddhist ecclesiastical building..ALL
Developer User4029｜Date and time 23/7/8 2:59:19
Build time 27.085 sec｜Game capacity 3.72KB｜

Script

了解です。マンカラというゲームをHTMLファイルで実装し、JavaScriptを使用して動作させます。スマホ操作を前提とし、絵文字を使用してゲームを作成します。以下が、マンカラのゲームの実装例です。

マンカラ

以上が、HTMLファイルとして実装したマンカラのゲームです。ゲームボードの各穴にはクリックイベントが設定され、クリックすることで該当の穴から石を動かすことができます。石の数やターンの表示は、絵文字を使用して行われます。この実装は、スマホでも操作可能な形になっています。また、ゲームとしてのルールを実装しており、プレイすることができます。

←

Prev　Next

→ 　

Back　

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

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

了解です。マンカラというゲームをHTMLファイルで実装し、JavaScriptを使用して動作させます。スマホ操作を前提とし、絵文字を使用してゲームを作成します。

以下が、マンカラのゲームの実装例です。

```html
<!DOCTYPE html>
<html>
<head>
  <title>マンカラ</title>
  <style>
    .hole {
      font-size: 40px;
      width: 50px;
      height: 50px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
    }

.player1 {
      background-color: lightblue;
    }

.player2 {
      background-color: lightgreen;
    }
  </style>
</head>
<body>
  <h1>マンカラ</h1>
  <div id="board">
    <div class="hole player1">0</div>
    <div class="hole" onclick="move(0)"></div>
    <div class="hole" onclick="move(1)"></div>
    <div class="hole" onclick="move(2)"></div>
    <div class="hole" onclick="move(3)"></div>
    <div class="hole" onclick="move(4)"></div>
    <div class="hole" onclick="move(5)"></div>
    <div class="hole"></div>
    <div class="hole" onclick="move(6)"></div>
    <div class="hole" onclick="move(7)"></div>
    <div class="hole" onclick="move(8)"></div>
    <div class="hole" onclick="move(9)"></div>
    <div class="hole" onclick="move(10)"></div>
    <div class="hole" onclick="move(11)"></div>
    <div class="hole player2">0</div>
  </div>

function move(index) {
      var stones = board[index];
      board[index] = 0;

while (stones > 0) {
        index++;

if (index >= board.length) {
          index = 0;
        }

if ((currentPlayer === "player1" && index === 13) || (currentPlayer === "player2" && index === 6)) {
          continue;
        }

board[index]++;
        stones--;
      }

if ((currentPlayer === "player1" && index === 0) || (currentPlayer === "player2" && index === 7)) {
        switchPlayer();
      } else if (board[index] === 1) {
        stealStones(index);
      }

updateBoard();
    }

function switchPlayer() {
      currentPlayer = (currentPlayer === "player1") ? "player2" : "player1";
    }

function stealStones(index) {
      var oppositeIndex = 12 - index;

if ((currentPlayer === "player1" && index < 6) || (currentPlayer === "player2" && index > 6)) {
        board[6] += board[index] + board[oppositeIndex];
        board[index] = 0;
        board[oppositeIndex] = 0;
      }
    }

function updateBoard() {
      var holes = document.getElementsByClassName("hole");

for (var i = 0; i < holes.length; i++) {
        var hole = holes[i];

if (i === 0 || i === 13) {
          hole.textContent = board[i];
        } else {
          hole.innerHTML = "";

for (var j = 0; j < board[i]; j++) {
            hole.innerHTML += "⚫";
          }
        }

hole.classList.remove("player1");
        hole.classList.remove("player2");

if (i < 6) {
          hole.classList.add("player1");
        } else if (i > 6) {
          hole.classList.add("player2");
        }
      }
    }
  </script>
</body>
</html>
```

以上が、HTMLファイルとして実装したマンカラのゲームです。ゲームボードの各穴にはクリックイベントが設定され、クリックすることで該当の穴から石を動かすことができます。石の数やターンの表示は、絵文字を使用して行われます。

この実装は、スマホでも操作可能な形になっています。また、ゲームとしてのルールを実装しており、プレイすることができます。