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):\[code\]<!DOCTYPE html><html lang="en"><head> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="http://stackoverflow.com/questions/14540165/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="http://stackoverflow.com/questions/14540165/game.js"></style></body></html>\[/code\]CSS (styles.css):\[code\]#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;}\[/code\]jQuery (game.js):\[code\]$(function(){ $("#paddleB").css("top", "100px"); $("#paddleA").css("top", "60px"); $(".paddle").css("background", "red");});\[/code\]
HTML5 game - Imported JQuery file will not work
- Thread starter tawir.net
- Start date