Noobie在这里，如果您觉得这个问题很愚蠢，请道歉，我创建了一个带有 8 个默认图像的记忆游戏。现在我想访问图像目录以获取游戏的随机图像。游戏的主要逻辑是使用 Javascript 和 PHP 编写的。现在我创建了一个新的 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 创建用于 JS 代码的字符串。
由于您的PHP代码是在服务器端执行的，而JS稍后在客户端执行，您可以使用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可保证该函数仅在连接完成后才返回结果，并且它实际上有一些东西要返回。还有其他方法可以做到这一点（查找 Promises），但不是我特别精通的任何方法。
编辑
这个答案的其余部分假设您决定使用 XMLHttpRequest。JasperZelf 的回答也完全有效，我仍然认为将所有代码放在一个文件中总体上会更简单。免责声明：
由于您的getgImage函数旨在每次调用时都返回相同的图像集，因此我建议使用全局变量来存储从random.php. 我会把这样的东西放在game.js文件的顶部或底部附近：
var image1 = getRandomImage();
var image2 = getRandomImage();
//...
var image7 = getRandomImage();
var image8 = getRandomImage();
并修改你的getgImage函数看起来像这样：
function getgImage(number) {
switch (number) {
case '1':
return image1;
//...
default:
return '<img src="resources/logo.png">';
}
}
- 2 回答
- 0 关注
- 137 浏览
添加回答
举报
0/150
提交
取消