0 
<!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页面中做什么才能将游戏移动到页面上的不同位置？

更新：css 页面如下所示：

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

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

3 回答 3

2

“正确”的 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-25T13:33:10.820 回答
0

你想要它在页面的中心吗？

如果您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*/
}

这是一个活生生的例子。

完整的代码将是：

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

如果你想要更多，这里有一篇关于以未知为中心的好文章。

于 2013-04-25T13:32:27.817 回答
0

您的 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-25T13:34:49.220 回答