Find keys unlock door and a zombie shooter's game

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

No:16581

122

←

Prev Next

→

Find keys unlock door and a zombie shooter
Developer User7380｜Date and time 23/9/19 16:20:18
Build time 37.119 sec｜Game capacity 3.981KB｜

Script

Sure! Here's a simple game implemented as a single HTML file using JavaScript. The game involves finding keys to unlock a door and shooting zombies. Since smartphone operation is assumed, pictograms will be used for a better user experience.

In this game, the player must click on the "Start Game" button to begin. Then, they can tap on the keys to collect them. Once they have collected two keys, they can tap on the locked door to unlock it. Additionally, they can tap on the gun to shoot the zombies. However, shooting the zombies is only possible after unlocking the door. Each action will display a temporary alert message on the screen. The game is designed to be played on a smartphone. Pictograms (images) are used for visual elements such as buttons, keys, doors, zombies, and a gun.

←

Prev　Next

→ 　

Back　

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

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

```html
<!DOCTYPE html>
<html>
<head>
  <style>
    #game {
      width: 100%;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  </style>
</head>
<body>
  <div id="game">
    <img src="start-button.png" alt="Start Game" id="startButton">
    <img src="key.png" alt="Key" class="item">
    <img src="key.png" alt="Key" class="item">
    <img src="door-locked.png" alt="Locked Door" id="door">
    <img src="zombie.png" alt="Zombie" class="zombie">
    <img src="zombie.png" alt="Zombie" class="zombie">
    <img src="zombie.png" alt="Zombie" class="zombie">
    <img src="gun.png" alt="Gun" id="gun">
  </div>

let keysFound = 0;
      let gameStarted = false;

startButton.addEventListener('click', startGame);
      door.addEventListener('click', unlockDoor);
      gun.addEventListener('click', shootZombies);

function startGame() {
        if (!gameStarted) {
          startButton.style.display = 'none';
          gameStarted = true;
        }
      }

for (let i = 0; i < items.length; i++) {
        items[i].addEventListener('click', () => {
          items[i].style.display = 'none';
          keysFound++;
          showAlert('You found a key!');
        });
      }

function showAlert(message) {
        const alertMessage = document.createElement('div');
        alertMessage.textContent = message;
        alertMessage.style.position = 'fixed';
        alertMessage.style.top = '50%';
        alertMessage.style.left = '50%';
        alertMessage.style.transform = 'translate(-50%, -50%)';
        alertMessage.style.background = 'rgba(0, 0, 0, 0.7)';
        alertMessage.style.color = '#fff';
        alertMessage.style.padding = '10px 20px';
        alertMessage.style.borderRadius = '5px';
        alertMessage.style.fontFamily = 'Arial, sans-serif';

document.body.appendChild(alertMessage);

setTimeout(() => {
          document.body.removeChild(alertMessage);
        }, 2000);
      }
    });
  </script>
</body>
</html>
```