如何在首页上更改我的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游戏的位置

更新：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 2013-04-25 13:30:33

你想去哪儿将你的游戏在网页上？ – Antoine 2013-04-25 13:30:44

您应该将头标移动到头标记 – Andbdrew 2013-04-25 13:31:31

一个 “正确” 的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 2013-04-25 13:35:35

yesh对不起，我改变了一分钟前。谢谢 – user2304563 2013-04-25 13:38:18

如果你看这里[链接]（http://users.aber.ac.uk/cew10/iwp-project/snake-game.html），游戏出现在页面左上角，但我想它将在诺基亚屏幕内。 – user2304563 2013-04-25 13:40:03

您在页面的中心要吗？

如果您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 2013-04-25 13:43:14

您的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游戏的位置

回答

相关问题