Question

我正在使用HTML5画布制作一个游戏，其中对话放在几个图像中，每个图像都相同，但最后一个数字为其顺序（dialogue1.png, dialogue2.png ...）而我是每当按下键（我认为是键13）时，试图弄清楚如何使下一个图像出现。

我已经尝试了很多次，经过多次尝试失败后，我认为唯一的方法可能是编写类似first dialogue1 is displayed的内容，然后如果用户按下键13，那么"dialogue" + "parseInt(1) + parseInt(1)"显示，然后n + 1 ......'有什么想法吗？

Answer 1

您必须跟踪对话图像的某种计数器。尝试这样的事情：

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;

Answer 2

假设您将图像保存在使用特定模式命名的硬盘上的某个位置，您可以创建一个图像数组。在JsFiddle我创建了我正在使用图像网址。

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创建一个canvas并听取按下的键，对于您的情况，其中keyCode为13.所以每次按下输入键，您将增加计数器，该计数器将引用数组中的图像。

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/

使用画布按下相同的键时会出现不同的图像

2 个答案: