Как использовать функцию для переключения изображения на другое изображение (с использованием случайного) - PullRequest
Новая
       16

Как использовать функцию для переключения изображения на другое изображение (с использованием случайного)

0 голосов
/ 08 мая 2019

Итак, я начинающий программист, создающий игру, в которой случайные камни расположены по всему контейнеру.При нажатии на эти Камни, случайный Камень, который я сделал, появляется, пока Камень исчезает.Я сделал несколько функций, относящихся к драгоценным камням и камням, но пока что использую только changePosition () в HTML, чтобы рандомизировать камни.У меня возникают проблемы с логикой получения функции рандомизации (changePosition ()) для

  1. рандомизации камней (что я делал до сих пор)

  2. отслеживать эту функцию и ее скалы (rock1, rock2, rock3, rock4 ..) и прикреплять случайное изображение драгоценного камня (gem1, gem2, gem3, gem4 ...) к каждому камню, которое будет отображаться позже при нажатии на

  3. и используйте щелчок (функцию?), Чтобы камень исчез и отобразил драгоценный камень.

... при выполнении этой функции в одной функцииэто даже возможно ...

Веб-сайт, на котором я загружаю свою игру, покажет вам, что я рандомизировал камни (и один камень для теста), и эти камни и один камень перемещаются случайным образом при нажатии.

Итак, чтобы упростить мой длинный вопрос: Как сделать, чтобы щелкнуть камень, чтобы показать драгоценный камень?

-> Это сайт, на котором вы можете увидеть, что я сделал до сих пор:

https://artportfolio.bgsu.edu/~ltthoma/project%203/scene2.html (иногда лучше всего работает в других браузерах, кроме Chrome)

JavaScript: 

function changePosition(elem, theMinX, theMaxX, theMinY, theMaxY) {
    document.getElementById(elem).style.top= chooseNum(theMinY, theMaxY) + "px";
    document.getElementById(elem).style.left= chooseNum(theMinX, theMaxY) + "px";   
}

var gemPics = new Array("rock1.png", "rock2.png", "rock3.png", "rock4.png", "rock5.png", "rock6.png", "rock7.png" );

        function chooseGem() {
        var randomNum = Math.floor( Math.random() * gemPics.length); 
        document.getElementById('myPicture').src = gemPics[randomNum];
        }



    var gemPics2 = new Array ("gem1.png", "gem2.png", "gem3.png", "gem4.png", "gem5.png", "gem6.png", "gem7.png");

        function insertGem() {
            var randomNum = math.floor( Math.random() * gemPics2.length);
            document.getElementById('myPicture').src = gemPics2[randomNum];
        }

HTML 

<body onload = "chooseGem();"> //not sure if this even works


    <div id="container">
        <div class="cursor"></div>

        <div class="scene2">


        <div id="gem1" onClick="changePosition ('gem1', 1080, 700, 300, 0)"></div>
        <div id="rock2" onClick="changePosition('rock2', 1080, 720, 400,0);"></div>

        <div id="rock3" onClick="changePosition('rock3', 1080, 720, 400,0);"></div>

        <div id="rock1" onClick="changePosition('rock1', 1080, 720, 400,0);"></div>

        <div id="rock4" onClick="changePosition('rock4', 1080, 720, 400,0);"></div>

        </div>

    </div>
</body>

Здесьэто просто CSS, чтобы показать вам, как он настроен ... 

#rock3{
    background-image:url("rock3.png");
    width:60px;
    height:60px;
    top:380px;
    left:700px;
    position:absolute;
    cursor:url("pickaxe.png"), auto;    
}
#rock4{
    background-image:url("rock4.png");
    width:60px;
    height:60px;
    top:380px;
    left:700px;
    position:absolute;
    cursor:url("pickaxe.png"), auto;
}
#gem1{
    background-image:url("gem1.png");
    width:80px;
    height:80px;
    top:280px;
    left:300px;
    position:absolute;
    cursor:url("pickaxe.png"), auto;
}

Иногда я путаюсь с настройкой и делаю ненужные функции / события, которые мне не нужны, или я делаю что-то неэффективное,Если вы видите, где я иду не так или что я должен делать дальше, я был бы очень признателен!Если у вас есть еще вопросы, просто напишите мне, спасибо!

...