如何在多个图像而不是一个图像上运行此javascript？

Question

I ran through this: PUZZLE CREATING TUTORIAL and completed the puzzle. I'm trying to have the same script run on more than one img on a page. I tried running some of it through a loop:

var i;
for(i=1; i<3; i++){

function init(){

    _img = new Image();
    _img.addEventListener('load', onImage, false);
    _img.src = "images/"+i+".png" 
}

function onImage(e){
    _pieceWidth = Math.floor(_img.width / PUZZLE_DIFFICULTY)
    _pieceHeight = Math.floor(_img.height / PUZZLE_DIFFICULTY)
    _puzzleWidth = _pieceWidth * PUZZLE_DIFFICULTY;
    _puzzleHeight = _pieceHeight * PUZZLE_DIFFICULTY;
    setCanvas();
    initPuzzle();
}

function setCanvas(){ 
    _canvas = document.getElementById(""+i+""); 

    _stage = _canvas.getContext('2d');
    _canvas.width = _puzzleWidth;
    _canvas.height = _puzzleHeight;
    _canvas.style.border = "2px solid red";

}
    console.log(i);

}

and I've gotten to a point where I can print the 'i'th picture in the 'i'th canvas id, but it will only print one puzzle at a time and not more.

Answer 1

Everything in the puzzle code is not set up to handle multiple puzzles. You'll actually need to make way more changes than that to have the puzzle get rendered correctly.

What you should probably do is make a new makePuzzle function, that sets up variables for the rest of the functions to use, and then have them accept arguments, instead of relying on the things that are in the global scope..

for an example (This won't work unchanged, but should illustrate my point):

function makePuzzle(puzzleId, difficulty) {
  var image = new Image();
  image.addEventListener('load', function() {
    makePuzzleForImage(image);
  }, false);
  image.src = "images/"+puzzleId+".png" 
}

makePuzzleForImage(image) {
  var pieceWidth = Math.floor(image.width / difficulty)
  var pieceHeight = Math.floor(image.height / difficulty)
  var puzzleWidth = pieceWidth * difficulty;
  var puzzleHeight = pieceHeight * difficulty;

  var canvas = document.getElementById(""+puzzleId+""); 
  var stage = canvas.getContext('2d');
  canvas.width = puzzleWidth;
  canvas.height = puzzleHeight;
  canvas.style.border = "2px solid red";
  // this also needs to be made so it can accept arguments, but I didn't
  // do that for you since it'll take more time:
  // initPuzzle();
}

for (var i=1; i<3; i++) {
  makePuzzle(i, PUZZLE_DIFFICULTY);
}