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

No:35685

101

←

Prev Next

→

Plants vs zombies
Developer User16610｜Date and time 24/1/15 2:53:58
Build time 12.167 sec｜Game capacity 3.213KB｜

Script

Here's a basic implementation of a simplified version of Plants vs Zombies game using JavaScript and HTML. You can copy the code into a single HTML file and open it in your browser to play the game.

Plants vs Zombies

This implementation generates a random grid with plants represented by plant icons and zombies represented by zombie icons. Each cell in the grid can be clicked, triggering different actions depending on the content of the cell. In this simplified version, clicking on a plant will display an alert indicating that the plant is selected and ready to attack, clicking on a zombie will display an alert indicating a zombie attack, and clicking on an empty cell will display an alert stating that there's nothing to do.

←

Prev　Next

→ 　

Back　

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

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

Here's a basic implementation of a simplified version of Plants vs Zombies game using JavaScript and HTML. You can copy the code into a single HTML file and open it in your browser to play the game.

```html
<!DOCTYPE html>
<html>
<head>
  <title>Plants vs Zombies</title>
  <style>
    body {
      background-color: #f7f7f7;
      font-family: Arial, sans-serif;
    }
    
    .grid {
      display: grid;
      grid-template-columns: repeat(9, 1fr);
      gap: 5px;
      margin: 20px auto;
      max-width: 600px;
    }
    
    .cell {
      width: 50px;
      height: 50px;
      background-color: #fff;
      border: 1px solid #ccc;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 25px;
      cursor: pointer;
      transition: background-color 0.3s;
    }
    
    .plant {
      font-size: 40px;
    }
    
    .zombie {
      font-size: 35px;
    }
  </style>
</head>
<body>
  <h1>Plants vs Zombies</h1>
  
  <div class="grid">
    <div class="cell"></div>
    
  </div>

// Game grid
    const grid = [
      [], [], [], [], [], [], [], [], []
    ];

// List of plants
    const plants = ['🌱', '🌵', '🌼', '🌹'];

// Populate random plants
    for (let i = 0; i < grid.length; i++) {
      const randomPlant = plants[Math.floor(Math.random() * plants.length)];
      grid[i].push(randomPlant);
    }

// Render the game grid
    function renderGrid() {
      const gridEl = document.querySelector('.grid');
      gridEl.innerHTML = '';

for (let i = 0; i < grid.length; i++) {
        const row = grid[i];

for (let j = 0; j < row.length; j++) {
          const cell = document.createElement('div');
          cell.className = 'cell';

if (row[j]) {
            cell.textContent = row[j] === zombieIcon ? zombieIcon : plantIcon;
            cell.classList.add(row[j] === zombieIcon ? 'zombie' : 'plant');
          }

cell.addEventListener('click', () => handleClick(i, j));
          gridEl.appendChild(cell);
        }
      }
    }

// Handle click events on grid cells
    function handleClick(row, col) {
      const clickedCell = grid[row][col];

if (clickedCell === plantIcon) {
        alert('Plant selected. Ready to attack!');
      } else if (clickedCell === zombieIcon) {
        alert('Oops! Zombie attack!');
      } else {
        alert('Empty cell. Nothing to do here.');
      }
    }

// Initial rendering
    renderGrid();
  </script>
</body>
</html>
```