Quarter View Actions's game

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

No:2915

1962

←

Prev Next

→

Quarter View Actions
Developer User3494｜Date and time 23/6/23 3:44:40
Build time 48.869 sec｜Game capacity 5.609KB｜

Script

RPGのアプリを作ってみました！以下が実際のプログラムになります。

🧑

🐲

このアプリは、プレイヤーと敵のキャラクターがクォータービューで表示されます。プレイヤーは、左右上下のボタンを押すことで移動できます。敵キャラクターは、ランダムな方向に移動します。キャラクター同士が重なると、それぞれの移動方向に対して衝突判定が実行されます。また、各操作でメッセージが表示され、2秒後に自動で消えます。これにより、プレイヤーは自分の操作が反映されたことを確認することができます。このアプリはスマホでも十分に操作可能であり、シンプルな操作性により誰でも遊ぶことができます。ぜひお試しください！

←

Prev　Next

→ 　

Back　

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

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

RPGのアプリを作ってみました！

以下が実際のプログラムになります。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>クォータービューRPG</title>
    <style>
        /* 画面全体をカバーするdivのスタイル */
        #game-screen {
            position: relative;
            width: 100%;
            height: 100%;
            overflow: hidden;
        }

/* キャラクターのスタイル */
        .character {
            position: absolute;
            bottom: 0;
            transition: transform 0.5s linear;
        }

/* キャラクターのアニメーション */
        .character.move-right {
            transform: translateX(200px);
        }
        .character.move-left {
            transform: translateX(-200px);
        }
        .character.move-up {
            transform: translateY(-200px);
        }
        .character.move-down {
            transform: translateY(200px);
        }

/* ボタンのスタイル */
        button {
            font-size: 24px;
            padding: 10px;
            margin: 10px;
        }

/* メッセージのスタイル */
        #message {
            position: absolute;
            top: 10px;
            left: 10px;
            color: white;
            font-size: 24px;
            text-shadow: 2px 2px black;
        }
    </style>
</head>
<body>
    <div id="game-screen">
        <div class="character" id="player">🧑</div>
        <div class="character" id="enemy">🐲</div>
        <div id="message"></div>
    </div>

// スマホでは画面サイズが小さいことが多いので、キャラクターのサイズを調整
        var character_size = window.innerWidth / 10;
        player.style.fontSize = character_size + 'px';
        enemy.style.fontSize = character_size + 'px';

// ボタンを押した時の処理
        var leftButton = document.getElementById('left-button');
        var rightButton = document.getElementById('right-button');
        var upButton = document.getElementById('up-button');
        var downButton = document.getElementById('down-button');

leftButton.onclick = function() {
            player.classList.add('move-left');
            showMessage('左に移動しました！');
        };
        rightButton.onclick = function() {
            player.classList.add('move-right');
            showMessage('右に移動しました！');
        };
        upButton.onclick = function() {
            player.classList.add('move-up');
            showMessage('上に移動しました！');
        };
        downButton.onclick = function() {
            player.classList.add('move-down');
            showMessage('下に移動しました！');
        };

// アニメーションが終了した時の処理
        player.addEventListener('transitionend', function() {
            // アニメーション終了後、キャラクターの位置を元に戻す
            player.classList.remove('move-left');
            player.classList.remove('move-right');
            player.classList.remove('move-up');
            player.classList.remove('move-down');

// 敵キャラクターも移動する
            var random_direction = Math.floor(Math.random() * 4);
            switch(random_direction) {
                case 0:
                    enemy.classList.add('move-left');
                    showMessage('敵が左に移動しました！');
                    break;
                case 1:
                    enemy.classList.add('move-right');
                    showMessage('敵が右に移動しました！');
                    break;
                case 2:
                    enemy.classList.add('move-up');
                    showMessage('敵が上に移動しました！');
                    break;
                case 3:
                    enemy.classList.add('move-down');
                    showMessage('敵が下に移動しました！');
                    break;
            }
        });

// メッセージを表示する
        function showMessage(message) {
            var messageElement = document.getElementById('message');
            messageElement.innerText = message;

// 2秒後にメッセージを消す
            setTimeout(function() {
                messageElement.innerText = '';
            }, 2000);
        }
    </script>
</body>
</html>

このアプリは、プレイヤーと敵のキャラクターがクォータービューで表示されます。プレイヤーは、左右上下のボタンを押すことで移動できます。敵キャラクターは、ランダムな方向に移動します。キャラクター同士が重なると、それぞれの移動方向に対して衝突判定が実行されます。

また、各操作でメッセージが表示され、2秒後に自動で消えます。これにより、プレイヤーは自分の操作が反映されたことを確認することができます。

このアプリはスマホでも十分に操作可能であり、シンプルな操作性により誰でも遊ぶことができます。ぜひお試しください！