Javascript 为什么不是'；这不是在创建图像吗_Javascript_Arrays_Canvas

Javascript 为什么不是'；这不是在创建图像吗

javascript arrays canvas

Javascript 为什么不是'；这不是在创建图像吗,javascript,arrays,canvas,Javascript,Arrays,Canvas,我目前正在尝试使其成为数组的一部分，以便此数组显示作为数组一部分的外星人，但由于某种原因，当我在游戏循环中调用该函数时，没有显示任何内容，我非常困惑：/ //设置外星图片的数组。 var AliArray=新数组（） var Init=函数（）{ var totalRows=12；//要繁殖多少行外星人 var totalCols=12；//要产卵多少列外星人 //对于创建多维数组的循环[col][row] 对于（q=0；q

我目前正在尝试使其成为数组的一部分，以便此数组显示作为数组一部分的外星人，但由于某种原因，当我在游戏循环中调用该函数时，没有显示任何内容，我非常困惑：/

//设置外星图片的数组。 var AliArray=新数组（）

var Init=函数（）{
var totalRows=12；//要繁殖多少行外星人
var totalCols=12；//要产卵多少列外星人
//对于创建多维数组的循环[col][row]
对于（q=0；q<12；q++）{
AliArray[q]=新数组（）；
}
var imgWidth=50；//定义图像的宽度
var imgHeight=18；//定义图像的高度
var rng=Math.floor（（Math.random（）*10）+1）；//给出一个随机数，以便在关卡完成后生成不同的外星人。
对于（变量行=0；行<总计行；行++）{
for（var col=0；col5）{
AliArray[row][col].src=“images/alien2x.png”；
}
否则{
AliArray[row][col].src=“images/alien3.png”；
}
}
}
};
var=function（数组、行、列、x、y）{
返回函数（）{
ctx.drawImage（AliArray[row][col]，x，y）；
}
};

任何反馈都会非常好，因为我不知道为什么它目前没有加载图像。我所能做的最多的事情就是加载图像，但即使顺序正确，它们也会立即消失或隐藏在画布后面。

尝试在新的html页面中跳过此代码，然后更改图像的路径引用，这似乎是可行的

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <meta charset="utf-8" />
  <title></title>
 </head>
 <body>
  <canvas id="c" width="300" height="300"></canvas>
  <script>

   var c = document.getElementById('c');
   var ctx = c.getContext('2d');
   var AliArray = [];
   var Init = function () {

   var totalRows = 12; //How many rows of aliens to spawn  
   var totalCols = 12; //How many cols of aliens to spawn  
   // For loops that creates the multidemensional array [col][row]
   for (q = 0; q < 12; q++) {
    AliArray[q] = new Array();
   }
   var imgWidth = 50; // Defines image's width 
   var imgHeight = 18; // defines image's height
   var rng = Math.floor((Math.random() * 10) + 1); // Gives a random number so that it spawns different aliens once level is complete.
   for (var row = 0; row < totalRows; row++) {
   for (var col = 0; col < totalCols; col++) {
     AliArray[row][col] = new Image();
     var x = col * imgWidth;
     var y = row * imgHeight;
       AliArray[row][col].onload = drawAliens(AliArray, row, col, x, y);
       AliArray[row][col].src = "baby gator logo.jpg";
   }
  }
 };

 var drawAliens = function (AliArray, row, col, x, y) {
 return function () {
   ctx.drawImage(AliArray[row][col], x, y);
 }
};

Init();
</script>
</body>
</html>


var c=document.getElementById（'c'）；
var ctx=c.getContext（'2d'）；
var-AliArray=[]；
var Init=函数（）{
var totalRows=12；//要繁殖多少行外星人
var totalCols=12；//要产卵多少列外星人
//对于创建多维数组的循环[col][row]
对于（q=0；q<12；q++）{
AliArray[q]=新数组（）；
}
var imgWidth=50；//定义图像的宽度
var imgHeight=18；//定义图像的高度
var rng=Math.floor（（Math.random（）*10）+1）；//给出一个随机数，以便在关卡完成后生成不同的外星人。
对于（变量行=0；行<总计行；行++）{
for（var col=0；col

您确定要输入该功能吗？尝试添加一个console.log（“我正在调试”）；或警报（）；在函数内部查看函数是否确实被调用。下一个最好的猜测是，如果它没有画，也许就没有什么可以画了？检查包含Alian的数组是否为空？啊，你是对的，因为某些原因，数组似乎没有实际容纳任何东西！我理解代码的工作原理只是不确定为什么当放到上下文中时，它突然不再产生它的意图：/

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <meta charset="utf-8" />
  <title></title>
 </head>
 <body>
  <canvas id="c" width="300" height="300"></canvas>
  <script>

   var c = document.getElementById('c');
   var ctx = c.getContext('2d');
   var AliArray = [];
   var Init = function () {

   var totalRows = 12; //How many rows of aliens to spawn  
   var totalCols = 12; //How many cols of aliens to spawn  
   // For loops that creates the multidemensional array [col][row]
   for (q = 0; q < 12; q++) {
    AliArray[q] = new Array();
   }
   var imgWidth = 50; // Defines image's width 
   var imgHeight = 18; // defines image's height
   var rng = Math.floor((Math.random() * 10) + 1); // Gives a random number so that it spawns different aliens once level is complete.
   for (var row = 0; row < totalRows; row++) {
   for (var col = 0; col < totalCols; col++) {
     AliArray[row][col] = new Image();
     var x = col * imgWidth;
     var y = row * imgHeight;
       AliArray[row][col].onload = drawAliens(AliArray, row, col, x, y);
       AliArray[row][col].src = "baby gator logo.jpg";
   }
  }
 };

 var drawAliens = function (AliArray, row, col, x, y) {
 return function () {
   ctx.drawImage(AliArray[row][col], x, y);
 }
};

Init();
</script>
</body>
</html>