2016-06-18 67 views
0

私は小さなJSクリックゲームを作成しようとしています。そこでは、フォルダからのランダムな画像が生成され、ユーザーがそれをクリックします。私のコードはLocalhost上で正常に動作していますが、ライブサイトに移動したときに404の定義されていないエラーが発生します。私はそれが正常に動作しない場合は、今、このフォーラムの日を解決しようとしてきたJavaScriptはLocalhostでは動作しますが、ライブサイトでは動作しません

は、ここに私のコードです。また、私はCSSが外部ファイルになければならないことを知っています。 :)

<html> 
    <head> 
     <meta charset="utf-8"> 
     <title>Naamari_peli</title> 

     <style type="text/css"> 
      body { 
       font-family: sans-serif; 
       margin: 0; 
       padding: 0; 
       width: 100%; 
      } 

      #shape { 
       width: 100px; 
       height: 100px; 
       background-position: center; 
       background-repeat: no-repeat; 
       display: none; 
       position: relative; 
       background-size: 100%; 
      } 

      .bold { 
       font-weight: bold; 
      } 

      #top{ 
       width: 90%; 
       margin:0 auto; 
       text-align: center; 
      } 

      #gameArea { 
       margin: auto; 
       height: 80%; 
       width: 90%; 
       border-radius:8%; 
       border: 3px groove grey; 
       position: relative; 
       background-image: url(backgrounds/kai.jpeg); 
       background-size: cover; 
       background-position: top; 

      } 
     </style> 
    </head> 

    <body> 
     <div id="top"> 
      <h1>Naamapeli</h1> 

      <p></p> 

      <p class="bold">Aika: <span id="timeTaken"></span></p> 
     </div> 
     <div id="gameArea"> 
      <div id="shape"></div> 
     </div> 

     <script type=text/javascript"> 
      var imgArray = [ 
      <?php 
      $post_dir = "/"; 
      $images = glob($post_dir . "*.jpg"); 
      $listImages=array(); 
      foreach($images as $image){ 
       echo "'$image',\n"; 
      } 
      ?> 
      ]; 
     </script> 

     <script type="text/javascript"> 
      var start = new Date().getTime(); 

      /* tää lista printataan PHP:lla sivupohjaan 
      var imgArray = <?php echo json_encode($listImages); ?>; */ 

      var imgArray = [ 
       <?php 
       $post_dir = "/"; 
       $images = glob($post_dir . "*.jpg"); 
       $listImages=array(); 
       foreach($images as $image){ 
        echo "'$image',\n"; 
       } 
       ?> 
      ]; 

      function makeImgAppear() { 
       var rand = imgArray[Math.floor(Math.random() * imgArray.length)]; 
       var urlString = 'url(' + rand; 
       var top = Math.random() * 400; 
       var left = Math.random() * 1100; 
       var width = (Math.random() * 150) + 75; 

       document.getElementById("shape").style.borderRadius = "50%"; 
       document.getElementById("shape").style.backgroundImage = urlString; 
       document.getElementById("shape").style.width = width + "px"; 
       document.getElementById("shape").style.height = width + "px"; 
       document.getElementById("shape").style.top = top + "px"; 
       document.getElementById("shape").style.left = left + "px"; 
       document.getElementById("shape").style.marginBottom = 0.5 * width + "px"; 
       document.getElementById("shape").style.position = "relative"; 
       document.getElementById("shape").style.display = "block"; 
       start = new Date().getTime(); 
      } 

      function appearAfterDelay() { 
       setTimeout(makeImgAppear, Math.random() * 2000); 
      } 
      appearAfterDelay(); 

      document.getElementById("shape").onclick = function() { 
       document.getElementById("shape").style.display = "none"; 
       var end = new Date().getTime(); 
       var timeTaken = (end - start)/1000; 
       document.getElementById("timeTaken").innerHTML = timeTaken + "s"; 
       appearAfterDelay(); 
      } 
     </script> 
    </body> 
</html> 
+0

あなたは、画像フォルダをアップロードしましたか?また、 '' url( '' string –

+0

これは実際のコードのコピー/ペーストですか?最初のスクリプトタグの引用符がありません: '

関連する問題