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

No:51369

Ai creat human , human creat ai, grid text game
Developer User18896｜Date and time 24/3/12 0:53:54
Build time 9.175 sec｜Game capacity 1.957KB｜

Script

Welcome to Human vs AI Game

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋Kindle本ランキング

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

```html
<!DOCTYPE html>
<html>
<head>
  <title>Human vs AI Game</title>
</head>
<body>
  <h1>Welcome to Human vs AI Game</h1>
  
  <div id="grid"></div>
  
  <script>
    const grid = document.getElementById('grid');
    const rows = 5;
    const cols = 5;
    
    let humanPosition = { x: 0, y: 0 };
    let aiPosition = { x: cols - 1, y: rows - 1 };
    
    const renderGrid = () => {
      grid.innerHTML = '';
      for (let i = 0; i < rows; i++) {
        const row = document.createElement('div');
        row.classList.add('row');
        for (let j = 0; j < cols; j++) {
          const cell = document.createElement('div');
          cell.classList.add('cell');
          if (i === humanPosition.y && j === humanPosition.x) {
            cell.innerText = '👨';
          } else if (i === aiPosition.y && j === aiPosition.x) {
            cell.innerText = '🤖';
          }
          row.appendChild(cell);
        }
        grid.appendChild(row);
      }
    };
    
    const moveHuman = (x, y) => {
      if (x >= 0 && x < cols && y >= 0 && y < rows) {
        humanPosition.x = x;
        humanPosition.y = y;
        renderGrid();
      }
    };
    
    document.addEventListener('keydown', (event) => {
      switch (event.key) {
        case 'ArrowUp':
          moveHuman(humanPosition.x, humanPosition.y - 1);
          break;
        case 'ArrowDown':
          moveHuman(humanPosition.x, humanPosition.y + 1);
          break;
        case 'ArrowLeft':
          moveHuman(humanPosition.x - 1, humanPosition.y);
          break;
        case 'ArrowRight':
          moveHuman(humanPosition.x + 1, humanPosition.y);
          break;
      }
    });
    
    renderGrid();
  </script>
  
  <style>
    .row {
      display: flex;
    }
    .cell {
      width: 40px;
      height: 40px;
      border: 1px solid black;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  </style>
</body>
</html>
```