Javascript 使用JQuery从我的游戏目录中随机获取8张图片

我用

JS

和

PHP

从一组图像开发了一个记忆游戏，一切都很好。现在我想扩展这项工作，并从游戏目录中获取图像

JS代码：

for (i = 0; i < buttons.length; i++) {
    buttons[i].addEventListener('click', function (e) {
        var turnable = e.target.dataset.turnable;

        //first click
        if (!wait && lastKnownButtonId == undefined && lastKnownButtonNumber == undefined && turnable == 'true') {
            e.target.dataset.turnable = 'false';

            e.target.innerHTML = getgImage(event.target.dataset.number);
            e.target.style.backgroundColor = 'yellow';

            lastKnownButtonId = e.target.id;
            lastKnownButtonNumber = e.target.dataset.number;

        }
        //second click
        else if (!wait && lastKnownButtonId != undefined && lastKnownButtonNumber != undefined && turnable == 'true' && e.target.id != lastKnownButtonId) {
            e.target.dataset.turnable = 'false';

            e.target.innerHTML = getgImage(event.target.dataset.number);

            //match
            if (e.target.dataset.number == lastKnownButtonNumber) {
                e.target.style.backgroundColor = '#00FF7F';
                document.getElementById(lastKnownButtonId).style.backgroundColor = '#00FF7F';

                lastKnownButtonId = undefined;
                lastKnownButtonNumber = undefined;

                matches++;

                if (matches == 8) {
                    showWinScreen();
                    //clearTimeout(timeoutHandle);
                    document.getElementById("finalMove").innerHTML = moves;
                }
            }
            //no match
            else {
                document.getElementById(lastKnownButtonId).style.backgroundColor = 'red';
                e.target.style.backgroundColor = 'red';
                wait = true;

                setTimeout(() => {
                    e.target.dataset.turnable = 'true';
                    e.target.style.backgroundColor = 'white'
                    e.target.innerHTML = getgImage(0);

                    var tempLastClickedButton = document.getElementById(lastKnownButtonId);

                    tempLastClickedButton.dataset.turnable = 'true';
                    tempLastClickedButton.style.backgroundColor = 'white';
                    tempLastClickedButton.innerHTML = getgImage(0);

                    lastKnownButtonId = undefined;
                    lastKnownButtonNumber = undefined;
                    wait = false;
                }, 1000);
            }
            moveCounter();
        }
    });
}

function getgImage(number) {
    switch (number) {
        case '1':
            return '<img src="resources/fashion1.jpg">';
        case '2':
            return '<img src="resources/fashion2.jpg">';
        case '3':
            return '<img src="resources/fashion3.jpg">';
        case '4':
            return '<img src="resources/fashion4.jpg">';
        case '5':
            return '<img src="resources/fashion5.jpg">';
        case '6':
            return '<img src="resources/fashion6.jpg">';
        case '7':
            return '<img src="resources/fashion7.jpg">';
        case '8':
            return '<img src="resources/fashion8.jpg">';
        default:
            return '<img src="resources/logo.png">';
     }
 }

for（i=0；i{
e、 target.dataset.turnable='true'；
e、 target.style.backgroundColor='white'
e、 target.innerHTML=getgImage（0）；
var tempLastClickedButton=document.getElementById（lastKnownButtonId）；
tempLastClickedButton.dataset.turnable='true'；
tempLastClickedButton.style.backgroundColor='white'；
tempLastClickedButton.innerHTML=getgImage（0）；
lastKnownButtonId=未定义；
lastKnownButtonNumber=未定义；
等待=错误；
}, 1000);
}
移动计数器（）；
}
});
}
函数getgImage（编号）{
开关（编号）{
案例“1”：
返回“”；
案例“2”：
返回“”；
案例“3”：
返回“”；
案例“4”：
返回“”；
案例“5”：
返回“”；
案例“6”：
返回“”；
案例“7”：
返回“”；
案例“8”：
返回“”；
违约：
返回“”；
}
}

因此，在上面的代码中，我在switch case中使用了一组图像。现在我想使用名为“resources”的目录中的随机8幅图像。是否可以使用

Jquery

从目录中随机获取8个图像？我不知道如何继续

这应该可以帮助您：

arrayOfImages[Math.floor(Math.random()*arrayOfImages.length)];

这将有助于您：

arrayOfImages[Math.floor(Math.random()*arrayOfImages.length)];

---

那么，它们的名称是否像

fashion1

，

fashion2

<代码>时尚8如果是这样，您可以这样做：

'<img src="resources/fashion' + (Math.floor(Math.random() * 8) + 1) + '.jpg">'

“”

---

这会给你一个随机的图像。但是，如果不是这样，除非客户端代码预先知道注释中的所有名称，否则这是不可能的。那么，它们的名称是否像

fashion1

，

fashion2

<代码>时尚8如果是这样，您可以这样做：

'<img src="resources/fashion' + (Math.floor(Math.random() * 8) + 1) + '.jpg">'

“”

---

这会给你一个随机的图像。但如果不是这样，除非客户端代码预先知道所有的名称（如注释中的名称）

jQuery无法做到这一点，因为没有后端的帮助，浏览器无法做到这一点。您需要一个返回随机图像集或完整图像/文件列表的终结点。“是否可以使用Jquery从目录中随机获取8个图像？”-前提是您事先知道它们的名称（即使用固定方案以便动态“创建”它们）；客户端JavaScript本身无法读取任何服务器端目录的内容。如果您事先不知道名称，则需要从读取目录内容的PHP脚本开始，并将数据传递到客户端脚本。jQuery无法做到这一点，因为没有后端的帮助，浏览器无法做到这一点。您需要一个返回随机图像集或完整图像/文件列表的终结点。“是否可以使用Jquery从目录中随机获取8个图像？”-前提是您事先知道它们的名称（即使用固定方案以便动态“创建”它们）；客户端JavaScript本身无法读取任何服务器端目录的内容。如果您事先不知道名称，那么需要从读取目录内容的PHP脚本开始，并将数据传递到客户端脚本。