パンチとキックの技を駆使して画面外からやってくる黒い敵を退治していくゲーム。プレイヤーの核に敵が当たるとゲームオーバー's game

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

No:40046

←

Prev Next

→

パンチとキックの技を駆使して画面外からやってくる黒い敵を退治していくゲーム。プレイヤーの核に敵が当た..ALL
Developer User17861｜Date and time 24/1/31 19:41:02
Build time 12.505 sec｜Game capacity 3.265KB｜

Script

Score: 0

←

Prev　Next

→ 　

Back　

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

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

<html>
<head>
    <style>
        #player {
            position: absolute;
            top: calc(50% - 50px);
            left: calc(50% - 50px);
            width: 100px;
            height: 100px;
            background-color: red;
            border-radius: 50px;
        }
        #enemy {
            position: absolute;
            top: 0;
            left: calc(50% - 50px);
            width: 100px;
            height: 100px;
            background-color: black;
            border-radius: 50px;
        }
        #score {
            position: absolute;
            top: 10px;
            right: 10px;
            font-size: 20px;
        }
    </style>
</head>
<body>
    <div id="player"></div>
    <div id="enemy"></div>
    <div id="score">Score: 0</div>

player.style.top = playerY + "px";
        player.style.left = playerX + "px";

function updateEnemy() {
            enemyY += enemySpeed;
            enemy.style.top = enemyY + "px";

if (enemyY + 100 > window.innerHeight) {
                enemyY = 0;
                enemyX = Math.random() * (window.innerWidth - 100);
                currentScore++;
                score.innerText = "Score: " + currentScore;
            }

if (checkCollision()) {
                endGame();
            }

if (!isGameOver) {
                requestAnimationFrame(updateEnemy);
            }
        }

function checkCollision() {
            var playerRect = player.getBoundingClientRect();
            var enemyRect = enemy.getBoundingClientRect();

return (
                playerRect.top < enemyRect.bottom &&
                playerRect.bottom > enemyRect.top &&
                playerRect.left < enemyRect.right &&
                playerRect.right > enemyRect.left
            );
        }

function endGame() {
            isGameOver = true;
            player.style.backgroundColor = "gray";
            enemy.style.display = "none";
            alert("Game Over! Your Score: " + currentScore);
        }

player.style.top = playerY + "px";
                player.style.left = playerX + "px";
            }
        });

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