我一直在摆弄随机代码，试图在HTML和CSS方面做得更好，所以我一直在努力做出一个移动的数字。
问题是方形(头部(附在棍子(身体/躯干(上，我无法将它们取下。
我该如何将两者分开？
// move controls //
var up = false,
right = false,
down = false,
left = false,
x = window.innerWidth/2-130/2,
y = window.innerHeight/2-130/2
document.addEventListener('keydown',press)
function press(e) {
if (e.keyCode === 38 /* up */ || e.keyCode === 87 /* w */) {
up = true
}
if (e.keyCode === 39 /* right */ || e.keyCode === 68 /* d */) {
right = true
}
if (e.keyCode === 40 /* down */ || e.keyCode === 83 /* s */) {
down = true
}
if (e.keyCode === 37 /* left */ || e.keyCode === 65 /* a */) {
left = true
}
}
document.addEventListener('keyup',release)
function release(e){
if (e.keyCode === 38 /* up */ || e.keyCode === 87 /* w */) {
up = false
}
if (e.keyCode === 39 /* right */ || e.keyCode === 68 /* d */) {
right = false
}
if (e.keyCode === 40 /* down */ || e.keyCode === 83 /* s */) {
down = false
}
if (e.keyCode === 37 /* left */ || e.keyCode === 65 /* a */) {
left = false
}
}
// attach controls to body //
function gameLoop() {
var square = document.querySelector("square")
if (up) {
y = y - 3
}
if (right) {
x = x + 3
}
if (down) {
y = y + 3
}
if (left) {
x = x - 3
}
square.style.left = x+'px'
square.style.top = y+'px'
window.requestAnimationFrame(gameLoop)
}
window.requestAnimationFrame(gameLoop)
// attach controls to rest of body //
function gameLoopStick() {
var stick = document.querySelector("stick")
if (up) {
y = y - 3
}
if (right) {
x = x + 3
}
if (down) {
y = y + 3
}
if (left) {
x = x - 3
}
stick.style.left = x+'px'
stick.style.top = y+'px'
window.requestAnimationFrame(gameLoopStick)
}
window.requestAnimationFrame(gameLoopStick)square {
border: 8px solid black;
width: 100px;
height: 100px;
position: absolute;
left: 100px;
top: 100px;
}
stick {
border: 5px solid black;
height: 100px;
position: absolute;
left: 200px;
top: 200px;
}<html>
<body>
<title>Moving Cubes :)</title>
</body>
<body>
<square id="square"/></square>
<stick id="stick"/></stick>
</body>
<script>
</script>
</html>我猜这就是你想要的？你试图用position:absolute调整棍子，但你也在使用绝对定位来移动整个图形。如果你只是想相对于它的相邻元素移动某个东西，那么绝对定位不是你想要的。请改用margin。
// move controls //
var up = false,
right = false,
down = false,
left = false,
x = window.innerWidth / 2 - 130 / 2,
y = window.innerHeight / 2 - 130 / 2
document.addEventListener('keydown', press)
function press(e) {
if (e.keyCode === 38 /* up */ || e.keyCode === 87 /* w */ ) {
up = true
}
if (e.keyCode === 39 /* right */ || e.keyCode === 68 /* d */ ) {
right = true
}
if (e.keyCode === 40 /* down */ || e.keyCode === 83 /* s */ ) {
down = true
}
if (e.keyCode === 37 /* left */ || e.keyCode === 65 /* a */ ) {
left = true
}
}
document.addEventListener('keyup', release)
function release(e) {
if (e.keyCode === 38 /* up */ || e.keyCode === 87 /* w */ ) {
up = false
}
if (e.keyCode === 39 /* right */ || e.keyCode === 68 /* d */ ) {
right = false
}
if (e.keyCode === 40 /* down */ || e.keyCode === 83 /* s */ ) {
down = false
}
if (e.keyCode === 37 /* left */ || e.keyCode === 65 /* a */ ) {
left = false
}
}
// attach controls to body //
function gameLoop() {
var square = document.querySelector("square")
if (up) {
y = y - 3
}
if (right) {
x = x + 3
}
if (down) {
y = y + 3
}
if (left) {
x = x - 3
}
square.style.left = x + 'px'
square.style.top = y + 'px'
window.requestAnimationFrame(gameLoop)
}
window.requestAnimationFrame(gameLoop)
// attach controls to rest of body //
function gameLoopStick() {
var stick = document.querySelector("stick")
if (up) {
y = y - 3
}
if (right) {
x = x + 3
}
if (down) {
y = y + 3
}
if (left) {
x = x - 3
}
stick.style.left = x + 'px'
stick.style.top = y + 'px'
window.requestAnimationFrame(gameLoopStick)
}
window.requestAnimationFrame(gameLoopStick)square {
border: 8px solid black;
width: 100px;
height: 100px;
position: absolute;
left: 100px;
top: 100px;
}
stick {
border: 5px solid black;
height: 100px;
position: absolute;
left: 200px;
top: 200px;
margin-top: 116px;
margin-left: 56px;
}<square id="square" /></square>
<stick id="stick" /></stick>也许可以尝试一些css
square{
padding-bottom: 5px;
margin-bottom: 10px;
}
如果你的意思是它们像片段中一样重叠，也许可以尝试z-index:
stick{
z-index: 2;
}