Как изменить положение моей игры на JavaScript на домашней странице

<!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>

Я создал javascript-игру выше, однако она всегда появляется в верхнем левом углу страницы. У меня есть страница css для создания домашней страницы, что мне нужно сделать на странице html и на странице css, чтобы переместить игру в другую позицию на странице?Как изменить положение моей игры на JavaScript на домашней странице

Update: страница CSS выглядит следующим образом:

body{ 
background-image:url(nokiaphone.jpg); 
background-repeat:no-repeat; 
background-position: center top; 
} 

#game{ 
position:absolute; 
left:1000px; 
top:150px; 
}

источник

2013-04-25 user2304563

Пожалуйста, включите ваш соответствующий CSS в вопросе – Sharlike

Где вы хотите, чтобы переместить игру на этой странице? – Antoine

вы должны переместить тег тела за пределами метки тега – Andbdrew

А "правильный" HTML страница

<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>

Если вы хотите, чтобы переместить игру на экране телефона, может попробовать это:

#game 
{ 
    width: /*Here the width of your div in pixel ex : "450px;"*/ 
    margin-left: /*Here the distance in pixel from the left border of the image to the phone screen*/ 
    margin-right: /*Here the distance in pixel from the top border of the image to the phone screen*/   position relative; 
} 

#nokia 
{ 
    margin:0; 
    padding:0; 
    width:100%; 
    background-image:url(nokiaphone.jpg); 
    background-repeat:no-repeat; 
    background-position: center top; 

}

В вашем JavaScript попробовать: (в настоящее время вы не добавляете свой холст в div игры, а прямо в теле, поэтому ваша игра не двигается)

var div = document.getElementById('game'); 
div.appendChild(canvas);

источник

2013-04-25 13:33:10 Antoine

Итак, где вы хотите переместить игру на страницу? – Antoine

да жаль, что я изменил это минуту назад. спасибо – user2304563

, если вы посмотрите здесь [ссылка] (http://users.aber.ac.uk/cew10/iwp-project/snake-game.html), игра появляется в верхнем левом углу страницы, но я хочу он находится внутри экрана nokia. – user2304563

Вы хотите его в центре страницы?

Самое простое решение, если ваш div#game имеет фиксированную ширину высота:

#game { 
    position:absolute; 
    width:500px; 
    height:500px; 
    top:50%; 
    left:50%; 
    margin-top:-250px; /*half of the height*/ 
    margin-left:-250px; /*half of the width*/ 
}

Вот live example.

Полный code'll быть:

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8" /> 
    <title>Snake!</title> 
    <link rel="stylesheet" type="text/css" href="style.css"></link> 
</head> 
<body> 
    <div id="game"> 
     <script src="snake.js" type="text/javascript"></script> 
    </div> 
</body> 
</html>

И тогда в вашем style.css предыдущий CSS.

Если вы хотите больше, вот хорошая статья о centering in the unknown.

источник

2013-04-25 13:32:27 soyuka

Кажется, просто оставайтесь там же, когда я это делаю – user2304563

Ваша структура HTML-кода довольно запутана ... с путаницами head и body. Попробуйте этот пример, который будет просто центрирования игры на экране:

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="UTF-8"> 
    <title>Snake!</title> 
    <link rel="stylesheet" type="text/css" href="style.css"></link> 
    <style type="text/css"> 
     #game { width: 600px; margin-left: auto; margin-right: auto; } 
    </style> 
</head> 
<body> 
    <div id="game"> 
     <script src="snake.js" type="text/javascript"></script> 
    </div> 
</body> 
</html>

источник

2013-04-25 13:34:49 Nerdwood

Как изменить положение моей игры на JavaScript на домашней странице

ответ

Смежные вопросы