Как я могу расположить изображение относительно границ другого изображения?

Question

Как я могу расположить изображение относительно границ другого изображения?

1

Я пытаюсь сделать рудиментарную видеоигр с игровой площадкой и персонажем игрока (ПК), который движется в нем. Моя проблема заключается в том, что, хотя ПК существует как внутри игровой площадки, он интерпретирует "левый" атрибут для всей страницы, а не для игровой площадки, что означает, что он выходит из центра, если окно будет изменено. Обратите внимание, что ПК называется "Атлас" в коде

в настоящее время площадка устроена так:

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

и персонаж игрока рисуется так:

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

И это таблица стилей

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

Luca Ballanzeddu 01 дек. 2017, в 17:31

Источник

Теги:

javascript

css

http