0

私はHTML5キャンバスを使用してゲームに取り組んでおり、ダイアログは複数の画像に配置されています。各画像には同じ名前が付けられていますが、順序の末尾に番号が付いています（dialogue1.png, dialogue2.png...）。enterキー（キー13だと思います）を押すたびに次の画像が表示されます。

私はたくさん試しましたが、何度も失敗した後、次のようなコードを書くのが唯一の方法だと思います。first dialogue1 is displayedユーザーがキーを押す13と、"dialogue" + "parseInt(1) + parseInt(1)"が表示され、次にn + 1...'何か考えはありますか？

4

2 に答える 2

0

ダイアログ画像のある種のカウンターを追跡する必要があります。次のようなことを試してください：

var currentImage = 1;

function enterKeyPressed(e){ // (Bind this function to your keyboard event listener)
    e = e || window.event;   // Compatibility
    if(e.which == 13){       // Check for the "Enter" key.
        currentImage++;      // Add 1 to the image counter.
        var image = "dialogue" + currentImage + ".png";  // Build image name
        dialogue(image);     // Your code to render the image, here.
    }
}

これは、最初の画像が既にレンダリングされていることを前提としています。
初めて押したときに最初のダイアログを描画する場合は、代わりにEnter使用しますvar currentImage = 0;var currentImage = 1;

于 2013-01-23T07:43:05.870 に答える
0

特定のパターンを使用して名前を付けたハードディスクのどこかに画像が保存されていると仮定すると、画像の配列を作成できます。私が作成した JsFiddle では、画像の URL を使用しています。

var images = ["http://dummyimage.com/100x100/f7f2f7/fff&text=text-1",
              "http://dummyimage.com/100x100/f7f2f7/fff&text=text-2",
              "http://dummyimage.com/100x100/f7f2f7/fff&text=text-3"
             ]

キャンバスと作業コンテキストをインスタンス化するときの部分はスキップします。eventListenerポイントは、 forを作成し、canvas押されたキーをリッスンする必要があることです。この場合、キーkeyCodeは 13 です。したがって、キーを押すたびenterに、配列内の画像を参照するカウンターが増加します。

if (e.keyCode == 13) {           
    if (counter < images.length) {            
        counter ++;

        var img = new Image();

        img.src = images[counter-1];
        img.onload = function() {
            ctx.drawImage(img, 0, 0, WIDTH, HEIGHT);                
        }
    }
}

注:最初のイメージは、最初のキーを押したときにのみロードされません。ロード時に最初のイメージをロードする必要がある場合は、個別にインスタンス化する必要があります。

ここに作業コードがあります: http://jsfiddle.net/S2j3s/

于 2013-01-23T08:55:42.270 に答える