Square vs circle with normal circle, speed circle, circle with plane and big circle, if you die you are game over!'s game

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

No:50709

3091

←

Prev Next

→

Square vs circle with normal circle, speed circle,..ALL
Developer anonymous｜Date and time 70/1/1 9:48:02
Build time unknown sec｜Game capacity 2.882KB｜

Script

←

Prev　Next

→ 　

Back　

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

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Square vs Circle Game</title>
    <style>
        #gameArea {
            width: 100vw;
            height: 100vh;
            background-color: #f0f0f0;
            position: relative;
            overflow: hidden;
        }
        #player {
            width: 50px;
            height: 50px;
            background-color: blue;
            position: absolute;
            bottom: 20px;
            left: calc(50% - 25px);
        }
        .enemy {
            width: 50px;
            height: 50px;
            background-color: red;
            position: absolute;
        }
    </style>
</head>
<body>
    <div id="gameArea">
        <div id="player"></div>
    </div>

let playerLeft = 50;

const enemies = [];

function createEnemy() {
            const enemy = document.createElement('div');
            enemy.classList.add('enemy');
            enemy.style.left = `${Math.random() * (gameArea.clientWidth - 50)}px`;
            gameArea.appendChild(enemy);
            enemies.push(enemy);
        }

function moveEnemies() {
            enemies.forEach(enemy => {
                const enemyBottom = enemy.getBoundingClientRect().bottom;
                enemy.style.bottom = `${enemyBottom - 1}px`;

if (enemyBottom < 0) {
                    enemy.remove();
                    const index = enemies.indexOf(enemy);
                    enemies.splice(index, 1);
                }

if (isColliding(player, enemy)) {
                    gameOver();
                }
            });
        }

function isColliding(a, b) {
            const aRect = a.getBoundingClientRect();
            const bRect = b.getBoundingClientRect();

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

function gameOver() {
            alert('Game Over! Try again.');
            window.location.reload();
        }

document.addEventListener('keydown', (e) => {
            if (e.key === 'ArrowLeft' && playerLeft > 0) {
                playerLeft -= 5;
            } else if (e.key === 'ArrowRight' && playerLeft < gameArea.clientWidth - player.clientWidth) {
                playerLeft += 5;
            }

player.style.left = `${playerLeft}px`;
        });

setInterval(() => {
            createEnemy();
        }, 1000);

setInterval(() => {
            moveEnemies();
        }, 20);
    </script>
</body>
</html>