Fatal编程技术网

使用Javascript/Dom交换图像

javascript dom

使用Javascript/Dom交换图像,javascript,dom,Javascript,Dom,这是今晚我的第二个Javascript/Dom查询，但这确实是一个完全不同的查询，因此可能需要一个新的主题。我的最终目标是创建一个4 x 4网格的滑动益智游戏。在另一个线程的帮助下，我得到了脚本，以4 x 4的网格随机顺序显示图像，并使用一个随机按钮再次随机显示图像。图像名称为image00、01、02、03、10、11等，其中33-33是我的空白图像 现在我想添加命令，如果这个图像被点击，它在空白的瓦片旁边（图像33），然后与空白图像交换。唯一的问题是，我不知道从哪里开始。我的代码如下。从我所

这是今晚我的第二个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>


洗牌

您应该选择jQuery。这将使许多事情变得更容易。
这是我无法使用库的项目的一部分-我真的希望能得到一些帮助，因为这是一个主要的绊脚石！这对我来说不起作用，但是mybe你得到了一些提示：看起来有点太复杂了-我正在尝试学习这个，所以我需要的是尽可能简单。也许你应该继续使用交换图像功能？类似于image onlick='swap（）'或image.onclick=function（）{swapMe（）}；