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

No:15504

120

←

Prev Next

→

ピエンの絵文字から逃げるゲーム
Developer User6722｜Date and time 23/9/9 16:40:13
Build time 36.386 sec｜Game capacity 4.214KB｜

Script

了解しました。以下にピエンの絵文字から逃げるゲームの実装例を示します。

スコア: 0

🏃

🐧

このゲームでは、プレイヤーを制御してピエンから逃げるように移動します。プレイヤーは左右の矢印キーで移動します。ピエンとプレイヤーが衝突した場合はゲームオーバーとして表示されます。

←

Prev　Next

→ 　

Back　

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

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

了解しました。以下にピエンの絵文字から逃げるゲームの実装例を示します。

```html
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>ピエンから逃げるゲーム</title>
</head>
<body>
    <style>
        body {
            text-align: center;
            font-size: 2rem;
        }
    </style>

<h1 id="score">スコア: 0</h1>
    <h2 id="gameover" style="display: none;">ゲームオーバー</h2>
    <div id="player">🏃</div>
    <div id="pien">🐧</div>

// プレイヤーの初期位置
        const playerX = screenWidth / 2;
        const playerY = screenHeight - 100;

// プレイヤーの移動速度
        const playerSpeed = 10;

// ピエンの初期位置
        let pienX = Math.random() * (screenWidth - 100);
        let pienY = Math.random() * (screenHeight - 100);

// スコア
        let score = 0;

// プレイヤーのHTML要素を取得
        const playerElement = document.getElementById("player");

// ピエンのHTML要素を取得
        const pienElement = document.getElementById("pien");

// スコア表示のHTML要素を取得
        const scoreElement = document.getElementById("score");

// ゲームオーバー表示のHTML要素を取得
        const gameoverElement = document.getElementById("gameover");

// プレイヤーの初期位置を設定
        playerElement.style.left = playerX + "px";
        playerElement.style.top = playerY + "px";

// プレイヤーの移動処理
        function movePlayer(direction) {
            let playerLeft = parseInt(playerElement.style.left);
            let playerTop = parseInt(playerElement.style.top);

if (direction === "left") {
                playerLeft -= playerSpeed;
            } else if (direction === "right") {
                playerLeft += playerSpeed;
            }

if (playerLeft < 0) {
                playerLeft = 0;
            } else if (playerLeft > screenWidth - 100) {
                playerLeft = screenWidth - 100;
            }

playerElement.style.left = playerLeft + "px";
        }

// ピエンの移動処理
        function movePien() {
            let pienLeft = parseInt(pienElement.style.left);
            let pienTop = parseInt(pienElement.style.top);

pienLeft += 5;
            if (pienLeft > screenWidth - 100) {
                pienLeft = 0;
                pienTop = Math.random() * (screenHeight - 100);
            }

pienElement.style.left = pienLeft + "px";
            pienElement.style.top = pienTop + "px";
        }

// 当たり判定
        function checkCollision() {
            let playerRect = playerElement.getBoundingClientRect();
            let pienRect = pienElement.getBoundingClientRect();

if (
                playerRect.left < pienRect.right &&
                playerRect.right > pienRect.left &&
                playerRect.top < pienRect.bottom &&
                playerRect.bottom > pienRect.top
            ) {
                // 衝突した場合はゲームオーバーを表示
                gameoverElement.style.display = "block";
                clearInterval(intervalID);
            }
        }

// キーボード操作時の処理
        document.addEventListener("keydown", function (event) {
            if (event.key === "ArrowLeft") {
                movePlayer("left");
            } else if (event.key === "ArrowRight") {
                movePlayer("right");
            }
        });

// ゲームループ
        const intervalID = setInterval(function () {
            movePien();
            checkCollision();
        }, 30);
    </script>
</body>
</html>
```