Vollständiges Spiel. Gib keine Erklärungen, nur den Code.'s game

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

No:33907

194

←

Prev Next

→

Vollständiges Spiel. Gib keine Erklärungen, nur de..ALL
Developer User14077｜Date and time 24/1/7 1:08:51
Build time 41.689 sec｜Game capacity 3.486KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在の人気ゲームランキング

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

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Pictogram Game</title>
</head>
<body>
  <script>
    const pictograms = ['🐶', '🐱', '🐭', '🐰', '🐼', '🦁', '🐯', '🐸', '🐵', '🐞']; // A set of pictograms
    const gridSize = 4; // Grid size
    let grid = []; // Generated grid
    let selectedPictogram = null; // Currently selected pictogram
    let selectedId = null; // ID of the selected pictogram within the grid
    let score = 0; // Player score

// Generates a new random grid
    function generateGrid() {
      const pictogramSet = pictograms.concat(pictograms); // Doubled pictogram set
      
      for (let i = 0; i < gridSize; i++) {
        const row = [];
        for (let j = 0; j < gridSize; j++) {
          const randomIndex = Math.floor(Math.random() * pictogramSet.length); // Randomly select a pictogram
          const pictogram = pictogramSet.splice(randomIndex, 1)[0]; // Remove the pictogram from the set
          row.push({ pictogram, hidden: true }); // Add a pictogram to the row
        }
        grid.push(row);
      }
    }

// Display the grid on the page
    function displayGrid() {
      const container = document.createElement('div');
      container.setAttribute('class', 'container');

for (let i = 0; i < gridSize; i++) {
        for (let j = 0; j < gridSize; j++) {
          const cell = document.createElement('div');
          cell.setAttribute('class', 'cell');
          cell.setAttribute('id', `${i}${j}`);
          cell.addEventListener('click', flipPictogram);

if (grid[i][j].hidden) {
            cell.innerText = '🔲';
          } else {
            cell.innerText = grid[i][j].pictogram;
          }

container.appendChild(cell);
        }
      }

document.body.appendChild(container);
    }

// Flip the selected pictogram
    function flipPictogram(event) {
      const id = event.target.id;
      const row = parseInt(id.charAt(0));
      const col = parseInt(id.charAt(1));

if (grid[row][col].hidden) {
        if (selectedPictogram === null) {
          selectedPictogram = grid[row][col].pictogram;
          selectedId = id;
          grid[row][col].hidden = false;
        } else {
          const prevRow = parseInt(selectedId.charAt(0));
          const prevCol = parseInt(selectedId.charAt(1));

if (grid[row][col].pictogram === selectedPictogram && (row !== prevRow || col !== prevCol)) {
            grid[row][col].hidden = false;
            score++;

if (score === gridSize * gridSize / 2) {
              setTimeout(() => {
                alert('Herzlichen Glückwunsch! Du hast das Spiel gewonnen!');
              }, 200);
            }
          } else {
            grid[prevRow][prevCol].hidden = true;
          }

selectedPictogram = null;
          selectedId = null;
        }

document.body.innerHTML = '';
        displayGrid();
      }
    }

// Main function to start the game
    function startGame() {
      generateGrid();
      displayGrid();
    }

startGame();
  </script>
  <style>
    .container {
      display: flex;
      flex-wrap: wrap;
      width: 200px;
      height: 200px;
      margin: 0 auto;
    }

.cell {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 50px;
      height: 50px;
      font-size: 30px;
      border: 1px solid #000;
      cursor: pointer;
    }
  </style>
</body>
</html>