Shooter game with joystick and ammo scattered around where you fight red enemies's game

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

No:50732

←

Prev Next

→

Shooter game with joystick and ammo scattered arou..ALL
Developer User21361｜Date and time 24/3/9 13:19:58
Build time 11.342 sec｜Game capacity 2.959KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在の人気グッズランキング

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

<!DOCTYPE html>
<html>
<head>
    <title>Shooter Game</title>
    <style>
        #gameArea {
            width: 400px;
            height: 400px;
            border: 1px solid black;
            position: relative;
        }
        #player {
            width: 50px;
            height: 50px;
            background: blue;
            position: absolute;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
        }
        .enemy {
            width: 20px;
            height: 20px;
            background: red;
            position: absolute;
        }
        .ammo {
            width: 10px;
            height: 10px;
            background: green;
            position: absolute;
        }
    </style>
</head>
<body>
<div id="gameArea">
    <div id="player"></div>
</div>

function createEnemy() {
        let enemy = document.createElement('div');
        enemy.classList.add('enemy');
        enemy.style.top = Math.floor(Math.random() * 300) + 'px';
        enemy.style.left = Math.floor(Math.random() * 300) + 'px';
        gameArea.appendChild(enemy);
        enemies.push(enemy);
    }

function createAmmo() {
        let ammoPack = document.createElement('div');
        ammoPack.classList.add('ammo');
        ammoPack.style.top = Math.floor(Math.random() * 300) + 'px';
        ammoPack.style.left = Math.floor(Math.random() * 300) + 'px';
        gameArea.appendChild(ammoPack);
        ammo.push(ammoPack);
    }

function movePlayer(event) {
        if (event.key === 'ArrowLeft') {
            player.style.left = parseInt(player.style.left, 10) - 10 + 'px';
        } else if (event.key === 'ArrowRight') {
            player.style.left = parseInt(player.style.left, 10) + 10 + 'px';
        }
    }

function checkCollision() {
        for (let enemy of enemies) {
            if (isCollide(player, enemy)) {
                alert('Game Over! You got hit by an enemy.');
                location.reload();
            }
        }

for (let pack of ammo) {
            if (isCollide(player, pack)) {
                let idx = ammo.indexOf(pack);
                ammo.splice(idx, 1);
                gameArea.removeChild(pack);
            }
        }
    }

function isCollide(a, b) {
        let aRect = a.getBoundingClientRect();
        let bRect = b.getBoundingClientRect();

return !(
            aRect.top > bRect.bottom ||
            aRect.right < bRect.left ||
            aRect.bottom < bRect.top ||
            aRect.left > bRect.right
        );
    }

function gameLoop() {
        createEnemy();
        createAmmo();
        checkCollision();
        requestAnimationFrame(gameLoop);
    }

document.addEventListener('keydown', movePlayer);
    gameLoop();
</script>
</body>
</html>