Penguin shooter (tiene puntos) (es muy decorado y sale sangre al disparar)'s game

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

No:38062

←

Prev Next

→

Penguin shooter (tiene puntos) (es muy decorado y ..ALL
Developer User16276｜Date and time 24/1/22 9:04:02
Build time 11.667 sec｜Game capacity 4.278KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在の新着人気ランキング

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

<!DOCTYPE html>
<html>
<head>
    <title>Penguin Shooter</title>
    <style>
        body {
            background-image: url("background.jpg");
            background-repeat: no-repeat;
            background-size: cover;
            margin: 0;
            padding: 0;
        }
        #game-board {
            position: relative;
            width: 600px;
            height: 400px;
            margin: 0 auto;
            overflow: hidden;
            background: url("iceberg.jpg") no-repeat center;
            background-size: cover;
        }
        #player {
            position: absolute;
            bottom: 0;
            left: 260px;
            width: 80px;
            height: 100px;
            background: url("penguin.png") no-repeat center;
            background-size: contain;
        }
        .bullet {
            position: absolute;
            bottom: 100px;
            left: 310px;
            width: 5px;
            height: 10px;
            background: red;
        }
        .penguin {
            position: absolute;
            top: -100px;
            left: 0;
            width: 80px;
            height: 100px;
            background: url("penguin.png") no-repeat center;
            background-size: contain;
        }
    </style>
</head>
<body>
    <div id="game-board">
        <div id="player"></div>
    </div>

document.addEventListener("keydown", function(event) {
                if (event.keyCode === 32) {
                    fireBullet();
                }
            });

function fireBullet() {
                var bullet = document.createElement("div");
                bullet.classList.add("bullet");
                gameBoard.appendChild(bullet);

var bulletInterval = setInterval(function() {
                    var bulletPosition = bullet.offsetTop;
                    bullet.style.bottom = (bulletPosition + 10) + "px";

var penguins = document.getElementsByClassName("penguin");

for (var i = 0; i < penguins.length; i++) {
                        var penguin = penguins[i];
                        var penguinTop = penguin.offsetTop;
                        var penguinLeft = penguin.offsetLeft;
                        var penguinRight = penguinLeft + penguin.offsetWidth;

if (bulletPosition <= penguinTop + penguin.offsetHeight &&
                            bulletPosition >= penguinTop &&
                            bullet.offsetLeft >= penguinLeft &&
                            bullet.offsetLeft <= penguinRight) {
                            clearInterval(bulletInterval);
                            bullet.remove();
                            penguin.remove();
                            score += 10;
                            updateScore();
                            break;
                        }
                    }

if (bulletPosition >= 400) {
                        clearInterval(bulletInterval);
                        bullet.remove();
                    }
                }, 10);
            }

function createPenguin() {
                var penguin = document.createElement("div");
                penguin.classList.add("penguin");
                penguin.style.left = Math.floor(Math.random() * 540) + "px";
                gameBoard.appendChild(penguin);

var penguinInterval = setInterval(function() {
                    var penguinPosition = penguin.offsetTop;
                    penguin.style.top = (penguinPosition + 1) + "px";

if (penguinPosition >= 400) {
                        clearInterval(penguinInterval);
                        penguin.remove();
                    }
                }, 10);
            }

function updateScore() {
                document.getElementById("score").innerText = "Puntos: " + score;
            }

setInterval(createPenguin, 2000);
            updateScore();
        });
    </script>
</body>
</html>