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