Question

我正在尝试制作一个基本的视频游戏，一个游乐场和一个移动它的玩家角色（PC）。我的问题是，尽管PC作为Playground的内部存在，但它解释了整个页面而不是操场的“左”属性，这意味着如果窗口调整大小，它会偏离中心。请注意，PC在代码中称为“Atlas”

目前操场是这样的：

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

Answer 1

添加 position：相对于#playground

位置绝对位置元素绝对位于下一个相对定位的父级中，在您的情况下可能是

如何将图像相对于另一个图像的边界定位？

1 个答案: