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

No:33231

Hero game were you have green hair
Developer User15686｜Date and time 24/1/3 0:40:39
Build time 20.818 sec｜Game capacity 2.435KB｜

Script

Green-Haired Hero Game

←

Prev　Next

→ 　

Back　

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

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

<!DOCTYPE html>
<html>
<head>
    <style>
        body {
            background-color: lightblue;
            text-align: center;
            font-family: Arial, sans-serif;
            font-size: 16px;
        }
        
        h1 {
            color: #333;
        }
        
        #character {
            width: 100px;
            height: 100px;
            background-color: green;
            border-radius: 50%;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            transition: all 0.3s ease;
        }
        
        #enemy {
            width: 50px;
            height: 50px;
            background-color: red;
            border-radius: 50%;
            position: absolute;
            top: 30%;
            left: 30%;
            transition: all 0.5s ease;
        }
    </style>
</head>
<body>
    <h1>Green-Haired Hero Game</h1>
    <script>
        var character = document.getElementById("character");
        var enemy = document.getElementById("enemy");
        
        function moveCharacter(event) {
            var x = event.touches[0].clientX;
            var y = event.touches[0].clientY;
            
            character.style.left = x + "px";
            character.style.top = y + "px";
            
            if (checkCollision(x, y)) {
                endGame();
            }
        }
        
        function checkCollision(x, y) {
            var characterX = parseInt(character.style.left);
            var characterY = parseInt(character.style.top);
            
            var enemyX = parseInt(enemy.style.left) + 25;
            var enemyY = parseInt(enemy.style.top) + 25;
            
            var distance = Math.sqrt(Math.pow(characterX - enemyX, 2) + Math.pow(characterY - enemyY, 2));
            
            if (distance < 75) {
                return true; // Collision occurred
            }
            
            return false; // No collision
        }
        
        function endGame() {
            alert("Game Over! Green-haired hero failed!");
        }
        
        // Game Initialization
        function startGame() {
            // Add touch event listener
            document.addEventListener("touchmove", moveCharacter, false);
        }
        
        startGame(); // Start the game
    </script>
    <div id="character"></div>
    <div id="enemy"></div>
</body>
</html>