Dungeon in a volcano with lava and rock monsters.'s game

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

No:5920

4734

←

Prev Next

→

Dungeon in a volcano with lava and rock monsters.
Developer User3840｜Date and time 23/7/1 2:03:43
Build time 34.5 sec｜Game capacity 4.17KB｜

Script

では、以下のような簡単なゲームを作ってみましょう。このゲームは、スマホで操作することを前提としています。

👾

🔥

🌋

このゲームでは、プレイヤー（👾）がキーボードの上下左右の矢印キーで移動できます。プレイヤーが溶岩のモンスター（🔥）または岩のモンスター（🌋）に触れるとゲームオーバーです。溶岩のモンスターと岩のモンスターは自動的に移動します。

←

Prev　Next

→ 　

Back　

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

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

では、以下のような簡単なゲームを作ってみましょう。このゲームは、スマホで操作することを前提としています。

```html
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>ダンジョンゲーム</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            overflow: hidden;
            background-color: black;
        }
        #player {
            position: absolute;
            font-size: 30px;
        }
        #monster1, #monster2 {
            position: absolute;
            font-size: 30px;
            color: red;
        }
    </style>
</head>
<body>
    <div id="player">👾</div>
    <div id="monster1">🔥</div>
    <div id="monster2">🌋</div>

// モンスター1の位置と速度
        let monster1X = 200;
        let monster1Y = 100;
        let monster1VX = 1;
        let monster1VY = 1;

// モンスター2の位置と速度
        let monster2X = 400;
        let monster2Y = 300;
        let monster2VX = -1;
        let monster2VY = 1;

// プレイヤーの移動処理
        function movePlayer(event) {
            let dx = 0;
            let dy = 0;

if (event.key === 'ArrowUp') {
                dy = -10;
            } else if (event.key === 'ArrowDown') {
                dy = 10;
            } else if (event.key === 'ArrowLeft') {
                dx = -10;
            } else if (event.key === 'ArrowRight') {
                dx = 10;
            }

playerX += dx;
            playerY += dy;

document.getElementById('player').style.left = playerX + 'px';
            document.getElementById('player').style.top = playerY + 'px';

checkCollision();
        }

// モンスターの移動処理
        function moveMonsters() {
            monster1X += monster1VX;
            monster1Y += monster1VY;

monster2X += monster2VX;
            monster2Y += monster2VY;

document.getElementById('monster1').style.left = monster1X + 'px';
            document.getElementById('monster1').style.top = monster1Y + 'px';

document.getElementById('monster2').style.left = monster2X + 'px';
            document.getElementById('monster2').style.top = monster2Y + 'px';

checkCollision();
        }

// 衝突判定
        function checkCollision() {
            let playerRect = document.getElementById('player').getBoundingClientRect();
            let monster1Rect = document.getElementById('monster1').getBoundingClientRect();
            let monster2Rect = document.getElementById('monster2').getBoundingClientRect();

if (
                playerRect.left < monster1Rect.right &&
                playerRect.right > monster1Rect.left &&
                playerRect.top < monster1Rect.bottom &&
                playerRect.bottom > monster1Rect.top
            ) {
                gameOver();
            }

if (
                playerRect.left < monster2Rect.right &&
                playerRect.right > monster2Rect.left &&
                playerRect.top < monster2Rect.bottom &&
                playerRect.bottom > monster2Rect.top
            ) {
                gameOver();
            }
        }

// ゲームオーバー処理
        function gameOver() {
            alert('ゲームオーバー！');
            location.reload();
        }

// ゲームのメイン処理
        function main() {
            document.addEventListener('keydown', movePlayer);

setInterval(moveMonsters, 50);
        }

// ゲームの実行開始
        main();
    </script>
</body>
</html>
```