Question

我对编程和javascript / dom很新。最终，我正在尝试制作一个滑动益智游戏，但从一开始，我只是试图以随机顺序加载图像。这将是一个4x4网格的图像。这些图像被命名为Tree00,01,02,03,10等，最多33个。到目前为止，这是我的代码：

        <html>
<head>
<title>Shuffle</title>
</head>
<body>

<script language="JavaScript">
<!--
Pics = new Array();
var Top = 16;

for(i = 0; i < Top; i++) {
  document.write("<img><img><img><img><br>");
}

function RandomInt(Min, Max) {
  RI = Math.floor(Math.random() * (Max - Min + 1)) + Min;
  return(RI);
}

function Shuffle() {
  N = RandomInt(0, 1);
  this.Image.src=Pics[N];
  this.Image.style.left = 220;


}

function ViewerObj(Image, Pics, i) {
  this.Image = Image;
  this.Image.style.left = 800;
  this.Pics = Pics;
  this.Shuffle = Shuffle;
  this.Image.id = "ID" + i;
}

function Randomise() {
  var i;

  for(i = 0; i < Top; i++) {
    Viewers[i].Shuffle();
    Viewers[i].Image.style.left = 200;
  }
}

Viewers = new Array();
var i;

for(i = 0; i < 3; i++) {
  Pics[i] = "images/Tree" + (i) + (i + 1) + ".jpg";  
}

for(i = 0; i < Top; i++) {
  document.images[i].src = "images/Blank.jpg";
  document.images[i].style.left = 300;
  Viewers[i] = new ViewerObj(document.images[i], Pics, i);
}


//-->
</script>
<h1>Shuffle</h1>
  <form>
    <input type="button" value="Shuffle" onClick="Randomise();"/>
  </form>
</body>
</html>

我只是无法理解我需要改变的东西以及我如何去做。任何帮助+解释将非常感激。我想要实现的是它加载每个图像，但只是按随机顺序，但没有重复。

Answer 1

以下是您脚本中的一些问题：

首先替换

for(i = 0; i < Top; i++) {
  document.write("<img><img><img><img><br>");
}

通过

for(i = 0; i < Top; i++) {
 document.write("<img>");
 if ((i+1)%4 == 0) {
  document.write("<br>");
 }
}

您的代码中只能获得16个IMG元素而不是4 * 16

那么您的图像需要16个不同的名称：替换

for(i = 0; i < 3; i++) {
 Pics[i] = "images/Tree" + (i) + (i + 1) + ".jpg";  
}

通过

for(var i = 0; i < 4; i++) {
for(var j = 0; j < 4; j++) {
 Pics[j+4*i] = "images/Tree" + (i) + (j) + ".jpg";  
}
}

然后你最大的问题就是洗牌。你不能逐个洗牌“观众”，因为你想避免重复。每个观众必须随机选择一个独特的图像。

为此，您可以在mdarwi的答案中使用该技术：例如，对Pics表进行洗牌。

在jsbin here

上查看修改后的代码

Answer 2

如果您的问题仅仅是您希望图像被正确洗牌，您可以使用以下代码（直接从Fisher-Yates shuffle on Wikipedia的Javascript示例代码中获取：

var n = a.length;
for(var i = n - 1; i > 0; i--) {
    var j = Math.floor(Math.random() * (i + 1));
    var tmp = a[i];
    a[i] = a[j];
    a[j] = tmp;
}

最简单的方法是将图像Tree1重命名为TreeN，然后将N个整数放入数组中，并使用上述算法对其进行随机播放。

Answer 3

（这是代码注释，而不是答案）

Pics = new Array();

Pics变量应在使用前声明。另外，请使用简写符号[]

var Pics = [];

var Top = 16;

for (i = 0; i < Top; i++) {
    document.write("<img><img><img><img><br>");
}

i变量仅在代码中稍后声明。它应该在程序的顶部声明。

function RandomInt(Min, Max) {
    RI = Math.floor(Math.random() * (Max - Min + 1)) + Min;
    return (RI);
}

这特别危险：RI变量未在函数内声明，因此它变为隐式全局属性。应该避免这种情况。此外，返回声明中的parens是多余的。

function RandomInt(Min, Max) {
    return Math.floor(Math.random() * (Max - Min + 1)) + Min;
}

function Shuffle() {
    N = RandomInt(0, 1);
    this.Image.src = Pics[N];
    this.Image.style.left = 220;    
}

同样，应声明N变量。另外，为什么这个“方法”在ViewerObj构造函数之外声明？要么把它放在里面，要么 - 甚至更好 - 将它添加到构造函数原型对象中。这样，只有一个Shuffle函数对象而不是很多。

function ViewerObj(Image, Pics, i) {
    this.Image = Image;
    this.Image.style.left = 800;
    this.Pics = Pics;
    this.Shuffle = Shuffle;
    this.Image.id = "ID" + i;
}

function Randomise() {
    var i;

    for (i = 0; i < Top; i++) {
        Viewers[i].Shuffle();
        Viewers[i].Image.style.left = 200;
    }
}

Viewers = new Array();
var i;

如上所述，i变量应在顶部声明。此外，应声明Viewers变量。

var Viewers = [];

for (i = 0; i < 3; i++) {
    Pics[i] = "images/Tree" + (i) + (i + 1) + ".jpg";
}

for (i = 0; i < Top; i++) {
    document.images[i].src = "images/Blank.jpg";
    document.images[i].style.left = 300;
    Viewers[i] = new ViewerObj(document.images[i], Pics, i);
}

Javascript / Dom将图像加载到网格中

3 个答案: