Home/ Questions/Q 9216527
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-18T02:26:12+00:00

I am trying to make a simple game using HTML 5, CSS, and JQuery.

  • 0

I am trying to make a simple game using HTML 5, CSS, and JQuery. However, the imported .js file that I used as a test, “game.js” does not have any effect on the layout of the game (the css code makes the pong paddles blue, but the jquery code is supposed to overwrite and make the paddles red). In my HTML file I referenced ‘http://code.jquery.com/jquery-1.9.0.min.js’ as my jquery source. Any help would be appreciated.

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");
});
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    $(document).ready(function(){} and $(function(){} are the same thing, so this might be causing issues. I suggest you try only using one of them.

    e.g.

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

    EDIT

    Scratch that! You have </style> at the end of the game.js inclusion rather than </script>

    • 0