2

別の用途に適応させようとしている単純な HTML5 ゲームにボタンを追加する良い方法がわかりません。

矢印キーを使用してプレーヤーを制御する代わりに、実際に「上、下、左、右」ボタンをクリックする必要があります (より正確には、モバイル デバイスでタッチする必要があります)。

これが私が適応しようとしている入力コードです。

入力.js:

(function() {
    var pressedKeys = {};

    function setKey(event, status) {
        var code = event.keyCode;
        var key;

        switch(code) {
        case 32:
            key = 'SPACE'; break;
        case 37:
            key = 'LEFT'; break;
        case 38:
            key = 'UP'; break;
        case 39:
            key = 'RIGHT'; break;
        case 40:
            key = 'DOWN'; break;
        default:
            // Convert ASCII codes to letters
            key = String.fromCharCode(code);
        }

        pressedKeys[key] = status;
    }


    document.addEventListener('submit', function(e){
        console.log(e);
        return false;
    })

    document.addEventListener('keydown', function(e) {
        setKey(e, true);
    });

    document.addEventListener('keyup', function(e) {
        setKey(e, false);
    });

    window.addEventListener('blur', function() {
        pressedKeys = {};
    });

    window.input = {
        isDown: function(key) {
            return pressedKeys[key.toUpperCase()];
        }
    };
})();

「isDown」関数を参照する app.js のコードは次のとおりです。

function handleInput(dt) {
    if(input.isDown('DOWN') || input.isDown('s')) {
        player.pos[1] += playerSpeed * dt;
    }

    if(input.isDown('UP') || input.isDown('w')) {
        player.pos[1] -= playerSpeed * dt;
    }

    if(input.isDown('LEFT') || input.isDown('a')) {
        player.pos[0] -= playerSpeed * dt;
    }

    if(input.isDown('RIGHT') || input.isDown('d')) {
        player.pos[0] += playerSpeed * dt;
    }
}

HTML5 ゲームを作成しようとするのはまったく初めてなので、タッチ/クリック イベントの処理方法に関する提案は素晴らしいでしょう。また、ボタン自体については、div やフォームなどを使用した方がよいでしょうか。

ありがとう

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

編集/更新:

だから私はこれを私のapp.jsに挿入しました：

$("#upButton").click(function(){
        console.log("click");
        player.pos[1] -= playerSpeed * dt;
    })

実際にはクリックイベントを登録しますが、非常に奇妙でランダムな数の「クリック」を生成します（数回の居眠りから数千回まで）。私が適応させている特定のコードは、このリポジトリにあります: https://github.com/jlong ​​ster/canvas-game-bootstrap

この男のゲームはかなりきれいですが、私のような HTML5 ゲームの初心者にとっては「高度な」要素がたくさんあります。

4

1 に答える 1

0

常に表示されるボタンの場合 - html でボタンを作成し、クリック イベントを追加します。

キャンバスに動的なボタンが必要な場合 - ボタンを描画し、マウス クリックでボタン領域でマウス クリックが表示されているかどうか、ボタンが表示されているかどうかを確認してから、アクションを実行します。

于 2013-08-14T21:14:57.033 に答える