Javascript/Dom loading images in to grid_问答_开发者

I'm pretty new to programming and javascript/dom. Ultimately, I'm trying to make a sliding puzzle game but to start off with, I'm just trying to get the images loading up in a random order. It's going to be a 4x4 grid of images. The images are named Tree00, 01, 02, 03, 10, etc up to 33. Here's my code so far:

        <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";
  docu开发者_如何学JAVAment.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>

I just can't quite fathom what I need to be changing and how I'd go about it. Any help + explanation would be much appreciated. What I am trying to achieve is it loading every image but just in a random order, but with no duplicates.

Here are a few problems in your script :

first replace

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>");
 }
}

you will get only 16 IMG elements instead of 4*16 in your code

then you will need 16 different names for your images : replace

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";  
}
}

Then you biggest problem is the shuffling. You cannot shuffle the "Viewers" one-by-one because you want to avoid duplicates. Each viewer must randomly select a unique image.

For this you can use the technique in mdarwi's answer : shuffle the Pics table for instance.

check your modified code on jsbin here

If your problem is simply that you'd like the images to be properly shuffled, you can use the following code (taken directly from the Javascript sample code for the Fisher-Yates shuffle on Wikipedia:

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;
}

The easiest thing to do would be to rename your images Tree1 to TreeN, and then place N integers in an array and shuffle them using the above algorithm.

(This is a code-comment, not an answer)

Pics = new Array();

The Pics variable should be declared before using. Also, use the shorthand notation []

var Pics = [];

var Top = 16;

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

The i variable is declared only later in the code. It should be declared at the top of the program.

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

This is particularly dangerous: the RI variable is not declared inside the function, so it becomes an implicit global property. That should be avoided. Also, the parens in the return statement are superfluous.

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;    
}

Again, the N variable should be declared. Also, why is this "method" declared outside of the ViewerObj constructor? Either, put it inside, or - even better - add it to the constructors prototype object. That way, there will only be one Shuffle function object instead of many.

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;

As mentioned above, the i variable should be declared on top. Also, the Viewers variable should be declared.

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);
}