0

我正在尝试使用 HTML 5、CSS 和 JQuery 制作一个简单的游戏。但是，我用作测试的导入 .js 文件“game.js”对游戏的布局没有任何影响（css 代码使 pong paddles 变蓝，但 jquery 代码应该覆盖并制作桨红色）。在我的 HTML 文件中，我引用了“http://code.jquery.com/jquery-1.9.0.min.js”作为我的 jquery 源。任何帮助，将不胜感激。

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（样式.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（游戏.js）：

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

1 回答 1

1

$(document).ready(function(){}并且$(function(){}是同一件事，所以这可能会导致问题。我建议您尝试只使用其中之一。

例如

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

编辑

刮那个！你</style>在包含的末尾game.js而不是</script>

于 2013-01-26T18:39:42.377 回答