AI game creator

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

No:9309

116

←

Prev Next

→

Shooting Game
Developer User4328｜Date and time 23/7/23 15:06:54
Build time 24.192 sec｜Game capacity 4.093KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋グッズランキング

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

<!DOCTYPE html>
<html>
<head>
    <title>Shooting Game</title>
    <style>
        #gameArea {
            width: 400px;
            height: 600px;
            background-color: black;
            position: relative;
        }
      
        #player {
            width: 50px;
            height: 50px;
            background-color: red;
            position: absolute;
            bottom: 0;
            left: 175px;
        }
      
        .bullet {
            width: 10px;
            height: 20px;
            background-color: yellow;
            position: absolute;
        }
      
        .enemy {
            width: 50px;
            height: 50px;
            background-color: blue;
            position: absolute;
        }
    </style>
</head>
<body>
    <div id="gameArea">
        <div id="player"></div>
    </div>

function shootBullet() {
            var bullet = document.createElement("div");
            bullet.className = "bullet";
            bullet.style.left = player.offsetLeft + player.offsetWidth / 2 - 5 + "px";
            bullet.style.bottom = player.offsetHeight + "px";
            gameArea.appendChild(bullet);
            bullets.push(bullet);
        }

function createEnemy() {
            var enemy = document.createElement("div");
            enemy.className = "enemy";
            enemy.style.left = Math.random() * (gameArea.offsetWidth - enemy.offsetWidth) + "px";
            enemy.style.top = "-50px";
            gameArea.appendChild(enemy);
            enemies.push(enemy);
        }

function isCollision(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);
        }

function gameOver() {
            clearInterval(gameLoop);
            alert("Game Over! Your score is: " + score);
        }

document.addEventListener("keydown", movePlayer);
        var gameLoop = setInterval(function () {
            moveBullets();
            moveEnemies();
        }, 50);

setInterval(createEnemy, 1000);
    </script>
</body>
</html>