A simple, but also scary puzzle game were you got kidnapped and now has to solve puzzles and get keys and crowbars to escape, to escape, u have to unlock all 10 locks while getting chased by a demon's game | AI game creator

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

No:40988

71

A simple, but also scary puzzle game were you got ..ALL
Developer User18359｜Date and time 24/2/5 3:59:18
Build time 18.469 sec｜Game capacity 5.2KB｜

Sure! Here's an example of a simple puzzle game designed as a single HTML file with JavaScript, using pictograms and smartphone operation:

Welcome to "Escape the Demon"!

You've been kidnapped and need to solve puzzles to escape.

Get all 10 keys and crowbars to unlock the locks before the demon catches you.

To make it work, you will need to create or find pictogram images for the lock, key, crowbar, and demon. Make sure to update the image paths in the CSS (`background-image` properties) accordingly. The game starts with an intro text and a "Start Game" button. When the button is clicked, the game container is displayed, and a 10-second countdown begins. The player needs to collect all 10 keys and crowbars by clicking on the locks to unlock them. If the player fails to unlock all locks within 10 seconds, the game over screen is shown. If the player successfully unlocks all locks, the victory screen is shown. Note: This is just a basic example to give you an idea of how the game could be implemented. You can customize it further, add more features, levels, or enhance the gameplay as per your requirements.

→ 　

0　

0　

[PR]現在のフィギュア売れ筋ランキング

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

(C)2023 HisashiApp

Sure! Here's an example of a simple puzzle game designed as a single HTML file with JavaScript, using pictograms and smartphone operation:

```html
<!DOCTYPE html>
<html>
<head>
    <title>Escape the Demon</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            text-align: center;
            background-color: black;
            color: white;
        }

#intro-text {
            margin-top: 200px;
            font-size: 24px;
        }

#game-container {
            display: none;
        }

.pictogram {
            width: 150px;
            height: 150px;
            margin: 20px;
            cursor: pointer;
        }

.lock {
            background-image: url('lock.png');
        }

.key {
            background-image: url('key.png');
        }

.crowbar {
            background-image: url('crowbar.png');
        }

.demon {
            background-image: url('demon.png');
            animation: chase 3s infinite;
        }

@keyframes chase {
            0% {
                transform: translateX(0);
            }
            50% {
                transform: translateX(300px);
            }
            100% {
                transform: translateX(0);
            }
        }
    </style>
</head>
<body>
    <div id="intro-text">
        <p>Welcome to "Escape the Demon"!</p>
        <p>You've been kidnapped and need to solve puzzles to escape.</p>
        <p>Get all 10 keys and crowbars to unlock the locks before the demon catches you.</p>
        <button onclick="startGame()">Start Game</button>
    </div>

<div id="game-container">
        <div id="locks-container">
            <div class="lock" id="lock-1" onclick="openLock(1)"></div>
            <div class="lock" id="lock-2" onclick="openLock(2)"></div>
            <div class="lock" id="lock-3" onclick="openLock(3)"></div>
            <div class="lock" id="lock-4" onclick="openLock(4)"></div>
            <div class="lock" id="lock-5" onclick="openLock(5)"></div>
            <div class="lock" id="lock-6" onclick="openLock(6)"></div>
            <div class="lock" id="lock-7" onclick="openLock(7)"></div>
            <div class="lock" id="lock-8" onclick="openLock(8)"></div>
            <div class="lock" id="lock-9" onclick="openLock(9)"></div>
            <div class="lock" id="lock-10" onclick="openLock(10)"></div>
        </div>
        <div id="inventory-container"></div>
        <div class="demon" id="demon"></div>
    </div>

<script>
        const locks = Array.from(document.getElementsByClassName('lock'));
        const inventoryContainer = document.getElementById('inventory-container');
        const gameContainer = document.getElementById('game-container');
        const introText = document.getElementById('intro-text');
        let numKeys = 0;
        let numCrowbars = 0;
        let isGameOver = false;

function startGame() {
            introText.style.display = 'none';
            gameContainer.style.display = 'block';
            setTimeout(() => {
                if (!isGameOver) {
                    gameOver();
                }
            }, 10000); // the demon catches you after 10 seconds
        }

function openLock(lockNumber) {
            if (!isGameOver && numKeys >= lockNumber && numCrowbars >= lockNumber) {
                const lock = document.getElementById(`lock-${lockNumber}`);
                lock.style.backgroundImage = '';
                lock.style.backgroundColor = 'green';
                if (lockNumber === 10) {
                    setTimeout(() => victory(), 1000); // wait for 1 second before showing victory message
                }
            }
        }

function addToInventory(item) {
            inventoryContainer.appendChild(item);
        }

function gameOver() {
            isGameOver = true;
            gameContainer.style.display = 'none';
            introText.innerHTML = '<p>Game Over!</p><p>The demon caught you.</p>';
            introText.style.display = 'block';
        }

function victory() {
            isGameOver = true;
            gameContainer.style.display = 'none';
            introText.innerHTML = '<p>Congratulations!</p><p>You escaped the demon!</p>';
            introText.style.display = 'block';
        }
    </script>
</body>
</html>
```

To make it work, you will need to create or find pictogram images for the lock, key, crowbar, and demon. Make sure to update the image paths in the CSS (`background-image` properties) accordingly.

The game starts with an intro text and a "Start Game" button. When the button is clicked, the game container is displayed, and a 10-second countdown begins. The player needs to collect all 10 keys and crowbars by clicking on the locks to unlock them. If the player fails to unlock all locks within 10 seconds, the game over screen is shown. If the player successfully unlocks all locks, the victory screen is shown.

Note: This is just a basic example to give you an idea of how the game could be implemented. You can customize it further, add more features, levels, or enhance the gameplay as per your requirements.