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

No:38188

←

Prev Next

→

Tower blast
Developer User9721｜Date and time 24/1/23 5:51:12
Build time 9.053 sec｜Game capacity 2.656KB｜

Script

Tower Blast Game

←

Prev　Next

→ 　

Back　

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

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

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Tower Blast</title>
    <style>
        body {
            text-align: center;
            font-family: Arial, sans-serif;
        }

h1 {
            color: #2c3e50;
        }

#tower {
            width: 200px;
            height: 400px;
            background-color: #ecf0f1;
            margin: 20px auto;
            position: relative;
            border: 1px solid #95a5a6;
        }

#launcher {
            width: 50px;
            height: 50px;
            background-color: #34495e;
            position: absolute;
            bottom: 0;
            left: 75px;
        }

#missile {
            width: 20px;
            height: 20px;
            background-color: #e74c3c;
            position: absolute;
            bottom: 50px;
            left: 90px;
            border-radius: 50%;
            display: none;
        }
    </style>
</head>
<body>
    <h1>Tower Blast Game</h1>
    <div id="tower">
        <div id="launcher"></div>
        <div id="missile"></div>
    </div>
    <script>
        var launcher = document.getElementById("launcher");
        var missile = document.getElementById("missile");

var isMissileFired = false;
        var missileInterval;

launcher.addEventListener("click", function() {
            if (!isMissileFired) {
                isMissileFired = true;
                missile.style.display = "block";
                missileInterval = setInterval(function() {
                    var missileBottom = parseInt(window.getComputedStyle(missile).bottom);

if (missileBottom >= 400) {
                        clearInterval(missileInterval);
                        missile.style.display = "none";
                        isMissileFired = false;
                    } else {
                        missile.style.bottom = (missileBottom + 10) + "px";
                    }

checkCollision();
                }, 50);
            }
        });

function checkCollision() {
            var launcherRect = launcher.getBoundingClientRect();
            var missileRect = missile.getBoundingClientRect();

if (
                missileRect.bottom >= launcherRect.top &&
                missileRect.left >= launcherRect.left &&
                missileRect.right <= launcherRect.right
            ) {
                clearInterval(missileInterval);
                missile.style.display = "none";
                isMissileFired = false;
                alert("Tower Blasted! Game Over!");
            }
        }
    </script>
</body>
</html>