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

No:9208

153

←

Prev Next

→

A game where you walk around and get keys to open ..ALL
Developer User4313｜Date and time 23/7/22 13:18:12
Build time 31.673 sec｜Game capacity 4.446KB｜

Script

Sure! Here's a simple game in which you can walk around, collect keys, and open doors. The game is implemented as a single HTML file, contains JavaScript code enclosed in script tags, and can be played on a smartphone.

Key Collector Game

Here's how the game works: - The game board is displayed as a 4x4 grid. - You control the player character. - The player character starts from the top-left tile. - Keys and a closed door are randomly placed on the board. - You can move the player character by clicking on adjacent tiles. - When the player collects all the keys, the door opens. - Clicking on the door before collecting all keys displays a message. - Opening the door successfully triggers a win message. Note: To play the game, copy the above code and save it with a ".html" extension. Open the file in a web browser, and you'll be able to play the game.

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋ゲームアプリランキング

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

```html
<!DOCTYPE html>
<html>
<head>
  <title>Key Collector Game</title>
  <style>
    #game-board {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      grid-gap: 10px;
      width: 300px;
      margin: 0 auto;
      padding: 10px;
    }
    .tile {
      background-color: #ccc;
      text-align: center;
      padding: 20px;
      font-size: 28px;
      cursor: pointer;
    }
    .player {
      color: blue;
    }
    .door-closed {
      color: gray;
    }
    .key {
      color: yellow;
    }
  </style>
</head>
<body>
  <h1>Key Collector Game</h1>
  <div id="game-board"></div>

// Create game board
    var gameBoard = document.getElementById('game-board');
    for (var i = 0; i < boardSize * boardSize; i++) {
      var tile = document.createElement('div');
      tile.className = 'tile';
      tile.dataset.x = i % boardSize;
      tile.dataset.y = Math.floor(i / boardSize);
      gameBoard.appendChild(tile);
    }

// Initialize player position
    var playerTile = document.querySelector('.tile[data-x="0"][data-y="0"]');
    playerTile.classList.add('player');

// Generate keys
    var keysCount = Math.floor(Math.random() * 5) + 1;
    for (var key = 0; key < keysCount; key++) {
      var keyTile;
      do {
        var randomTile = Math.floor(Math.random() * boardSize * boardSize);
        keyTile = document.querySelector('.tile:nth-child(' + (randomTile + 1) + ')');
      } while (keyTile.classList.contains('key') || keyTile.classList.contains('player') || keyTile.classList.contains('door-closed'));
      
      keyTile.classList.add('key');
    }

// Generate door
    var doorTile;
    do {
      var randomTile = Math.floor(Math.random() * boardSize * boardSize);
      doorTile = document.querySelector('.tile:nth-child(' + (randomTile + 1) + ')');
    } while (doorTile.classList.contains('key') || doorTile.classList.contains('player'));
    doorTile.classList.add('door-closed');

// Add event listeners for tile clicks
    var tiles = document.querySelectorAll('.tile');
    for (var i = 0; i < tiles.length; i++) {
      tiles[i].addEventListener('click', handleTileClick);
    }

// Event handler for tile clicks
    function handleTileClick() {
      var clickedTile = this;
      var clickedX = parseInt(clickedTile.dataset.x);
      var clickedY = parseInt(clickedTile.dataset.y);
      var distanceX = Math.abs(clickedX - playerPos.x);
      var distanceY = Math.abs(clickedY - playerPos.y);

if ((distanceX === 1 && distanceY === 0) || (distanceX === 0 && distanceY === 1)) {
        // Move player
        playerTile.classList.remove('player');
        clickedTile.classList.add('player');
        playerTile = clickedTile;
        playerPos.x = clickedX;
        playerPos.y = clickedY;

// Handle key
        if (clickedTile.classList.contains('key')) {
          clickedTile.classList.remove('key');
          keysCollected++;
          console.log('Keys collected:', keysCollected);
        }

// Handle door
        if (!doorOpened && clickedTile.classList.contains('door-closed')) {
          if (keysCollected === keysCount) {
            clickedTile.classList.remove('door-closed');
            doorOpened = true;
            console.log('Congratulations! You opened the door!');
          } else {
            console.log('Door is locked. Collect all the keys first!');
          }
        }
      }
    }
  </script>
</body>
</html>
```

Here's how the game works:
- The game board is displayed as a 4x4 grid.
- You control the player character.
- The player character starts from the top-left tile.
- Keys and a closed door are randomly placed on the board.
- You can move the player character by clicking on adjacent tiles.
- When the player collects all the keys, the door opens.
- Clicking on the door before collecting all keys displays a message.
- Opening the door successfully triggers a win message.

Note: To play the game, copy the above code and save it with a ".html" extension. Open the file in a web browser, and you'll be able to play the game.