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

No:6142

822

←

Prev Next

→

Titan (moon of Saturn)
Developer User3859｜Date and time 23/7/1 17:50:33
Build time 43.323 sec｜Game capacity 4.081KB｜

Script

は、以下のような1枚のHTMLファイルで実装されたゲームです。JavaScriptはscriptタグで囲まれており、処理は実行開始されています。このゲームはスマホで遊ぶことを前提としており、絵文字を使用しています。

タイタンゲーム

👱‍♂️

このゲームは「タイタン」と呼ばれる絵文字のキャラクターを避けてプレイヤーを動かすゲームです。プレイヤーはスマホの操作で動かすことができ、タイタンに捕まるとゲームオーバーとなります。ゲームボードの中央に表示されるプレイヤーをスワイプすることで移動させることができます。

←

Prev　Next

→ 　

Back　

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

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

```html
<!DOCTYPE html>
<html>
<head>
    <title>タイタンゲーム</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        body {
            font-family: Arial, sans-serif;
            text-align: center;
            padding-top: 40px;
        }

#gameBoard {
            width: 300px;
            height: 300px;
            margin: 0 auto;
            border: 1px solid black;
            border-radius: 5px;
            position: relative;
        }

#player {
            position: absolute;
            top: 50%;
            left: 50%;
        }

.titan {
            position: absolute;
        }

.titan:before {
            content: "\1F479";
            font-size: 24px;
            line-height: 16px;
        }

</style>
</head>
<body>
    <h1>タイタンゲーム</h1>
    <div id="gameBoard">
        <div id="player">👱‍♂️</div>
        <div class="titan" style="top: 10%; left: 20%;"></div>
        <div class="titan" style="top: 30%; left: 60%;"></div>
        <div class="titan" style="top: 60%; left: 40%;"></div>
        <div class="titan" style="top: 70%; left: 80%;"></div>
    </div>

// ゲームの状態
        var gameState = true;

// ゲームボードとプレイヤーの要素の取得
        var gameBoard = document.getElementById('gameBoard');
        var player = document.getElementById('player');

// プレイヤーの初期位置の設定
        var playerX = gameBoard.offsetWidth / 2;
        var playerY = gameBoard.offsetHeight / 2;
        player.style.transform = 'translate(-50%, -50%)';
        player.style.left = playerX + 'px';
        player.style.top = playerY + 'px';

// タイタンの要素の取得
        var titans = document.getElementsByClassName('titan');

// タイタンとの当たり判定の確認
        function checkCollision() {
            var playerRect = player.getBoundingClientRect();
            var collided = false;

for (var i = 0; i < titanCount; i++) {
                var titanRect = titans[i].getBoundingClientRect();
                if (playerRect.left < titanRect.right &&
                    playerRect.right > titanRect.left &&
                    playerRect.top < titanRect.bottom &&
                    playerRect.bottom > titanRect.top) {
                    collided = true;
                    break;
                }
            }

if (collided) {
                gameState = false;
                alert('ゲームオーバー！タイタンに捕まってしまった！');
                location.reload();
            }
        }

// ゲームのメインループ
        function gameLoop() {
            if (gameState) {
                requestAnimationFrame(gameLoop);

// プレイヤーの移動
                playerX += Math.random() * 10 - 5;
                playerY += Math.random() * 10 - 5;
                player.style.left = playerX + 'px';
                player.style.top = playerY + 'px';

// タイタンとの当たり判定の確認
                checkCollision();
            }
        }

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