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

No:19215

91

Crie um jogo onde temos uma grid que vai ser forma..ALL
Developer User8225｜Date and time 23/10/2 2:58:37
Build time 7.049 sec｜Game capacity 1.647KB｜

Jogo da Grid

→ 　

0　

0　

[PR]現在の欲しいものランキング

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

(C)2023 HisashiApp

<!DOCTYPE html>
<html>
<head>
<title>Jogo da Grid</title>
<style>
  body {
    text-align: center;
    font-family: Arial, sans-serif;
  }
  
  .grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    margin-top: 30px;
  }
  
  .grid-item {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 30px;
    width: 60px;
    height: 60px;
    border: 1px solid #000;
  }
</style>
</head>
<body>
<h1>Jogo da Grid</h1>
<div class="grid"></div>

<script>
  function generateGrid() {
    const grid = document.querySelector('.grid');
    grid.innerHTML = '';
    
    const elements = ['🔥', '💧', '🌱', '☹️', '🧱'];
    
    for (let i = 0; i < 16; i++) {
      const randomIndex = Math.floor(Math.random() * elements.length);
      const element = document.createElement('div');
      element.classList.add('grid-item');
      element.textContent = elements[randomIndex];
      grid.appendChild(element);
    }
  }
  
  function startGame() {
    generateGrid();
    
    const gridItems = document.querySelectorAll('.grid-item');
    let playerIndex = 0;
    
    gridItems[playerIndex].style.backgroundColor = 'red';
    
    gridItems.forEach((item, index) => {
      item.addEventListener('click', () => {
        if (index === playerIndex - 4 || index === playerIndex + 4 || index === playerIndex - 1 || index === playerIndex + 1) {
          gridItems[playerIndex].style.backgroundColor = 'white';
          playerIndex = index;
          gridItems[playerIndex].style.backgroundColor = 'red';
        }
      });
    });
  }
  
  startGame();
</script>
</body>
</html>