匹配图片 javascript 基本益智游戏

Question

我正在制作一个简单的 JavaScript 游戏，我是一个初学者，但现在我陷入了困境。我必须创建 5 个数组来存储 src 图像。这是我的代码：

var imagesPart1 = [

  "funny-cat1_part1x1.jpg",

  "monkey_part1x1.jpg",

  "panda_swap_part1x1.jpg"

];

var imagesPart2 = [

  "funny-cat1_part2x1.jpg",

  "monkey_part2x1.jpg",

  "panda_swap_part2x1.jpg"

];

var imagesPart3 = [

  "funny-cat1_part3x1.jpg",

  "monkey_part3x1.jpg",

  "panda_swap_part3x1.jpg"

];

var imagesPart4 = [

  "funny-cat1_part4x1.jpg",

  "monkey_part4x1.jpg",

  "panda_swap_part4x1.jpg"

];

var imagesPart5 = [

  "funny-cat1_part5x1.jpg",

  "monkey_part5x1.jpg",

  "panda_swap_part5x1.jpg"

];

function imageSwitch(id, arr) {

  var element = document.getElementById(id);

  var counter = Math.floor((Math.random() * 5));

  function nextPic() {

    counter += 1;

    if (counter > arr.length - 1) {

      counter = 0;

    }

    element.src = "./img/" + arr[counter];

  }

  element.addEventListener('click', nextPic);

  counter -= 1;

  nextPic();

}

imageSwitch("one", imagesPart1);

imageSwitch("two", imagesPart2);

imageSwitch("three", imagesPart3);

imageSwitch("four", imagesPart4);

imageSwitch("five", imagesPart5);

div {

  width: 800px;

  height: 100%;

}

img {

  width: 100%;

  height: 160px;

  max-width: 100%;

}

<div>

  <div>

    <img id="one" src="./img/funny-cat1_part1x1.jpg" alt="">

    <img id="two" src="./img/funny-cat1_part2x1.jpg" alt="">

    <img id="three" src="./img/funny-cat1_part3x1.jpg" alt="">

    <img id="four" src="./img/funny-cat1_part4x1.jpg" alt="">

    <img id="five" src="./img/funny-cat1_part5x1.jpg" alt="">

  </div>

</div>

现在我想要如果 5 个部分组成一个完整的图像，它会发出警报或给出这样的框阴影，但我不知道如何获得理想的效果。

这是一个工作小提琴。

提前致谢！

Answer 1

您需要稍微重构一下代码：// switch this to a 2d arrayconst imageParts = [&nbsp; &nbsp; [&nbsp; &nbsp; &nbsp; &nbsp; "https://i.ibb.co/4FrYJR3/funny-cat1-part1x1.jpg",&nbsp; &nbsp; &nbsp; &nbsp; "https://i.ibb.co/D9TLmt1/monkey-part1x1.jpg",&nbsp; &nbsp; &nbsp; &nbsp; "https://i.ibb.co/V2BXPVH/panda-swap-part1x1.jpg",&nbsp; &nbsp; ],&nbsp; &nbsp; [&nbsp; &nbsp; &nbsp; &nbsp; "https://i.ibb.co/CQyGWQq/funny-cat1-part2x1.jpg",&nbsp; &nbsp; &nbsp; &nbsp; "https://i.ibb.co/BgT0mNN/monkey-part2x1.jpg",&nbsp; &nbsp; &nbsp; &nbsp; "https://i.ibb.co/P6CGThy/panda-swap-part2x1.jpg",&nbsp; &nbsp; ],&nbsp; &nbsp; [&nbsp; &nbsp; &nbsp; &nbsp; "https://i.ibb.co/k07vFCb/funny-cat1-part3x1.jpg",&nbsp; &nbsp; &nbsp; &nbsp; "https://i.ibb.co/dbx5zcc/monkey-part3x1.jpg",&nbsp; &nbsp; &nbsp; &nbsp; "https://i.ibb.co/FK3h9Zd/panda-swap-part3x1.jpg",&nbsp; &nbsp; ],&nbsp; &nbsp; [&nbsp; &nbsp; &nbsp; &nbsp; "https://i.ibb.co/Vm5ZJ0g/funny-cat1-part4x1.jpg",&nbsp; &nbsp; &nbsp; &nbsp; "https://i.ibb.co/10hDp8c/monkey-part4x1.jpg",&nbsp; &nbsp; &nbsp; &nbsp; "https://i.ibb.co/HXWrzjs/panda-swap-part4x1.jpg",&nbsp; &nbsp; ],&nbsp; &nbsp; [&nbsp; &nbsp; &nbsp; &nbsp; "https://i.ibb.co/x8zQPWW/funny-cat1-part5x1.jpg",&nbsp; &nbsp; &nbsp; &nbsp; "https://i.ibb.co/2KKwwzG/monkey-part5x1.jpg",&nbsp; &nbsp; &nbsp; &nbsp; "https://i.ibb.co/N9vgw6y/panda-swap-part5x1.jpg",&nbsp; &nbsp; ],];// store ids in an arrayconst ids = ["one", "two", "three", "four", "five"];// store counters in an arrayconst counters = new Array(ids.length).fill(0);// helper function to check if every element in an array is equalfunction checkAllSame(arr) {&nbsp; if (arr.length <= 1) {&nbsp; &nbsp; return true;&nbsp; }&nbsp; const first = arr[0];&nbsp; for (let i = 1; i < arr.length; i ++) {&nbsp; &nbsp; if (arr[i] !== first) {&nbsp; &nbsp; &nbsp; return false;&nbsp; &nbsp; }&nbsp; }&nbsp; return true;}&nbsp;// loop through the element idsfor (let i = 0; i < ids.length; i ++) {&nbsp; // get the current element&nbsp; const ele = document.getElementById(ids[i]);&nbsp; // get the current image parts&nbsp; const parts = imageParts[i];&nbsp; // initialize the counter to a random value&nbsp; let counter = Math.floor(Math.random() * parts.length);&nbsp; // update the counters array&nbsp; counters[i] = counter;&nbsp; // update the element&nbsp; ele.src = parts[counter];&nbsp; ele.addEventListener("click", function() {&nbsp; &nbsp; // on click increment the counter and use % to wrap around&nbsp; &nbsp; counter = (counter + 1) % parts.length;&nbsp; &nbsp; // update the element&nbsp; &nbsp; ele.src = parts[counter];&nbsp; &nbsp; // update the counters array&nbsp; &nbsp; counters[i] = counter;&nbsp; &nbsp; // if all the counters are the same, then it's a match&nbsp; &nbsp; if (checkAllSame(counters)) {&nbsp; &nbsp; &nbsp; // or whatever else you want to do&nbsp; &nbsp; &nbsp; // setTimeout of 0 lets the image load before the alert pops up&nbsp; &nbsp; &nbsp; setTimeout(function() {alert("you did it!")}, 0);&nbsp; &nbsp; }&nbsp; });}工作小提琴。

Answer 2

我会创建一个新函数setImage(arr, counter)，其中包含您的 line&nbsp;element.src = "./img/" + arr[counter];，但也执行其他操作：它应该将索引存储在一个全局变量中，该变量包含所有图像的索引。它应该检查这些是否都相同它应该根据检查执行您想要看到的任何视觉反馈。您有一个障碍，那就是您传递给的数组imageSwitch没有任何类型的标识符...您可能希望将所有 imagePart 放入一个数组中（啊，我看到另一个答案也表明了这一点）并传递一个指数。或者可能是一个以你的 id 为键的对象，例如：{ &nbsp;&nbsp;one:&nbsp;[...], &nbsp;&nbsp;two:&nbsp;[...], &nbsp;&nbsp;... }