HTML代码

Question

我有一张图片。我希望那个图像能够移动。这很好，但现在我想要这些块移动。唯一的问题是我无法让div秒停止超越img 我的意思是当页面加载时，div块几乎位于img的顶部。我希望它们能够更好地定位在页面上。
我还需要知道如何将空间限制为img可以移动的位置。如果你可以帮助我，我将不胜感激。

HTML代码

<!DOCTYPE html>
  <html>
    <head>
      <title>Moving Mario</title>
      <link rel='stylesheet' type='text/css' href='stylesheet.css'/>
    </head>
    <body>
          <img src="http://i1061.photobucket.com/albums/t480/ericqweinstein/mario.jpg"/>
            <div id='div1' class='divs'></div>
            <div id='div2' class='divs'></div>
            <div id ='div3' class='divs'></div>
            <div id ='div4' class='divs'></div>
      <script type='text/javascript' src='jquery-2.1.3.min.js'></script>
      <script type='text/javascript' src='script.js'></script>
    </body>

jQuery代码

$(document).ready(function() {
alert("It Worked");
  console.log('jquery active')
    $(document).keydown(function(key) {
      console.log(key);
        switch(parseInt(key.which,10)) {
        // Left arrow key pressed
            case 37:
                $('img').animate({left: "-=10px"}, 'fast');
                break;
            // Up Arrow Pressed
            case 38:
                $('img').animate({top: "-=10px"}, 'fast');
                break;
            // Right Arrow Pressed
            case 39:
                $('img').animate({left: "+=10px"}, 'fast');
                break;
            // Down Arrow Pressed
            case 40:
                $('img').animate({top: "+=10px"}, 'fast');
                break;
        }
    });
});

CSS代码

img {
    height: 50px;
    width: 50px;
    position: absolute;
    margin:20px;
}
#div1 {
    background-color:yellow
}
#div2 {
    background-color:green;
}
#div3 {
    background-color:blue;

}
#div4 {
    background-color:red;
}
html {
    background-color: black;
}
.divs {
  display:inline-block;
  width: 200px;
  height: 100px;
    margin: 1em;
}

我正在为此项目使用代码编辑器ATOM。

Answer 1

首先在你的图像周围放置一个div来阻止其他div过度运行它。

Answer 2

由于它的绝对位置，图像高于div。去掉它。而不是＆＃39;离开＆＃39; keydown handlers type＆＃39; padding-left＆＃39;等等。请参阅示例（单击结果窗格并按向右箭头键）http://jsfiddle.net/x3vagg32/

img {
height: 50px;
width: 50px;
/*position: relative;*/
margin:20px;
}

$('img').animate({'padding-left': "+=10px"}, 'fast');

但我真的无法理解所期望的结果是什么。

<强>更新

首先你写道你想要移动块，但现在你希望它们是静态的。如果是这样，我认为您应该为参与游戏的所有元素设置 position：ablsolute 。设置适当的左侧和顶部不仅适用于图像，还适用于所有块。每次移动图像时，都应该关闭它的坐标，以便了解图像是否移动到其中一个块上。

或者可能更好地为您的游戏使用其他技巧。例如，canvas。

定位和限制麻烦

HTML代码

jQuery代码

CSS代码

2 个答案: