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

No:14954

107

Horror game where you have to hide from corrupted ..ALL
Developer User6439｜Date and time 23/9/5 4:14:30
Build time 36.486 sec｜Game capacity 5.666KB｜

Sure! Here's a simple implementation of the horror game "Shadows of Betrayal" using JavaScript, HTML, and pictograms for a smartphone operation:

Shadows Of Betrayal

Character Customization:

Game Board:

In this implementation, the game board is represented by a 300x300 pixel `div` element with the id "game-board". The player character (magical girl) and corrupted magical girls are represented by `div` elements with appropriate classes (`character`, `magical-girl`, `corrupted-magical-girl`) and positioned absolutely within the game board. The player can move their character using the arrow keys on the smartphone's keyboard. The game continuously checks for collision between the player's character and the corrupted magical girls. If a collision occurs, you can add game over logic to handle the situation. Please note that you'll need to provide the appropriate image URLs for the magical girl, corrupted girl, and shadow in the CSS, replacing `'emozi_all/girl.png'`, `'emozi_all/girl.png'`, and `'emozi_rabbit.png'`. Additionally, you'll need to add the character customization options in the HTML section as requested. Feel free to modify and enhance the code as per your specific requirements.

→ 　

0　

0　

　
　
　
　

[PR]現在の欲しいものランキング

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

(C)2023 HisashiApp

Sure! Here's a simple implementation of the horror game "Shadows of Betrayal" using JavaScript, HTML, and pictograms for a smartphone operation:

```html
<!DOCTYPE html>
<html>
<head>
    <title>Shadows Of Betrayal</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            text-align: center;
        }
        
        #game-board {
            width: 300px;
            height: 300px;
            margin: 0 auto;
            border: 2px solid #000;
            position: relative;
        }
        
        .character {
            position: absolute;
            width: 50px;
            height: 50px;
        }
        
        .magical-girl {
            background: url('magical-girl.png') no-repeat center;
        }
        
        .corrupted-magical-girl {
            background: url('corrupted-girl.png') no-repeat center;
        }
        
        .shadow {
            background: url('shadow.png') no-repeat center;
        }
    </style>
</head>
<body>
    <h1>Shadows Of Betrayal</h1>
    <h2>Character Customization:</h2>
    
    
    <h2>Game Board:</h2>
    <div id="game-board"></div>
    
    <script>
        // Game logic
        
        // Initialize game board with characters
        const gameBoard = document.getElementById("game-board");
        
        // Create player's character
        const playerCharacter = document.createElement("div");
        playerCharacter.className = "character magical-girl";
        playerCharacter.style.left = "0px"; // Initial position
        playerCharacter.style.top = "0px";
        gameBoard.appendChild(playerCharacter);
        
        // Create corrupted magical girls
        const corruptedMagicalGirls = [
            { left: 100, top: 100 },
            { left: 200, top: 200 },
            // Add more corrupted magical girls as needed
        ];
        corruptedMagicalGirls.forEach((girl) => {
            const corruptedGirl = document.createElement("div");
            corruptedGirl.className = "character corrupted-magical-girl";
            corruptedGirl.style.left = `${girl.left}px`;
            corruptedGirl.style.top = `${girl.top}px`;
            gameBoard.appendChild(corruptedGirl);
        });
        
        // Event listeners for player movement
        document.addEventListener("keydown", (event) => {
            const stepSize = 50; // Pixel size for movement
            let newPosition;
            
            switch (event.key) {
                case "ArrowLeft":
                    newPosition = parseInt(playerCharacter.style.left) - stepSize;
                    if (newPosition >= 0) {
                        playerCharacter.style.left = `${newPosition}px`;
                    }
                    break;
                case "ArrowRight":
                    newPosition = parseInt(playerCharacter.style.left) + stepSize;
                    if (newPosition + playerCharacter.offsetWidth <= gameBoard.offsetWidth) {
                        playerCharacter.style.left = `${newPosition}px`;
                    }
                    break;
                case "ArrowUp":
                    newPosition = parseInt(playerCharacter.style.top) - stepSize;
                    if (newPosition >= 0) {
                        playerCharacter.style.top = `${newPosition}px`;
                    }
                    break;
                case "ArrowDown":
                    newPosition = parseInt(playerCharacter.style.top) + stepSize;
                    if (newPosition + playerCharacter.offsetHeight <= gameBoard.offsetHeight) {
                        playerCharacter.style.top = `${newPosition}px`;
                    }
                    break;
            }
        });
        
        // Check for collision with corrupted magical girls
        setInterval(() => {
            const playerRect = playerCharacter.getBoundingClientRect();
            
            corruptedMagicalGirls.forEach((girl) => {
                const girlRect = document.getElementsByClassName("corrupted-magical-girl")[0].getBoundingClientRect();
                if (isColliding(playerRect, girlRect)) {
                    // Game over logic here
                }
            });
        }, 100);
        
        // Helper function to check collision
        function isColliding(rect1, rect2) {
            return !(rect1.right < rect2.left || 
                     rect1.left > rect2.right || 
                     rect1.bottom < rect2.top || 
                     rect1.top > rect2.bottom);
        }
    </script>
</body>
</html>
```

In this implementation, the game board is represented by a 300x300 pixel `div` element with the id "game-board". The player character (magical girl) and corrupted magical girls are represented by `div` elements with appropriate classes (`character`, `magical-girl`, `corrupted-magical-girl`) and positioned absolutely within the game board.

The player can move their character using the arrow keys on the smartphone's keyboard. The game continuously checks for collision between the player's character and the corrupted magical girls. If a collision occurs, you can add game over logic to handle the situation.

Please note that you'll need to provide the appropriate image URLs for the magical girl, corrupted girl, and shadow in the CSS, replacing `'magical-girl.png'`, `'corrupted-girl.png'`, and `'shadow.png'`. Additionally, you'll need to add the character customization options in the HTML section as requested.

Feel free to modify and enhance the code as per your specific requirements.