Javascript / Dom загрузка изображений в сетку - PullRequest
Новая
       0

Javascript / Dom загрузка изображений в сетку

1 голос
/ 13 декабря 2010

Я довольно новичок в программировании и javascript / dom. В конечном счете, я пытаюсь создать скользящую головоломку, но для начала я просто пытаюсь загрузить изображения в случайном порядке. Это будет сетка изображений 4х4. Изображения называются 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>

Я просто не могу понять, что мне нужно изменить и как я могу это сделать. Любая помощь + объяснение будет высоко ценится. Я пытаюсь добиться загрузки каждого изображения, но только в произвольном порядке, но без дубликатов.

Ответы [ 3 ]

1 голос
/ 13 декабря 2010

Вот несколько проблем в вашем скрипте:

сначала замените 

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 здесь

0 голосов
/ 13 декабря 2010

(Это кодовый комментарий, а не ответ) 

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 не объявлена ​​внутри функции, поэтому она становится неявным глобальным свойством.Этого следует избегать.Кроме того, парены в выражении возврата являются излишними.

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);
}
0 голосов
/ 13 декабря 2010

Если ваша проблема заключается в том, что вы хотите, чтобы изображения были правильно перетасованы, вы можете использовать следующий код (взятый непосредственно из примера кода 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 целых чисел в массив и перетасовать их, используя приведенный выше алгоритм.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...