1
私は、遊び場とその中を移動するプレイヤーキャラクター（PC）を備えた、初歩的なビデオゲームを作りようとしています。私の問題は、PCがプレイグラウンドの内部に存在するにもかかわらず、「左」の属性をプレイグラウンドではなくページ全体に反映させることです。つまり、ウィンドウのサイズが変更された場合、中央から外れます。 PCは現在遊び場はこのように作られているコードイメージを別のイメージの境界に相対的に配置するにはどうすればよいですか？
に「アトラス」と呼ばれている 注：
var AtlasNode = null;
var ATLAS_ID = 'Atlas';
function drawAtlas() {
if (AtlasNode === null){
AtlasNode = document.createElement('div');
AtlasNode.setAttribute('id', ATLAS_ID);
playground.appendChild(AtlasNode);
}
//ATLAS_WIDTH and _HEIGHT are the size of the PC
//atlasX and atlasY are the coordinate of the PC
AtlasNode.style.left = (atlasX-ATLAS_WIDTH/2)+ 'px';
AtlasNode.style.top = (atlasY-ATLAS_HEIGHT/2) + 'px';
}
をそして、これは次のとおりです。
<!DOCTYPE html>
<body onLoad="begin()">
<div id = "PlaygroundWrapper">
<div id = "Playground" onLoad="drawAtlas()">
<!-- here the DrawAtlas function shuld crate an element -->
<!-- <div id = "Atlas"></div> -->
</div>
</div>
</body>
プレイヤキャラクタはそう描かれていますスタイルシート
#Playground{
width: 600px;
height: 600px;
margin: auto;
padding:0px;
cursor: none;
background:#FFD700;
box-shadow: inset 5px 5px 50px #808080;
}
#Atlas{
size: 30x30;
width: 30px;
height: 30px;
background-image: url('./img/atlas.jpg');
position: absolute;
left: 270px;
top: 570px;
}