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

No:34873

←

Prev Next

→

Game the spiderman
Developer User13377｜Date and time 24/1/12 2:23:32
Build time 14.97 sec｜Game capacity 3.683KB｜

Script

Juego de Spiderman

¡Juego Terminado!

←

Prev　Next

→ 　

Back　

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

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

<!DOCTYPE html>
<html>
<head>
    <title>Spiderman Game</title>
    <style>
        body {
            background-color: #f8f8f8;
            font-family: Arial, sans-serif;
            text-align: center;
        }
        
        h1 {
            margin-top: 50px;
        }
        
        #game-container {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 500px;
            width: 500px;
            margin: 0 auto;
            border: 1px solid #ccc;
        }
        
        .character {
            position: absolute;
            width: 40px;
            height: 40px;
            background-color: red;
        }
        
        #spiderman {
            background-image: url('spiderman.png');
            background-size: contain;
            background-repeat: no-repeat;
        }
        
        #enemies {
            background-image: url('enemies.png');
            background-size: contain;
            background-repeat: no-repeat;
        }
        
        #game-over {
            display: none;
            font-size: 24px;
            color: red;
        }
    </style>
</head>
<body>
    <h1>Juego de Spiderman</h1>
    <div id="game-container">
        <div id="spiderman" class="character"></div>
        <div id="enemies" class="character"></div>
    </div>
    <div id="game-over">¡Juego Terminado!</div>
    
    <script>
        // Variables
        var spiderman = document.getElementById('spiderman');
        var enemies = document.getElementById('enemies');
        var gameOver = document.getElementById('game-over');
        var gameContainer = document.getElementById('game-container');
        
        var spidermanX = 0;
        var spidermanY = 0;
        var enemySpeed = 1;
        var gameOverFlag = false;
        
        // Functions
        function moveSpiderman(event) {
            if (!gameOverFlag) {
                var x = event.touches[0].clientX - gameContainer.getBoundingClientRect().left;
                var y = event.touches[0].clientY - gameContainer.getBoundingClientRect().top;
                spidermanX = x - spiderman.offsetWidth / 2;
                spidermanY = y - spiderman.offsetHeight / 2;
                spiderman.style.left = spidermanX + 'px';
                spiderman.style.top = spidermanY + 'px';
            }
        }
        
        function moveEnemies() {
            if (!gameOverFlag) {
                var currentPosition = parseInt(enemies.style.left) || 0;
                currentPosition += enemySpeed;
                enemies.style.left = currentPosition + 'px';
                
                if (currentPosition >= (gameContainer.offsetWidth - enemies.offsetWidth) || currentPosition <= 0) {
                    enemySpeed *= -1;
                }
                
                if (checkCollision()) {
                    gameOverFlag = true;
                    gameOver.style.display = 'block';
                }
            }
        }
        
        function checkCollision() {
            var spidermanRect = spiderman.getBoundingClientRect();
            var enemiesRect = enemies.getBoundingClientRect();
            
            return !(
                spidermanRect.top > enemiesRect.bottom ||
                spidermanRect.bottom < enemiesRect.top ||
                spidermanRect.right < enemiesRect.left ||
                spidermanRect.left > enemiesRect.right
            );
        }
        
        // Event Listeners
        gameContainer.addEventListener('touchmove', moveSpiderman);
        
        // Game Loop
        setInterval(moveEnemies, 10);
    </script>
</body>
</html>