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

【问题标题】：Having different images appear when same key is pressed using canvas使用画布按下相同的键时出现不同的图像
【发布时间】：2013-01-06 14:11:06
【问题描述】：

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

我尝试了很多，在多次尝试失败后，我认为唯一的方法可能是编写first dialogue1 is displayed之类的代码，然后如果用户按下键13，则显示"dialogue" + "parseInt(1) + parseInt(1)"，然后显示@987654326 @...' 有什么想法吗？

【问题讨论】：

标签： javascript html canvas keyboard image-loading

【解决方案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;

【讨论】：

【解决方案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"
             ]

当您实例化画布和工作上下文时，我将跳过该部分。关键是您需要为canvas 创建一个eventListener 并监听按下的键，对于您的情况，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/

【讨论】：