阵列中随机图像的问题

Question

var eieren = 0;
var eieren = Math.floor((Math.random() * 4) + 1);

var imgArray = [ 'img/ei1.png' , 'img/ei2.png' , 'img/ei3.png', 'img/ei4.png' ];


    imgArray.length;

    var eiImg = imgArray[eieren - 1];

    console.log( eiImg );

    document.getElementsByTagName( 'img' )[0].src = eiImg;
    document.getElementsByTagName( 'img' )[0].addEventListener( "click", changeImage );
    var counter = eieren - 1;

    function changeImage()
    {
        //Load new image if this is not the last image
        if ( counter < imgArray.length - 1 )
        {
            document.getElementsByTagName( 'img' )[0].src = imgArray[ ++counter % imgArray.length];
        }
    };

<html lang="en">
<head>
<!--    <link rel="stylesheet" type="text/css" href="css/style.css">-->
    <meta charset="UTF-8">
    <title>Document</title>

</head>
<body>

    <img src="img/questionmark.png" id= "first" alt="questionmark" width="200" height= "300" onClick ="changeImage()">

    <script type="text/javascript" src="js/eigame.js"></script>
</body>
</html>

我是这个网站的新手，我正在为我的一个项目而苦苦挣扎。让我解释一下我想做什么。

我有一个包含 4 张图像的数组。每次页面刷新时，都会出现一个随机图像（因此是数组中的一个随机图像）。我正在制作一个非常简单的游戏，您必须单击带有 1 条裂纹、2 条裂纹、3 条裂纹和一只小鸡从鸡蛋中出来的鸡蛋图像。游戏的目标是将所有小鸡从鸡蛋中取出。所以页面被刷新，例如，带有 2 个裂缝的鸡蛋的图像出现了。这意味着您必须单击 2 次（数组：img1（鸡蛋有 1 个裂缝）、img2（鸡蛋有 2 个裂缝）、img3（鸡蛋有 3 个裂缝）、img4（小鸡从鸡蛋中出来的图像）以显示图像小鸡从鸡蛋里出来。在游戏结束时（我还得做一个计时器）所有的图片都必须是小鸡从鸡蛋里出来。所以我想用一个 For 循环，它会检查如果所有图像都是 img4，则游戏结束。

有点用了，但是有个问题。当我刷新页面时，会出现一个随机图像。例如 img2。我必须点击 2 次才能找到小鸡。但就我而言，当我单击时，它首先更改为数组的第一张图像 img1。然后当您再次单击它时，它将从 img1 变为 2 到 3 到 4，如果您再次单击它又变为 1。

我想要的是，如果页面显示 img2，并且您单击该图像，它将转到数组中的下一个图像。不是先去img1再去下一张图片。

修复后，我希望 clickfunction 停在数组中的最后一个图像处。因此，如果显示数组中的最后一张图像，即小鸡从鸡蛋中出来，您将无法再单击。现在，当您单击小鸡图片时，它会返回到数组中的第一张图片。

这是我到目前为止的代码（我对 javascript 很陌生，很抱歉提出了很多问题）我希望有人能帮助我解决这个问题，我已经被困了好几天了。 .

var eieren = 0;
var eieren = Math.floor((Math.random() * 4) + 1);

var imgArray = [ 'img/ei1.png' , 'img/ei2.png' , 'img/ei3.png', 'img/ei4.png' ];

imgArray.length;

var eiImg = imgArray[eieren - 1];

console.log(eiImg);

document.getElementsByTagName('img')[0].src = eiImg;

  var counter=[0];

  function changeImage(){
    //Change image and increment counter
    document.getElementById("first", "second").src=imgArray[counter++ % imgArray.length];
  }

这是我的 HTML:

 <img src="img/questionmark.png" id= "first" alt="questionmark" width="200" height= "300" onClick ="changeImage()">

我制作了一个 Fiddle 但它无法正常工作。天哪，我可能做错了什么。对不起！.. https://jsfiddle.net/mtjsd0bL/

Answer 1

我认为您的问题出在更改图像中的 counter++。尝试将其设置为 eiImg 而不是 [0] 像这样：

var eieren = 0;
var eieren = Math.floor((Math.random() * 4) + 1);

var imgArray = [ 'img/ei1.png' , 'img/ei2.png' , 'img/ei3.png', 'img/ei4.png' ];


    imgArray.length;

    var eiImg = imgArray[eieren - 1];

    console.log( eiImg );

    document.getElementsByTagName( 'img' )[0].src = eiImg;
    document.getElementsByTagName( 'img' )[0].addEventListener( "click", changeImage );
    var counter = eieren - 1;

    function changeImage()
    {
        //Load new image if this is not the last image
        if ( counter < imgArray.length - 1 )
        {
            document.getElementsByTagName( 'img' )[0].src = imgArray[ ++counter % imgArray.length];
        }
    }

查看我更新的答案。

阵列中随机图像的问题

Problems with random images in array

javascript

arrays

random

image