Spiderman is a simple sprite and you must collect babbys from bottom of bulding's game

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

No:8298

359

←

Prev Next

→

Spiderman is a simple sprite and you must collect ..ALL
Developer User4164｜Date and time 23/7/14 22:15:04
Build time 35.798 sec｜Game capacity 4.794KB｜

Script

Sure, here's a playable sample game in HTML using JavaScript. Please note that due to the limitations of this text-based platform, I cannot provide pictograms or interactive elements. However, you can copy and paste the code into an HTML file and run it in your web browser to play the game.

To play the game: 1. Save the code as an `.html` file (e.g., `spiderman_game.html`). 2. Save the sprite images as `emozi_bear.png` and `emozi_all/baby.png` in the same folder as the HTML file. 3. Open the HTML file using a web browser. 4. Use the left and right arrow keys to move Spiderman and collect the babies falling from the building. The score will be logged in the browser console. Please note that you may need to adjust the size and position of the game container and sprites to fit your specific needs.

←

Prev　Next

→ 　

Back　

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

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

```html
<!DOCTYPE html>
<html>
<head>
    <style>
        #game-container {
            width: 400px;
            height: 400px;
            border: 1px solid black;
            position: relative;
        }
        
        #spiderman {
            width: 50px;
            height: 50px;
            position: absolute;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
            background-image: url('spiderman.png');
            background-size: cover;
        }
        
        .baby {
            width: 30px;
            height: 30px;
            position: absolute;
            bottom: 100%;
            left: 50%;
            transform: translateX(-50%);
            background-image: url('baby.png');
            background-size: cover;
        }
    </style>
</head>
<body>
    <div id="game-container">
        <div id="spiderman"></div>
        <div class="baby"></div>
    </div>

// Move Spiderman left or right
        function moveSpiderman(direction) {
            if (direction === 'left') {
                spidermanPosition -= 10;
            } else {
                spidermanPosition += 10;
            }

// Restrict Spiderman within the game container
            if (spidermanPosition < 0) {
                spidermanPosition = 0;
            } else if (spidermanPosition > gameContainer.offsetWidth - spiderman.offsetWidth) {
                spidermanPosition = gameContainer.offsetWidth - spiderman.offsetWidth;
            }

spiderman.style.left = spidermanPosition + 'px';
        }

// Check collision between Spiderman and babies
        function checkCollision() {
            for (var i = 0; i < babies.length; i++) {
                var baby = babies[i];

if (isColliding(spiderman, baby)) {
                    score++;
                    baby.style.display = 'none';
                    console.log('Babby collected! Score: ' + score);
                }
            }
        }

// Detect collision between two elements
        function isColliding(element1, element2) {
            var rect1 = element1.getBoundingClientRect();
            var rect2 = element2.getBoundingClientRect();
            return !(rect1.right < rect2.left || rect1.left > rect2.right ||
                rect1.bottom < rect2.top || rect1.top > rect2.bottom);
        }

// Move babies downwards and reset their position when reaching the bottom
        function moveBabies() {
            for (var i = 0; i < babies.length; i++) {
                var baby = babies[i];
                var babyBottom = parseInt(baby.style.bottom);
                baby.style.bottom = babyBottom - 10 + 'px';

if (babyBottom < -baby.offsetHeight) {
                    baby.style.bottom = '100%';
                    baby.style.left = getRandomPosition() + 'px';
                }

checkCollision();
            }
        }

// Get random horizontal position within the game container
        function getRandomPosition() {
            return Math.random() * (gameContainer.offsetWidth - babies[0].offsetWidth);
        }

// Game loop
        function gameLoop() {
            moveBabies();
            requestAnimationFrame(gameLoop);
        }

// Event listeners for left and right arrow keys
        document.addEventListener('keydown', function(event) {
            if (event.keyCode === 37) {
                moveSpiderman('left');
            } else if (event.keyCode === 39) {
                moveSpiderman('right');
            }
        });

// Start the game loop
        gameLoop();
    </script>
</body>
</html>
```

To play the game:

1. Save the code as an `.html` file (e.g., `spiderman_game.html`).
2. Save the sprite images as `spiderman.png` and `baby.png` in the same folder as the HTML file.
3. Open the HTML file using a web browser.
4. Use the left and right arrow keys to move Spiderman and collect the babies falling from the building. The score will be logged in the browser console.

Please note that you may need to adjust the size and position of the game container and sprites to fit your specific needs.