1

有什么方法可以检查，例如名称为“字符”的 DIV 是否与名称为“地面”的 DIV 重叠？

我想用干净的 Javascript 来做这件事，我知道 jQuery 更好，但这就是我不想要的。我看到了这篇文章：检查某些 div 之间的碰撞？，但它不返回任何东西。

感谢帮助。

4

2 回答 2

2

首先，我建议你检查一下 HTML5canvas元素，从它的声音来看，你想制作一个游戏，这canvas非常适合；）

但是，要回答您的问题，您可以使用document.createElement()orgetElementById()分别创建或获取 div 元素，并通过获取它们的 JS 设置值 ( ) 来获取它们的样式属性，或者如果您希望在 CSS 中设置初始值，请element.style使用getComputedStyle 。

确保无论您如何获得这些 CSS 属性，都需要将它们解析为 JS 可以消化的东西。对于基于整数的位置，parseInt()通常可以解决问题。

接下来，你做数学。在这种情况下，您想查看角色 div 的顶部加上其高度是否大于地面的顶部位置。如果是，它已经碰撞了。

要将样式设置回 div，您只需设置样式属性即可。

这是一个示例（从this fiddle复制）：

var character = document.getElementById("character");
var ground    = document.getElementById("ground");

//We could use getComputedStyle to get the style props,
//but I'm lazy
character.style.top = "10px";
character.style.height = "40px";
ground.style.top = "250px";

//For every 33ms (about 30fps)
setInterval(function(){
    
    //Get the height and position of the player
    var charTop    = parseInt(character.style.top),
        charHeight = parseInt(character.style.height);
    
    //and the top of the ground
    var groundTop = parseInt(ground.style.top);
    
    //linear gravity? Why now?
    charTop += 5;
    
    //If the character's bottom is hitting the ground,
    //Stop moving
    if(charTop + charHeight > groundTop) {
        charTop = groundTop - charHeight;    
    }
    
    //Set the character's final position    
    character.style.top = charTop + "px";
},33);
#character {
    position: absolute;
    width: 40px;
    height: 40px;
    left: 50px;
    background-color: #F00;
}

#ground {
    position: absolute;
    width: 300px;
    height: 60px;
    left: 0px;
    background-color: #A66;
}
<div id="character"></div>
<div id="ground"></div>

还有一件事：虽然当元素使用不同的定位属性（例如：玩家使用top/left坐标，地面使用bottom）时，获取元素位置的方法很复杂，但管理起来要困难得多。

于 2013-06-23T01:09:33.327 回答
0

The only jQuery that was being used in that linked answer was to get with width,height, and position of the divs, which are somewhat trivial to retrieve using pure JS:

CSS / JavaScript - How do you get the rendered height of an element?

jquery position() in plain javascript

How do I retrieve an HTML element's actual width and height?

It's not returning anything because the .top .left and height variables in the return statement were relying on jQuery functions that retrieve the information mentioned above.

于 2013-06-23T01:25:38.713 回答