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>
あなたは、画像フォルダをアップロードしましたか?また、 '' url( '' string –
これは実際のコードのコピー/ペーストですか?最初のスクリプトタグの引用符がありません: '