青いブロックを操作して追いかけてくる赤いブロックから10秒間逃げるゲーム's game

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

No:44896

←

Prev Next

→

青いブロックを操作して追いかけてくる赤いブロックから10秒間逃げるゲーム
Developer User19503｜Date and time 24/2/19 16:46:00
Build time 8.922 sec｜Game capacity 2.172KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋ゲームランキング

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

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>逃げろ！</title>
    <style>
        #player {
            width: 50px;
            height: 50px;
            background-color: blue;
            position: absolute;
        }

#enemy {
            width: 50px;
            height: 50px;
            background-color: red;
            position: absolute;
        }
    </style>
</head>
<body>
    <div id="player"></div>
    <div id="enemy"></div>

player.style.top = Math.random() * window.innerHeight + 'px';
        player.style.left = Math.random() * window.innerWidth + 'px';
        enemy.style.top = Math.random() * window.innerHeight + 'px';
        enemy.style.left = Math.random() * window.innerWidth + 'px';

enemy.addEventListener('mouseover', () => {
            isChasing = true;
            setTimeout(() => {
                isChasing = false;
            }, 10000);
        });

window.addEventListener('mousemove', (e) => {
            if (!isChasing) {
                player.style.top = e.clientY + 'px';
                player.style.left = e.clientX + 'px';
            }
        });

function gameLoop() {
            if (isChasing) {
                const playerRect = player.getBoundingClientRect();
                const enemyRect = enemy.getBoundingClientRect();

if (playerRect.top < enemyRect.top) {
                    enemy.style.top = enemyRect.top - 1 + 'px';
                } else {
                    enemy.style.top = enemyRect.top + 1 + 'px';
                }

if (playerRect.left < enemyRect.left) {
                    enemy.style.left = enemyRect.left - 1 + 'px';
                } else {
                    enemy.style.left = enemyRect.left + 1 + 'px';
                }
            }

requestAnimationFrame(gameLoop);
        }

gameLoop();
    </script>
</body>
</html>