html - How to change the position of my JavaScript game on the home page -
<!doctype html> <html> <head> <title> snake! </title> <link rel="stylesheet" type="text/css" href="style.css"></link> <body> <meta charset="utf-8"> <title>snake!</title> <div id="game"> <script src="snake.js" type="text/javascript"></script> </div> </body> </head> </html>
i have created javascript game above, appears in top left corner of page. have css page style home page, need in html page , in css page move game different position on page?
update: css page looks this:
body{ background-image:url(nokiaphone.jpg); background-repeat:no-repeat; background-position: center top; } #game{ position:absolute; left:1000px; top:150px; }
a "correct" html page
<html> <head> <meta charset="utf-8"> <title> snake! </title> <link rel="stylesheet" type="text/css" href="style.css"></link> </head> <body> <div id="nokia"> <div id="game"> <script src="snake.js" type="text/javascript"></script> </div> </div> </body> </html>
if want move game phone screen, maybe try :
#game { width: /*here width of div in pixel ex : "450px;"*/ margin-left: /*here distance in pixel left border of image phone screen*/ margin-right: /*here distance in pixel top border of image phone screen*/ position relative; } #nokia { margin:0; padding:0; width:100%; background-image:url(nokiaphone.jpg); background-repeat:no-repeat; background-position: center top; }
in javascript try : (currently, don't add canvas in "game" div directly in body, that's why game not move)
var div = document.getelementbyid('game'); div.appendchild(canvas);