background-image
属性。例如,我的坦克由4个小场组成。坦克在光栅上只占用一个小场。但是通过伪级.bg-player-left:before
如果实现的话,那个坦克看起来像是4级坦克。与子弹相同的想法。栅格上只有一个字段,但看起来像2.问题是,这个对象的左上角始终是黑色。
.bg-water {
background-image: url("../img/water-field.png");
background-size: cover;
background-repeat: no-repeat;
}
.bg-bush {
background-image: url("../img/bush-field.png");
background-size: cover;
background-repeat: no-repeat;
opacity: 0.8;
}
.bg-bullet-up, .bg-bullet-down, .bg-bullet-left, .bg-bullet-right,
.bg-player-up, .bg-player-down, .bg-player-left, .bg-player-right {
position: relative;
}
.bg-player-up:before {
content: "";
position: absolute;
top: 0;
left: 0px;
right: -15px;
bottom: -15px;
background-image: url("../img/player-tank-left.png");
background-size: contain;
background-repeat: no-repeat;
z-index: 1;
}
.bg-bullet-up:before {
content: "";
position: absolute;
top: 0;
left: 0px;
right: -15px;
bottom: -15px;
background-image: url("../img/bullet-left.png");
background-size: contain;
background-repeat: no-repeat;
z-index: 1;
}
您也可以自己尝试(https://javajunikorn.github.io/BattleCity/build/web/html/test.html) 为了移动坦克,您需要从移动设备或浏览器检查器中为移动版本启动游戏。
答案 0 :(得分:0)
使用伪类变形对象的有趣想法。
难道你有一个css颜色背景设置为黑色,那个png上的子弹和坦克会产生这种失真吗? 如果我去这里:https://javajunikorn.github.io/BattleCity/build/web/img/bullet-left.png
我可以在css中看到这个属性:
背景:#0e0e0e;