Javascript 当使用画布按下同一个键时，会显示不同的图像

我正在使用HTML5画布制作一个游戏，其中对话被放在几个图像中，每个图像的名称相同，但其顺序在末尾有一个数字（

dialogue1.png，dialogue2.png

…），我试图找出如何在每次按下enter键（我想是键

13

）时显示下一个图像

---

我已经尝试了很多次，在多次尝试失败后，我认为唯一的方法可能是编写类似于

的代码，首先显示dialogue1

，然后如果用户按

13

，然后显示

“dialogue”+“parseInt（1）+parseInt（1）”

，然后，

n+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
假设您使用特定模式将图像保存在硬盘上的某个位置，您可以创建一个图像数组。在我创建的JSFIDLE中，我使用了图像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
，并监听按下的键，对于您的情况，该键的值为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);                
        }
    }
}

如果（e.keyCode==13）{
if（计数器

注意：第一次按键时不会加载第一个图像。如果需要加载第一个映像，则必须单独实例化

以下是工作代码：