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

No:16465

←

Prev Next

→

Five Nights At Stickmans
Developer User6792｜Date and time 23/9/18 6:59:30
Build time 23.874 sec｜Game capacity 3.618KB｜

Script

Five Nights At Stickmans

Score: 0

←

Prev　Next

→ 　

Back　

[PR]現在の欲しいゲームランキング

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

<!DOCTYPE html>
<html>
<head>
    <title>Five Nights At Stickmans</title>
    <style>
        body {
            background-color: #000000;
            color: #ffffff;
            font-family: Arial, sans-serif;
            text-align: center;
        }
        #game {
            width: 300px;
            height: 300px;
            border: 1px solid #ffffff;
            margin: 0 auto;
            margin-top: 50px;
            position: relative;
        }
        #player {
            width: 50px;
            height: 50px;
            background-color: #ff0000;
            position: absolute;
            bottom: 0;
            left: 0;
        }
        .obstacle {
            width: 50px;
            height: 50px;
            position: absolute;
            bottom: 0;
            background-image: url('stickman.png');
            background-size: cover;
        }
        .obstacle1 {
            left: 100px;
        }
        .obstacle2 {
            left: 200px;
        }
        .score {
            font-size: 20px;
            margin-top: 20px;
        }
        .game-over {
            font-size: 30px;
            margin-top: 50px;
        }
    </style>
</head>
<body>
    <h1>Five Nights At Stickmans</h1>
    
    <div id="game">
        <div id="player"></div>
        <div id="obstacle1" class="obstacle obstacle1"></div>
        <div id="obstacle2" class="obstacle obstacle2"></div>
    </div>
    
    <div id="score">Score: 0</div>
    
    <script>
        document.addEventListener('DOMContentLoaded', () => {
            const player = document.getElementById('player');
            const obstacle1 = document.getElementById('obstacle1');
            const obstacle2 = document.getElementById('obstacle2');
            const scoreElement = document.getElementById('score');
            let score = 0;
            
            function jump() {
                if (player.classList != 'animate') {
                    player.classList.add('animate');
                }
                setTimeout(() => {
                    player.classList.remove('animate');
                }, 500);
            }
            
            document.addEventListener('click', () => {
                jump();
            });
            
            function gameOver() {
                clearInterval(gameInterval);
                player.style.display = 'none';
                obstacle1.style.display = 'none';
                obstacle2.style.display = 'none';
                scoreElement.innerHTML = 'Game Over! Score: ' + score;
                const gameOverElement = document.createElement('div');
                gameOverElement.classList.add('game-over');
                gameOverElement.innerHTML = 'GAME OVER';
                document.body.appendChild(gameOverElement);
            }
            
            function checkCollision() {
                let playerTop = parseInt(window.getComputedStyle(player).getPropertyValue('top'));
                let obstacle1Left = parseInt(window.getComputedStyle(obstacle1).getPropertyValue('left'));
                let obstacle2Left = parseInt(window.getComputedStyle(obstacle2).getPropertyValue('left'));
                
                if ((playerTop >= 250 && obstacle1Left === 50) || (playerTop >= 250 && obstacle2Left === 50)) {
                    gameOver();
                }
            }
            
            let gameInterval = setInterval(() => {
                score++;
                scoreElement.innerHTML = 'Score: ' + score;
                checkCollision();
            }, 100);
        });
    </script>
</body>
</html>