2016-06-18 128 views
0

我正尝试创建一个小型JS单击游戏,其中随机图像来自文件夹,并且用户点击它。我的代码在Localhost上运行良好,但是当我将它全部移到活动站点时,出现404未定义错误。JavaScript适用于本地主机,但不适用于活动网站

这里是我的代码:

我一直在试图解决现在这个论坛的日子,不能让它正常工作。另外我知道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

这是你的真实代码的副本/贴子吗?你错过了第一个脚本标签的报价:'

相关问题