如何在首頁上更改我的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遊戲的位置

回答

相關問題