Преобразовать массив в один параметр внутри вызова функции Vanilla Javascript

Question

Я пытаюсь выделить точку и щелкнуть по приключенческой видеоигре на HTML Canvas для G4 C. У меня есть массив, полный изображений. Я хочу преобразовать его в один параметр, чтобы я мог сделать что-то вроде image[1], и когда это произойдет, выбранный элемент массива изображения появится в качестве фона на холсте. Параметр находится внутри вызова функции.

Итак, как мне преобразовать мой массив в один параметр, точнее, параметр image, при вызове определенной функции, в которой есть несколько параметров?

Код должен быть на ванили JavaScript.

CSS

#gameCanvas {
    width: 960px;
    height: 640px;
    border: 5px solid rgba(52,52,52,1.00);
    background-color: rgba(241,213,179,1.00);
}

Ваниль JavaScript

/**Array of Images**/
var imgArray = [
    "gameImages/titleScreen.png",
    "gameImages/titleScreen1.png",
    "gameImages/titleScreenBW.png",
    "gameImages/startScreen.png",
    "gameImages/startScreenBW.png",
    "gameImages/forestTrail.png",
    "gameImages/forestTrailBW.png",
    "gameImages/jewleryOnLog.png",
    "gameImages/jewleryOnLogBW.png",
    "gameImages/sunlitWaterFall.png",
    "gameImages/sunlitWaterFalBW.png",
    "gameImages/sunlitWaterFall.png",
    "gameImages/sunsetStarySky.png",
    "gameImages/sunsetStarySkyBW.pn",
    "gameImages/campSunset.png",
    "gameImages/campSunsetBW.png",
    "gameImages/LoveHeart.png",
    "gameImages/LoveHeartBW.png",
    "gameImages/nightSky2BW.png",
    "gameImages/nightSky2.png",
    "gameImages/nightSkyAnimate.gif"
];

function drawImageProp(ctx, image, x, y, w, h, offsetX, offsetY) {

//Function Code for resizing images to fit canvas proportions...

ctx.drawImage(image, cx, cy, cw, ch, x, y, w, h);

}


drawImageProp(ctx, image, 0, 0, width, height); //I want to change image to get the array image element

/**Right now, the image parameter on Adobe Dreamweaver displays the error "'image' is not defined. [no-undef]"
**/

I пробовал drawImageProp.apply(null, imgArray); и другие методы применения, хотя я не могу найти для этого применение, поскольку я не превращаю все элементы массива в параметры.

Я пробовал for (){} l oop с: for (var i = 0; i < imgArray.length; i++) { imgArray.element = image; }, но Я не могу определить, работает ли он из-за недостатка знаний.

Если есть улучшения для этого кода или более эффективные способы вставки изображений в качестве фона в HTML Canvas для использования в качестве части чертежа или отображая сцены / события в точке и нажимая приключенческую видеоигру, дайте хорошо объясненный ответ. Это будет высоко ценится.

Answer 1

Я немного изменил ваш код, чтобы показать, как вы можете его разрешить. Суть проблемы в том, что вам:

• нужны элементы Image для рисования на холсте, а не их URL.
• Необходимо дождаться загрузки всех изображений перед вами могу нарисовать их

// First we have to convert all our images to Image objects and await them loading. This is not efficient to do all at once (slow), but for clarity I will do it like this for now.
var imgArray = [
    "gameImages/titleScreen.png",
    "gameImages/titleScreen1.png",
    "gameImages/titleScreenBW.png",
    "gameImages/startScreen.png",
    "gameImages/startScreenBW.png",
    "gameImages/forestTrail.png",
    "gameImages/forestTrailBW.png",
    "gameImages/jewleryOnLog.png",
    "gameImages/jewleryOnLogBW.png",
    "gameImages/sunlitWaterFall.png",
    "gameImages/sunlitWaterFalBW.png",
    "gameImages/sunlitWaterFall.png",
    "gameImages/sunsetStarySky.png",
    "gameImages/sunsetStarySkyBW.pn",
    "gameImages/campSunset.png",
    "gameImages/campSunsetBW.png",
    "gameImages/LoveHeart.png",
    "gameImages/LoveHeartBW.png",
    "gameImages/nightSky2BW.png",
    "gameImages/nightSky2.png",
    "gameImages/nightSkyAnimate.gif"
].map(sourceUrl => {
   
   // We will map every URL to an Image object and tell it to only say its ready (aka 'resolved') once we receive a load event.
   
   return new Promise((resolve, reject) => {
    
    const img = new Image;
    
    img.addEventListener( 'load', e => resolve( img ) );
    img.addEventListener( 'error', reject );
    img.src = sourceUrl;
    
   });
   
});

function drawImageProp(ctx, image, x, y, w, h, offsetX, offsetY) {

  ctx.drawImage(image, cx, cy, cw, ch, x, y, w, h);

}

// Now we will tell the browser to only execute the following after all imags are loaded:
// NOTE: If only one Image has an error, the code WILL fail.
// Failsafes for this are another batch of issues you need to resolve.

Promise.all( imgArray ).then( allImages => {
  
  // allImages will contain an array of Image elements that you can now 
  // pass to a canvas to draw one by one. Not sure what you want to accomplish here, 
  // but the following should at least not error out.
  
  allImages.forEach(image => {
  
    drawImageProp(ctx, image, 0, 0, width, height);
    
  });
  
}, error => {
  
  console.log( 'An image has thrown an error while loading, aborted everything', error );

});

Надеюсь, это поможет вам на вашем пути!