AI game creator

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

No:36863

←

Prev Next

→

Ludo
Developer User16899｜Date and time 24/1/18 23:40:44
Build time 18.601 sec｜Game capacity 3.306KB｜

Script

Sure! Here's a simple implementation of Ludo as a single HTML file using JavaScript and pictograms. The game can be played on a smartphone by tapping on the board to roll the dice and selecting the corresponding piece to move. Note that this implementation is simplified and does not include all the rules and functionalities of a full-fledged Ludo game.

🎲

To play the game, simply copy and paste the above code into a new HTML file. Open the file in a web browser, and you should see the Ludo board with pictogram pieces. Each turn, tap the dice to roll and move the corresponding piece as indicated by the dice value. The board will be updated after each move, and the dice will change on subsequent turns. Have fun playing!

←

Prev　Next

→ 　

Back　

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

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

```html
<!DOCTYPE html>
<html>
<head>
  <title>Ludo Game</title>
  <style>
    body {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 100vh;
      background-color: #c3c3c3;
    }
    
    #board {
      width: 300px;
      height: 300px;
      background-color: #ffffff;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      grid-template-rows: repeat(3, 1fr);
    }
    
    .cell {
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 24px;
    }
    
    .dice {
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 48px;
      margin-bottom: 20px;
    }
  </style>
</head>
<body>
  <div id="board"></div>
  <div class="dice">🎲</div>
  
  <script>
    const board = document.getElementById('board');
    const dice = document.querySelector('.dice');
    
    const cells = [
      { id: 0, occupants: [] },
      { id: 1, occupants: [] },
      { id: 2, occupants: [] },
      { id: 3, occupants: [] }
    ];
    
    const diceSymbols = ['⚀', '⚁', '⚂', '⚃', '⚄', '⚅'];
    
    let currentTurn = 0;
  
    function rollDice() {
      return Math.floor(Math.random() * 6) + 1;
    }
    
    function movePiece(pieceId, steps) {
      const currentCell = cells.find(cell => cell.occupants.includes(pieceId));
      const currentIndex = currentCell.occupants.findIndex(id => id === pieceId);
      currentCell.occupants.splice(currentIndex, 1);
      
      const destinationIndex = (currentIndex + steps) % cells.length;
      const destinationCell = cells[destinationIndex];  
      destinationCell.occupants.push(pieceId);
    }
    
    function renderBoard() {
      board.innerHTML = '';
      
      cells.forEach(cell => {
        const cellElement = document.createElement('div');
        cellElement.classList.add('cell');
        cellElement.textContent = cell.occupants.map(id => `P${id + 1}`).join(', ');
        board.appendChild(cellElement);
      });
    }
    
    function nextTurn() {
      currentTurn = (currentTurn + 1) % cells.length;
      dice.textContent = diceSymbols[rollDice() - 1];
    }
    
    function handleClick() {
      movePiece(currentTurn, parseInt(dice.textContent));
      renderBoard();
      nextTurn();
    }
    
    renderBoard();
    dice.addEventListener('click', handleClick);
  </script>
</body>
</html>
```