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()">

我做了一个小提琴，但它没有做到。天哪，我可能做错了什么。对不起！.. https://jsfiddle.net/mtjsd0bL/

Answer 1

我认为你的问题在于改变图像中的反++。尝试将其设置为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];
        }
    }

检查我更新的答案。

数组中随机图像的问题

1 个答案: