это мой второй запрос Javascript / Dom сегодня вечером, но на самом деле это совсем другой запрос, и поэтому, вероятно, заслуживает новой темы. Моя конечная цель - создать скользящую головоломку с сеткой 4х4. С некоторой помощью в другом потоке я получил скрипт для показа изображений в сетке 4х4 в произвольном порядке с кнопкой случайного воспроизведения, которая снова случайным образом отображает изображения. Изображения имеют название image00, 01, 02, 03, 10, 11 и т. Д. До 33 - 33 - это мое пустое изображение.
Теперь я хочу добавить команды, которые говорят, что если на это изображение щелкнули мышью, и оно находится рядом с пустой плиткой (изображение 33), то поменяйте местами с пустым изображением. Единственная проблема в том, что я понятия не имею, с чего начать. Мой код пока ниже. Из того, что я видел, было бы что-то вроде использования идентификаторов изображений, но я очень плохо знаком с javascript и не смог найти ничего, что помогло мне до сих пор. Любая помощь очень ценится.
<html>
<head>
<title>Shuffle</title>
</head>
<body>
<script language="JavaScript">
<!--
var Pics = [];
var Top = 16;
Pics = new Array();
for(i = 0; i < Top; i++) {
document.write("<img>");
if ((i+1)%4 == 0) {
document.write("<br>");
}
}
function ShuffleArray(a) {
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;
}
}
function ViewerObj(Image, Pics, i) {
this.Image = Image;
this.Image.style.left = 800;
this.Pics = Pics;
this.Image.id = "ID" + i;
}
function Randomise() {
var i;
ShuffleArray(Pics);
for(i = 0; i < Top; i++) {
Viewers[i].Image.src = Pics[i];
Viewers[i].Image.style.left = 200;
}
}
Viewers = new Array();
var i;
for(var i = 0; i < 4; i++) {
for(var j = 0; j < 4; j++) {
Pics[j + 4*i] = "images/Tree" + (i) + (j) + ".jpg";
}
}
for(i = 0; i < Top; i++) {
document.images[i].src = Pics[i];
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>