Noobie在這里，如果您覺得這個問題很愚蠢，請道歉，我創(chuàng)建了一個帶有 8 個默認圖像的記憶游戲?，F(xiàn)在我想訪問圖像目錄以獲取游戲的隨機圖像。游戲的主要邏輯是使用 Javascript 和 PHP 編寫的?，F(xiàn)在我創(chuàng)建了一個新的 php 文件（random.php）來從目錄中獲取隨機圖像我用來從目錄中檢索隨機圖像的代碼:(random.php) <?php $dire="Annotated Dataset/"; $images = glob($dire. '*.{jpg,jpeg}', GLOB_BRACE); shuffle($images); $images=array_slice($images, 0, 8); foreach ($images as $key) { // code... $randomImage = array_pop($images); ?> <input type="image" src="<?=$randomImage;?>" alt="<?=$randomImage;?>" /> <?php }?>游戲的php代碼（game.php）： <?php session_start();?> <!DOCTYPE html> <html> <head> <link rel="stylesheet" href="game.css"> <meta charset="UTF-8"/> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title>Javascript Memory Game</title> </head> <body> <center><h4><div> Time :<span id ="timer"></span></div></h4></center> <main> <button data-turnable="true" data-number="0" id="1"> <img src="resources/logo.png" alt="card back" /> </button> <button data-turnable="true" data-number="0" id="2"> <img src="resources/logo.png" alt="card back" /> </button> <button data-turnable="true" data-number="0" id="3"> <img src="resources/logo.png" alt="card back" /> </button> <button data-turnable="true" data-number="0" id="4"> <img src="resources/logo.png" alt="card back" /> </button> <button data-turnable="true" data-number="0" id="5"> <img src="resources/logo.png" alt="card back" /> </button> <button data-turnable="true" data-number="0" id="6"> <img src="resources/logo.png" alt="card back" /> </button> <button data-turnable="true" data-number="0" id="7"> <img src="resources/logo.png" alt="card back" /> </button>我想使用 PHP 文件中隨機生成的圖片，并在 Javascript 文件的 switch case 中使用它。所以這將是 8 個隨機圖像。圖片目錄有100多張圖片。我想知道如何解決這個問題，或者是否有其他選擇。我沒有太多編程經驗，所以如果你能幫助我解決這個問題，將會很有幫助。
2 回答
慕田峪7331174
TA貢獻1828條經驗 獲得超13個贊
您可以使用 PHP 創(chuàng)建用于 JS 代碼的字符串。
由于您的PHP代碼是在服務器端執(zhí)行的，而JS稍后在客戶端執(zhí)行，您可以使用PHP在JS中編寫您需要的變量。
<?php
$dir = './';
$images = glob($dir. '*.{jpg,jpeg}', GLOB_BRACE);
$quoted = join(',',array_map(function($image){
return '"'.$image.'"';
}, $images));
?>
<script>
// here you move your PHP generated string into the JS realm
const allImages = [<?= $quoted; ?>];
// function to pick n amount of random images from the array.
const pickRandom = (arr,count) => {
if(count < arr.length){
console.error(`can not get ${count} items from array with length ${arr.length}`);
return arr;
}
let _arr = [...arr];
return[...Array(count)].map( ()=> _arr.splice(Math.floor(Math.random() * _arr.length), 1)[0] );
};
console.log(pickRandom(allImages, 2));
</script>
FFIVE
TA貢獻1797條經驗 獲得超6個贊
在這種情況下，由于您的 JS 和 PHP 文件與您的 HTML 文件是分開的，因此我建議您使用 XMLHttpRequest 從您的 JS 文件到您的 PHP 文件。
function getRandomImage() {
var conn = new XMLHttpRequest(); //new xhr
var result; //result input tag
conn.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) { //check if connection succeeded
result = this.responseText; //assign response to result
}
}
conn.open("GET","<path>/random.php",false); //open new connection
conn.send(); //send
return result; //something like '<input type="image" src="xxx.jpg" alt="xxx.jpg" />
}
請注意，最后一個變量conn.open是false. 通常建議在true此處false使用已棄用，但使用false可保證該函數(shù)僅在連接完成后才返回結果，并且它實際上有一些東西要返回。還有其他方法可以做到這一點（查找 Promises），但不是我特別精通的任何方法。
編輯
這個答案的其余部分假設您決定使用 XMLHttpRequest。JasperZelf 的回答也完全有效，我仍然認為將所有代碼放在一個文件中總體上會更簡單。免責聲明：
由于您的getgImage函數(shù)旨在每次調用時都返回相同的圖像集，因此我建議使用全局變量來存儲從random.php. 我會把這樣的東西放在game.js文件的頂部或底部附近：
var image1 = getRandomImage();
var image2 = getRandomImage();
//...
var image7 = getRandomImage();
var image8 = getRandomImage();
并修改你的getgImage函數(shù)看起來像這樣：
function getgImage(number) {
switch (number) {
case '1':
return image1;
//...
default:
return '<img src="resources/logo.png">';
}
}
- 2 回答
- 0 關注
- 157 瀏覽
添加回答
舉報
0/150
提交
取消