使用 PHP 从目录中为我的游戏拉随机 8 张图片

Question

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 }?>

游戏逻辑（game.js）

var numbers = [1, 1, 2, 2, 3, 3, 4, 4, 5, 5, 6, 6, 7, 7, 8, 8];
var lastKnownButtonId = undefined;
var lastKnownButtonNumber = undefined;
var wait = false;
var matches = 0;
var numTries =0;
var moves = 0;
var counter = document.querySelector(".moves");
var finaltime=0;
var gamescore;
var totalscore;
//elements
var buttons = document.querySelectorAll("button");

//code
shuffle(numbers);
distributeNumbers();


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

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);


  }

 }

});
}
function moveCounter(){
++moves;
//counter.innerHTML = moves;
}


 window.onload = function() {
  var timeoutHandle;
  function countdown(minutes, seconds) {
      function tick() {
          var timecounter = document.getElementById("timer");
          timecounter.innerHTML = minutes.toString() + ":" + (seconds < 10 ? "0" : "") + String(seconds);
          seconds--;
          if (seconds >= 0) {
              timeoutHandle = setTimeout(tick, 1000);
          } else {
              if (minutes >= 1) {

                  setTimeout(function () {
                      countdown(minutes - 1, 59);
                  }, 1000);
              }
          }
          if (seconds==0 && minutes ==0){

            alert("Game over");
            //reset();
          }
          if (matches==8){
            clearTimeout(timeoutHandle);
            finaltime= (timecounter.innerHTML=seconds);
            document.getElementById("seconds").innerHTML= finaltime;
            var totalscore = calcScore();
            document.getElementById("score").innerHTML= totalscore;



          }
      }
      tick();
  }

  countdown(1, 00); }




 // showWinScreen();
 function calcScore(){
 var tilesbonus = (matches) * 20; // 20 points for each successful tile
 var timebonus = (finaltime) * 8;  // 8 points for each second
 var triesbonus = (30 - moves) * 10;  // (deduct) 10 points for each try
 if (tilesbonus <0) { tilesbonus = 0; }
 if (timebonus <0) { timebonus = 0; }
 if (triesbonus <0) { triesbonus = 0; }
 totalscore = tilesbonus + timebonus + triesbonus;
 return totalscore;
 }


 //functions
 function reset() {


 for (let i = 0; i < buttons.length; i++) {
 buttons[i].innerHTML = getgImage(0);
 buttons[i].style.backgroundColor = 'white';

 document.querySelector('.win-container').style.display = 'none';

 document.getElementById("6").style.display = 'block';
 document.getElementById("7").style.display = 'block';
 document.getElementById("10").style.display = 'block';
 document.getElementById("11").style.display = 'block';


 }
 lastKnownButtonId = undefined;
 lastKnownButtonNumber = undefined;
 wait = false;
 shuffle(numbers);
 distributeNumbers();
 matches = 0;
 moves = 0;
 counter.innerHTML = moves;
 //countdown=0;
 //m=timeArray[0];
 //s=0;

 }


function showWinScreen() {
document.querySelector('.win-container').style.display = 'flex';

document.getElementById("6").style.display = 'none';
document.getElementById("7").style.display = 'none';
document.getElementById("10").style.display = 'none';
document.getElementById("11").style.display = 'none';
}


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">';

 }
 }
 function distributeNumbers() {
 for (i = 0; i < buttons.length; i++) {
 buttons[i].dataset.number = numbers[i];
 }
 }

 function shuffle(array) {
 var j, x, i;
 for (i = array.length - 1; i > 0; i--) {
 j = Math.floor(Math.random() * (i + 1));
 x = array[i];
 array[i] = array[j];
 array[j] = x;
 }
 return array; 
 }

游戏的php代码（game.php）：

 <?php session_start();?>     
 <!DOCTYPE html>
 <html lang="en">
 <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>
  <button data-turnable="true" data-number="0" id="8">
    <img src="resources/logo.png" alt="card back" />
  </button>
  <button data-turnable="true" data-number="0" id="9">
    <img src="resources/logo.png" alt="card back" />
  </button>
  <button data-turnable="true" data-number="0" id="10">
    <img src="resources/logo.png" alt="card back" />
  </button>
  <button data-turnable="true" data-number="0" id="11">
    <img src="resources/logo.png" alt="card back" />
  </button>
  <button data-turnable="true" data-number="0" id="12">
    <img src="resources/logo.png" alt="card back" />
  </button>
  <button data-turnable="true" data-number="0" id="13">
    <img src="resources/logo.png" alt="card back" />
  </button>
  <button data-turnable="true" data-number="0" id="14">
    <img src="resources/logo.png" alt="card back" />
  </button>
  <button data-turnable="true" data-number="0" id="15">
    <img src="resources/logo.png" alt="card back" />
  </button>
  <button data-turnable="true" data-number="0" id="16">
    <img src="resources/logo.png" alt="card back" />
  </button>


  <div class="win-container">
    <p><font size= "4"> You win!</font></p>
    <p><font size= "4">You made <span id=finalMove> </span> moves </font></p>
    <p><font size= "4">with <span id=seconds> </span> secs left </font></p>
    <p><font size= "4">Your score: <span id=score> </span></font></p>


    <button class="play-again" onclick="reset()">Play Again</button>
    <button id="sendscore" class="Go-on"><a href ="aftergame.php" style="text-decoration:none; color:inherit;">Submit</a></button>
   </div>
  </main>

   <script defer="defer" src="game.js"></script>

  <script src="jquery-3.2.1.js" type="text/javascript"></script>
  </html>

我想使用从 PHP 文件中随机生成的图片，并在 Javascript 文件的 switch case 中使用它。所以这将是 8 个随机图像。图片目录有100多张图片。

我想知道如何解决这个问题，或者是否有其他选择。我没有太多的编程经验，所以如果你能帮我解决这个问题会很有帮助。

Answer 1

您可以使用 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>

Answer 2

在这种情况下，由于您的 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">';
  }
}