Question

我目前正在使用JS制作游戏，但我遇到了一个问题。

我有一个存储图像的2D数组，现在我想要每1秒更换一次随机图片，一切正常，但我不知道如何更改图片。

如果我想更改阵列中的随机单元格，是否必须打印所有其他图像？

我几乎可以肯定，如果不这样做，还有另一种方法可以改变它。

我很乐意提供帮助，如果有人需要其他解释，我会很高兴。

Answer 1

我会从像

这样的东西开始

var ImageOne = new Image();
ImageOne.src = "UrlToImage";

等等，以确保在游戏开始时加载所有图像

此后我将使用jQuery：

$("#IdOfImg").attr("src", ImageOne);

Answer 2

您可以尝试在标题中使用此类内容。它应该每秒调用changePic()，在图像数组中递增，并在图像元素上设置新图片。

//know your array sizes
var max_x = picArr.length;
var max_y = picArr[0].length;
var current_x = 0;
var current_y = 0;

function changePic()
{
  if(current_y == max_y-1)
  {
    if(current_x == max_x-1)
    {
      current_x = 0;
      current_y = 0;
    }
    else
    {
      current_x++;
      current_y = 0;
    }
  }
  else
    current_y++;

  var pic = picArr[current_x][current_y];
  getElementById('randomImage').setAttribute('src', pic);

  window.setTimeout(changePic, 1000);
}

setTimeout(changePic, 1000);

https://developer.mozilla.org/en/DOM/window.setTimeout

Answer 3

您可能希望尝试将css类用于具有背景图像的元素，而不是将图像添加到DOM。我认为back.png的css类和1.png的css应该可以解决这个问题。

每秒在td元素上切换类。

希望这有帮助。

用JS创建一个非常简单的游戏

3 个答案: