Having different images appear when same key is pressed using canvas

Question

I'm working on a game using HTML5 canvas where the dialogue is put in several images, each named the same but with a number at the end for its order (dialogue1.png, dialogue2.png...) and I'm trying to figure out how to make the next image appear each time the enter key (key 13, I think) is pressed.

I've tried a lot, and after many failed attempts, I think the only way might be to code something like first dialogue1 is displayed, then if user presses key 13, then "dialogue" + "parseInt(1) + parseInt(1)" is displayed, then n + 1...' Any thoughts?

score 0 · Answer 1 · answered Jan 23 '13 at 07:43

You'll have to keep track of some kind of counter for your dialogue images. Try something like this:

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.
    }
}

This assumes that the first image is rendered already.
If you want the first dialogue to be drawn when you press Enter for the first time, use var currentImage = 0; instead of var currentImage = 1;

Endre Simo · Answer 2 · 2013-01-23T09:17:10.260

Supposing you have the images saved somewhere on the hard disk named using a specific pattern, you can create an array of images. In the JsFiddle i've created i'm using image url's.

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"
             ]

I will skip the part when you instantiate the canvas and the working context. The point is that you need to create an eventListener for the canvas and listen for the key pressed, which for your case has the keyCode of 13. So every time you press the enter key you will increase the counter which will reference an image in the array.

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);                
        }
    }
}

Note: the first image is not loaded only at the first keypress. If you need to load the first image on load you have to instantiate separately.

Here is the working code: http://jsfiddle.net/S2j3s/

Having different images appear when same key is pressed using canvas

2 Answers2