9

Canvas と優れた KineticJS ライブラリを組み合わせて初めて HTML5 ゲームを作成しようとしていますが、早い段階で少し壁にぶつかりました。

私がやりたいことは、ユーザーにゲームのボックスに自分の名前を入力するように依頼することです。いくつかの調査を行った結果、使用しているキャンバスのその部分にフローティング HTML 要素を取得する以外に、これを行う方法がわかりません。

これは正しいです？

多くの Flash ゲームや Web ゲームで育ったので、名前を入力したり、ファイル名を保存したりする必要があるたびに、それはゲーム自体に直接行われ、HTML に依存せずに生成されると確信しています。

これを行う方法についてのアドバイスは、ありがたく受け取られます。

4

3 に答える 3

4

次の CSS テクニックを使用して、キャンバスの上部にフローティング HTML 要素を取得できます。

http://css-tricks.com/absolute-positioning-inside-relative-positioning/

  • ラッパーの div 位置を作成: 相対

  • position: absolute を使用してキャンバスを内部に追加します

  • position: absolute を使用して、内部に他の HTML コントロールを追加します。

これは、canvas だけでなく、すべての HTML 要素に適用されます。

于 2012-11-17T13:08:24.057 に答える
3

手っ取り早い方法:

var userInput = prompt('What is your name?');

それは機能しますが、確かにそれを行うための最も美しい方法ではありません. iOS には、実際には非常に優れたプロンプトがあります。

于 2012-11-29T11:45:40.793 に答える
2

私はこれがちょっと古いことを知っていますが....

Canvas Inputは、私がゲームで使用する優れたライブラリです。

ここに画像の説明を入力

ご覧のとおり、ボックスに入力して画面に表示できます。使い方は簡単です:

var input = new CanvasInput({
    canvas: document.getElementById("ctx"),
    x: 0,
    y: 0,
    fontSize: 18,
    fontFamily: 'Arial',
    fontColor: '#212121',
    fontWeight: 'bold',
    width: 200,
    padding: 8,
    borderWidth: 1,
    borderColor: '#000',
    borderRadius: 3,
    onsubmit: function() {
        // your code here for submitting (when user presses enter)
    },
});

免責事項: 私は CanvasInput とはまったく関係がなく、この投稿について何も受け取っていません :)

于 2016-10-24T01:25:03.410 に答える