Make a puzzle game where you play as a child surving his nightmares there are items around the map to survive's game

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

No:21932

←

Prev Next

→

Make a puzzle game where you play as a child survi..ALL
Developer User10116｜Date and time 23/10/19 9:39:29
Build time 56.005 sec｜Game capacity 3.648KB｜

Script

Sure! Here's an example of a simple HTML game where you play as a child surviving nightmares. In this game, you need to collect different items scattered around the map to survive. The game is optimized for smartphone operation and uses pictograms for visuals.

Tap on the pictograms to collect the items and survive the nightmares!

To play the game, simply copy this code into a new HTML file. Open the file in a web browser on your smartphone, and you'll be able to tap on the pictograms to collect the items and survive the nightmares. The collected items will be displayed in the inventory, and once you collect all the required items ("⚔️", "🍪", "🎈", "🔑"), a congratulatory message will be displayed. Note: The gameplay logic in this example is quite simple, and you can enhance and customize it further based on your requirements and preferences.

←

Prev　Next

→ 　

Back　

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

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

```html
<!DOCTYPE html>
<html>
<head>
  <title>Nightmare Survival Game</title>
  <style>
    body {
      margin: 0;
      padding: 0;
      text-align: center;
      background-color: #000;
      color: #fff;
      font-family: Arial, sans-serif;
    }
    
    #map {
      width: 100%;
      height: 350px;
      margin-bottom: 10px;
    }
    
    #inventory {
      margin-bottom: 10px;
    }
    
    #instructions {
      font-size: 14px;
    }
    
    #result {
      font-size: 18px;
      font-weight: bold;
    }
  </style>
</head>
<body>
  <div id="map"></div>
  <div id="inventory"></div>
  <div id="instructions">Tap on the pictograms to collect the items and survive the nightmares!</div>
  <div id="result"></div>

// Initialize the player's position
    var playerX = 0;
    var playerY = 0;

// Initialize the collected items
    var collectedItems = [];

// Render the game map
    function renderMap() {
      var mapElement = document.getElementById("map");
      mapElement.innerHTML = "";

for (var row = 0; row < map.length; row++) {
        var mapRow = document.createElement("div");

for (var col = 0; col < map[row].length; col++) {
          var mapItem = document.createElement("span");
          mapItem.innerHTML = map[row][col];
          mapItem.setAttribute("data-x", col);
          mapItem.setAttribute("data-y", row);
          mapItem.onclick = collectItem;
          mapRow.appendChild(mapItem);
        }

mapElement.appendChild(mapRow);
      }
    }

// Collect an item when clicked
    function collectItem() {
      var x = parseInt(this.getAttribute("data-x"));
      var y = parseInt(this.getAttribute("data-y"));

var selectedItem = map[y][x];
      if (selectedItem !== "") {
        collectedItems.push(selectedItem);
        map[y][x] = "";

renderMap();
        updateInventory();
        checkSurvivalStatus();
      }
    }

// Update the inventory display
    function updateInventory() {
      var inventoryElement = document.getElementById("inventory");
      inventoryElement.innerHTML = "Inventory: " + collectedItems.join(" ");
    }

// Check the survival status
    function checkSurvivalStatus() {
      var resultElement = document.getElementById("result");

if (collectedItems.includes("🔑") && collectedItems.includes("⚔️") && collectedItems.includes("🍪") && collectedItems.includes("🎈")) {
        resultElement.innerHTML = "Congratulations! You survived the nightmares!";
      } else {
        resultElement.innerHTML = "";
      }
    }

// Start the game
    renderMap();
    updateInventory();
  </script>
</body>
</html>
```

Note: The gameplay logic in this example is quite simple, and you can enhance and customize it further based on your requirements and preferences.