Question

这是我今晚的第二个Javascript / Dom查询，但这是一个非常不同的查询，因此可能值得一个新话题。我的最终目标是创建一个4 x 4网格的滑动益智游戏。在另一个线程的帮助下，我得到了脚本以随机顺序以4 x 4网格显示图像，并使用随机按钮再次随机化图像。图像是名称image00,01,02,03,10,11等，最多33-33是我的空白图像。

现在我想添加一些命令，说明是否单击了此图像并且它位于空白图块（图像33）旁边，然后与空白图像交换。唯一的问题是，我不知道从哪里开始。到目前为止，我的代码如下。从我所看到的将是使用图像ID的方式，但我是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>

Answer 1

你应该去jQuery。这将使许多事情变得更容易。

使用Javascript / Dom交换图像

1 个答案: