0

我正在开发一个使用 HTML5 画布的游戏，其中对话放置在多个图像中，每个图像都命名相同，但最后有一个数字表示其顺序（dialogue1.png, dialogue2.png...），我试图弄清楚如何制作每次按下enter键（13我认为是键）时都会出现下一张图像。

我已经尝试了很多，经过多次失败的尝试，我认为唯一的方法可能是编写类似的代码first dialogue1 is displayed，然后如果用户按下 key 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"
             ]

当您实例化画布和工作上下文时，我将跳过这一部分。关键是您需要创建一个eventListenerfor thecanvas并监听按下的键，对于您的情况，该键有keyCode13 个。因此，每次按下该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 回答