VPF::Игра Собери картинку - Форум программистов

Joker07

Дата 28.6.2008, 14:28 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 40
Регистрация: 17.6.2006

Репутация: нет
Всего: нет

Доброго времени суток.
Помогите разобрать код. Только начал изучать JavaScript. Вот нашел пример игры, хочу ее переделать под пятнашки, по времени, с сохранением лучшего результата. Очень прошу, прокомментируйте код, а то я не пойму, как тут картинки переставляются и как это все реализуется. smile

Код


<HTML>
<HEAD>
<TITLE>puzzle</TITLE>
<script LANGUAGE="JavaScript">

cellImage = new Array(16);
cell = new Array(16);

for (i=0; i<16; i++) {
  cellImage[i] = new Image(81,81);
  cellImage[i].src = "s"+i+".jpg";
  cell[i] = 1;
}

cell[0] = 0;

TempImage = new Image(81,81);

function Release(who) {
  if (who == 0) document.img0.src = cellImage[0].src;
  if (who == 1) document.img1.src = cellImage[1].src;
  if (who == 2) document.img2.src = cellImage[2].src;
  if (who == 3) document.img3.src = cellImage[3].src;
  if (who == 4) document.img4.src = cellImage[4].src;
  if (who == 5) document.img5.src = cellImage[5].src;
  if (who == 6) document.img6.src = cellImage[6].src;
  if (who == 7) document.img7.src = cellImage[7].src;
  if (who == 8) document.img8.src = cellImage[8].src;
  if (who == 9) document.img9.src = cellImage[9].src;
  if (who == 10) document.img10.src = cellImage[10].src;
  if (who == 11) document.img11.src = cellImage[11].src;
  if (who == 12) document.img12.src = cellImage[12].src;
  if (who == 13) document.img13.src = cellImage[13].src;
  if (who == 14) document.img14.src = cellImage[14].src;
  if (who == 15) document.img15.src = cellImage[15].src;
}

function Pervert() {
  for (i=0; i<1000; i++) {
    k = Math.random()*16;
    Move(Math.round(k));
  }
}

function SwapImage(num1,num2) {
  TempImage.src = cellImage[num2].src;
  cellImage[num2].src = cellImage[num1].src;
  cellImage[num1].src = TempImage.src;
  Release(num1);
  Release(num2);
}

function Move(value) {
  if (cell[value] > 0) {
    if (value!=3 && value!=7 && value!=11 && value!=15 && cell[value+1]==0) {
      cell[value] = 0;
      cell[value+1] = 1;
      SwapImage(value,value+1);
    }
    if (value!=12 && value!=13 && value!=14 && value!=15 && cell[value+4]==0) {
      cell[value] = 0;
      cell[value+4] = 1;
      SwapImage(value,value+4);
    }
    if (value!=0 && value!=4 && value!=8 && value!=12 && cell[value-1]==0) {
      cell[value] = 0;
      cell[value-1] = 1;
      SwapImage(value,value-1);
    }
    if (value!=0 && value!=1 && value!=2 && value!=3 && cell[value-4]==0) {
      cell[value] = 0;
      cell[value-4] = 1;
      SwapImage(value,value-4);
    }
  }
}

key = new Image(88,31);
key.src="random2.gif";

function HandOut() {
  document.key0.src = "random.gif";
}

function HandOver() {
  document.key0.src = key.src;
}

</SCRIPT>
</HEAD>
<BODY BACKGROUND="grid.gif" BGCOLOR="#000000" BGPROPERTIES="fixed"
TEXT="#00bb00" LINK="#00cc00" ALINK="#00ff00" VLINK="#00aa00">
<TT>
<CENTER>
<FONT COLOR="#00ff00">puzzle</FONT><BR><BR>
<TABLE BORDER=0 CELLSPACING=0 CELLPADDING=0 ALIGN="center">
<TR>
  <TD><IMG SRC="s0.jpg" NAME="img0" onClick="Move(0)" WIDTH=81 HEIGHT=81></TD>
  <TD><IMG SRC="s1.jpg" NAME="img1" onClick="Move(1)" WIDTH=81 HEIGHT=81></TD>
  <TD><IMG SRC="s2.jpg" NAME="img2" onClick="Move(2)" WIDTH=81 HEIGHT=81></TD>
  <TD><IMG SRC="s3.jpg" NAME="img3" onClick="Move(3)" WIDTH=81 HEIGHT=81></TD>
</TR>
<TR>
  <TD><IMG SRC="s4.jpg" NAME="img4" onClick="Move(4)" WIDTH=81 HEIGHT=81></TD>
  <TD><IMG SRC="s5.jpg" NAME="img5" onClick="Move(5)" WIDTH=81 HEIGHT=81></TD>
  <TD><IMG SRC="s6.jpg" NAME="img6" onClick="Move(6)" WIDTH=81 HEIGHT=81></TD>
  <TD><IMG SRC="s7.jpg" NAME="img7" onClick="Move(7)" WIDTH=81 HEIGHT=81></TD>
</TR>
<TR>
  <TD><IMG SRC="s8.jpg" NAME="img8" onClick="Move(8)" WIDTH=81 HEIGHT=81></TD>
  <TD><IMG SRC="s9.jpg" NAME="img9" onClick="Move(9)" WIDTH=81 HEIGHT=81></TD>
  <TD><IMG SRC="s10.jpg" NAME="img10" onClick="Move(10)" WIDTH=81 HEIGHT=81></TD>
  <TD><IMG SRC="s11.jpg" NAME="img11" onClick="Move(11)" WIDTH=81 HEIGHT=81></TD>
</TR>
<TR>
  <TD><IMG SRC="s12.jpg" NAME="img12" onClick="Move(12)" WIDTH=81 HEIGHT=81></TD>
  <TD><IMG SRC="s13.jpg" NAME="img13" onClick="Move(13)" WIDTH=81 HEIGHT=81></TD>
  <TD><IMG SRC="s14.jpg" NAME="img14" onClick="Move(14)" WIDTH=81 HEIGHT=81></TD>
  <TD><IMG SRC="s15.jpg" NAME="img15" onClick="Move(15)" WIDTH=81 HEIGHT=81></TD>
</TR>
</TABLE>
<CENTER>
<BR><IMG SRC="random.gif" NAME="key0" onMouseOver="HandOver()"
onMouseOut="HandOut()" onClick="Pervert()" WIDTH=88 HEIGHT=31>
<BR><BR>(w) cadaber, Jul 1999.
</CENTER>
</TT>
</BODY>
</HTML>

Ghirik

Дата 29.6.2008, 06:55 (ссылка)

(голосов:1)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 919
Регистрация: 26.3.2007

Репутация: 5
Всего: 20

Код


<HEAD> // все названия тэгов следует переписать в нижнем регистре, ну... так говорят... :-)
<TITLE>puzzle</TITLE>
<script LANGUAGE="JavaScript">

cellImage = new Array(16);  // создаем массив
cell = new Array(16); // и ещё один

for (i=0; i<16; i++) { //цикл
  cellImage[i] = new Image(81,81); // блин, снова... создаем, но уже картинку с размерами, указанными в скобках(px).
  cellImage[i].src = "s"+i+".jpg"; // и таких... много   :-)
  cell[i] = 1;
}

cell[0] = 0;

TempImage = new Image(81,81); // какой то временный картинка опять... дальше, будет видно. Не следует привыкать к названиям переменных в JavaScript с большой буквы...

function Release(who) {
/*  for (var i = 0; i < 16; i++) {
    if (who == i) document.img0.src = cellImage[i].src;
  } я бы, всё что ниже, записал так, как выше, двумя срочками */
  if (who == 0) document.img0.src = cellImage[0].src;
  if (who == 1) document.img1.src = cellImage[1].src;
  if (who == 2) document.img2.src = cellImage[2].src;
  if (who == 3) document.img3.src = cellImage[3].src;
  if (who == 4) document.img4.src = cellImage[4].src;
  if (who == 5) document.img5.src = cellImage[5].src;
  if (who == 6) document.img6.src = cellImage[6].src;
  if (who == 7) document.img7.src = cellImage[7].src;
  if (who == 8) document.img8.src = cellImage[8].src;
  if (who == 9) document.img9.src = cellImage[9].src;
  if (who == 10) document.img10.src = cellImage[10].src;
  if (who == 11) document.img11.src = cellImage[11].src;
  if (who == 12) document.img12.src = cellImage[12].src;
  if (who == 13) document.img13.src = cellImage[13].src;
  if (who == 14) document.img14.src = cellImage[14].src;
  if (who == 15) document.img15.src = cellImage[15].src;
}

function Pervert() {
  for (i=0; i<1000; i++) {
    k = Math.random()*16; // Метод Math.random отдает случайное число от 0 до 1.0;
    Move(Math.round(k)); // кто такой Move - я не знаю... наверное есть такой Объект, но я пока не видел..., а Math.round - округляет до ближайшего целого
  }
}

function SwapImage(num1,num2) {
  TempImage.src = cellImage[num2].src; // из src в src, я не знаю, как коментировать...
  cellImage[num2].src = cellImage[num1].src;
  cellImage[num1].src = TempImage.src;
  Release(num1); // вызываются одноименные функции
  Release(num2);
}

function Move(value) { // Вот, нашелся Move.. Оказывается, там выше был вызов этой функции.
  if (cell[value] > 0) { // происходит сравнение с тем, что округлили там сверху и передали сюда. value.
    if (value!=3 && value!=7 && value!=11 && value!=15 && cell[value+1]==0) { // сочиняют же люди.... Как это камментировать, и так всё видно.
      cell[value] = 0; // 0 :-(
      cell[value+1] = 1; // 1 :-(
      SwapImage(value,value+1);
    }
    if (value!=12 && value!=13 && value!=14 && value!=15 && cell[value+4]==0) {
      cell[value] = 0;
      cell[value+4] = 1;
      SwapImage(value,value+4);
    }
    if (value!=0 && value!=4 && value!=8 && value!=12 && cell[value-1]==0) {
      cell[value] = 0;
      cell[value-1] = 1;
      SwapImage(value,value-1);
    }
    if (value!=0 && value!=1 && value!=2 && value!=3 && cell[value-4]==0) {
      cell[value] = 0;
      cell[value-4] = 1;
      SwapImage(value,value-4);
    }
  } // Ну вот, по этой, мне не понятной закономерности все предыдущие сравнения приводят к тому, что перебираются все изображения по очереди. Плохой код, зачем было городить этот огород, можно было практически всё выполнить в начальном цикле, а здесь просто раздавать. Ну, может есть какая то тайна, которую я не смог догнать.
}

key = new Image(88,31); // странное поведение программиста, почти, как моё. :-) Это видимо изображение всей американской ПРО. Теперь будем знать куда их следует шарахнуть... если чего... - random.gif и random2.gif... Победа будет за нами!
key.src="random2.gif";

function HandOut() {
  document.key0.src = "random.gif";
}

function HandOver() {
  document.key0.src = key.src;
}

</SCRIPT> // так сейчас не рисуют, - только в нижнем регистре. И HTML не комментируется, эту строчку следует удалить.
</HEAD>
<BODY BACKGROUND="grid.gif" BGCOLOR="#000000" BGPROPERTIES="fixed"
TEXT="#00bb00" LINK="#00cc00" ALINK="#00ff00" VLINK="#00aa00">
<TT>
<CENTER>
<FONT COLOR="#00ff00">puzzle</FONT><BR><BR>
<TABLE BORDER=0 CELLSPACING=0 CELLPADDING=0 ALIGN="center">
<TR>
  <TD><IMG SRC="s0.jpg" NAME="img0" onClick="Move(0)" WIDTH=81 HEIGHT=81></TD>
  <TD><IMG SRC="s1.jpg" NAME="img1" onClick="Move(1)" WIDTH=81 HEIGHT=81></TD>
  <TD><IMG SRC="s2.jpg" NAME="img2" onClick="Move(2)" WIDTH=81 HEIGHT=81></TD>
  <TD><IMG SRC="s3.jpg" NAME="img3" onClick="Move(3)" WIDTH=81 HEIGHT=81></TD>
</TR>
<TR>
  <TD><IMG SRC="s4.jpg" NAME="img4" onClick="Move(4)" WIDTH=81 HEIGHT=81></TD>
  <TD><IMG SRC="s5.jpg" NAME="img5" onClick="Move(5)" WIDTH=81 HEIGHT=81></TD>
  <TD><IMG SRC="s6.jpg" NAME="img6" onClick="Move(6)" WIDTH=81 HEIGHT=81></TD>
  <TD><IMG SRC="s7.jpg" NAME="img7" onClick="Move(7)" WIDTH=81 HEIGHT=81></TD>
</TR>
<TR>
  <TD><IMG SRC="s8.jpg" NAME="img8" onClick="Move(8)" WIDTH=81 HEIGHT=81></TD>
  <TD><IMG SRC="s9.jpg" NAME="img9" onClick="Move(9)" WIDTH=81 HEIGHT=81></TD>
  <TD><IMG SRC="s10.jpg" NAME="img10" onClick="Move(10)" WIDTH=81 HEIGHT=81></TD>
  <TD><IMG SRC="s11.jpg" NAME="img11" onClick="Move(11)" WIDTH=81 HEIGHT=81></TD>
</TR>
<TR>
  <TD><IMG SRC="s12.jpg" NAME="img12" onClick="Move(12)" WIDTH=81 HEIGHT=81></TD>
  <TD><IMG SRC="s13.jpg" NAME="img13" onClick="Move(13)" WIDTH=81 HEIGHT=81></TD>
  <TD><IMG SRC="s14.jpg" NAME="img14" onClick="Move(14)" WIDTH=81 HEIGHT=81></TD>
  <TD><IMG SRC="s15.jpg" NAME="img15" onClick="Move(15)" WIDTH=81 HEIGHT=81></TD>
</TR>
</TABLE>
<CENTER>
<BR><IMG SRC="random.gif" NAME="key0" onMouseOver="HandOver()"
onMouseOut="HandOut()" onClick="Pervert()" WIDTH=88 HEIGHT=31>
<BR><BR>(w) cadaber, Jul 1999.
</CENTER>
</TT>
</BODY>
</HTML>

Добавлено через 4 минуты и 35 секунд
Особенно, не следуеть писать так - onClick, я уже говорил про регистр, нужно так onclick

--------------------

Отдадим всё клиенту, пускай его машина мучается...

Joker07

Дата 29.6.2008, 15:12 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 40
Регистрация: 17.6.2006

Репутация: нет
Всего: нет

Спасибо большое!!! smile

Сам алгоритм перестановки картинок конечно трудно понять, но все равно. А вы бы как сделали? smile

Мне просто интересно smile

Кстати если написать вместо старого вот это

Код


function Release(who) {
for (var i = 0; i < 16; i++) {
    if (who == i) document.img0.src = cellImage[i].src;

то будет неправильно работать, ведь функция Release вызывается каждый раз при перестановке картинок, а не один раз в начале игры.

Вот сделал время:

Код


function initStopwatch() {
    var myTime = new Date();
    var timeNow = myTime.getTime();
    var timeDiff = timeNow - clockStart;
    this.diffSecs = timeDiff/1000;
    return(this.diffSecs); }

function getSecs() {
    var mySecs = initStopwatch();
    var mySecs1 = ""+mySecs;
    mySecs1= mySecs1.substring(0,mySecs1.indexOf(".")) + " secs.";
    document.forms[0].timespent.value = mySecs1
    window.setTimeout('getSecs()',1000); }

А в функцию pervert добавил

Код


function Pervert() {
startday = new Date();
clockStart = startday.getTime();
window.setTimeout('getSecs()',1);

А как сделать, чтоб когда картинка собиралась, записывалось время, имя игрока в какую-ниюудь табличку лучших результатов?

Это сообщение отредактировал(а) Joker07 - 29.6.2008, 21:35

0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| JavaScript: для новичков \| Следующая тема »