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个部分组成完整的图像，它会发出警报或像这样的盒子阴影，但是我不知道如何获得理想的效果。 complete image 这是工作中的fiddle。

谢谢！

Answer 1

您需要稍微重组代码：

// switch this to a 2d array
const imageParts = [
    [
        "https://i.ibb.co/4FrYJR3/funny-cat1-part1x1.jpg",
        "https://i.ibb.co/D9TLmt1/monkey-part1x1.jpg",
        "https://i.ibb.co/V2BXPVH/panda-swap-part1x1.jpg",
    ],
    [
        "https://i.ibb.co/CQyGWQq/funny-cat1-part2x1.jpg",
        "https://i.ibb.co/BgT0mNN/monkey-part2x1.jpg",
        "https://i.ibb.co/P6CGThy/panda-swap-part2x1.jpg",
    ],
    [
        "https://i.ibb.co/k07vFCb/funny-cat1-part3x1.jpg",
        "https://i.ibb.co/dbx5zcc/monkey-part3x1.jpg",
        "https://i.ibb.co/FK3h9Zd/panda-swap-part3x1.jpg",
    ],
    [
        "https://i.ibb.co/Vm5ZJ0g/funny-cat1-part4x1.jpg",
        "https://i.ibb.co/10hDp8c/monkey-part4x1.jpg",
        "https://i.ibb.co/HXWrzjs/panda-swap-part4x1.jpg",
    ],
    [
        "https://i.ibb.co/x8zQPWW/funny-cat1-part5x1.jpg",
        "https://i.ibb.co/2KKwwzG/monkey-part5x1.jpg",
        "https://i.ibb.co/N9vgw6y/panda-swap-part5x1.jpg",
    ],
];

// store ids in an array
const ids = ["one", "two", "three", "four", "five"];

// store counters in an array
const counters = new Array(ids.length).fill(0);

// helper function to check if every element in an array is equal
function checkAllSame(arr) {
  if (arr.length <= 1) {
    return true;
  }
  const first = arr[0];
  for (let i = 1; i < arr.length; i ++) {
    if (arr[i] !== first) {
      return false;
    }
  }
  return true;
} 

// loop through the element ids
for (let i = 0; i < ids.length; i ++) {
  // get the current element
  const ele = document.getElementById(ids[i]);
  // get the current image parts
  const parts = imageParts[i];
  // initialize the counter to a random value
  let counter = Math.floor(Math.random() * parts.length);
  // update the counters array
  counters[i] = counter;
  // update the element
  ele.src = parts[counter];
  ele.addEventListener("click", function() {
    // on click increment the counter and use % to wrap around
    counter = (counter + 1) % parts.length;
    // update the element
    ele.src = parts[counter];
    // update the counters array
    counters[i] = counter;
    // if all the counters are the same, then it's a match
    if (checkAllSame(counters)) {
      // or whatever else you want to do
      // setTimeout of 0 lets the image load before the alert pops up
      setTimeout(function() {alert("you did it!")}, 0);
    }
  });
}

Working fiddle。

Answer 2

我将创建一个新函数<label>，其中包括您的行setImage(arr, counter)，但还会执行其他操作：

它应该将索引存储在一个全局变量中，该变量包含所有图像的索引。
它应该检查一下是否全部相同
它应根据检查结果执行您希望看到的任何视觉反馈。

您有一个障碍，就是传递给element.src = "./img/" + arr[counter];的数组没有任何类型的标识符...您可能希望将所有imagePart放入数组中（啊，我看到了另一个答案也建议这样做）并传递一个索引。或者是一个键是您的ID的对象，例如：

imageSwitch

配图javascript基本益智游戏

2 个答案: