0

HTML 5、CSS、および JQuery を使用して簡単なゲームを作成しようとしています。しかし、私がテストとして使用したインポートされた.jsファイル「game.js」は、ゲームのレイアウトに影響を与えません（cssコードはポンパドルを青色にしますが、jqueryコードは上書きして作成するはずです）パドルは赤）。私の HTML ファイルでは、jquery ソースとして「http://code.jquery.com/jquery-1.9.0.min.js」を参照しました。どんな助けでも大歓迎です。

HTML (index.html):

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <link rel="stylesheet" type="text/css" href="styles.css"/>
</head>
<body>
  <header>
    <h1>Pong</h1>
  </header>
  <div id = "game">
  <div id = "playArea">
    <div id= "paddleA" class="paddle"></div>
    <div id= "paddleB" class="paddle"></div>
    <div id= "ball"></div>
  </div>
  </div>
  <footer>
    Its like Pong. Exactly like Pong.
  </footer>
  <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.0.min.js"></script>
  <script type="text/javascript" src="game.js"></style>
</body>
</html>

CSS (styles.css):

#playArea{
background: #FFFF99; 
width: 650px;
height: 400px;
position: relative;
overflow: hidden;
}

#ball {
background: #990000;
position: absolute;
width: 20px;
height: 20px;
left: 320px;
top: 100px;
border-radius: 10px;                
}

.paddle {
background: #66FF99;
left: 50px;
top: 70px;
position: absolute;
width: 30px;
height: 70px;
}

#paddleB {
left: 570px;
}

jQuery (game.js):

$(function(){
    $("#paddleB").css("top", "100px");
    $("#paddleA").css("top", "60px");
    $(".paddle").css("background", "red");
});
4

1 に答える 1

1

$(document).ready(function(){}と$(function(){}は同じものなので、これが問題を引き起こしている可能性があります。そのうちの 1 つだけを使用してみることをお勧めします。

例えば

$(function(){
    $("#paddleB").css("top", "100px");
    $("#paddleA").css("top", "60px");
    $(".paddle").css("background", "red");
});

編集

スクラッチ！ではなく</style>、包含の最後にあります。game.js</script>

于 2013-01-26T18:39:42.377 に答える