javascript如何制作<；img>；在DOM而不是画布中相互碰撞
好的，我得到了两张图片，一张是我跳的一个玩家，另一张是一个滚向玩家的桶。我在谷歌上搜索，以获得我所有的代码。问题是我找不到可以检测冲突的代码。我需要那个密码，这样当枪管击中玩家时，游戏就结束了 游戏性按下开始按钮，木桶朝玩家滚动，按下屏幕上的任意位置，让玩家跳跃。源代码在这里，如果你想尝试它感谢任何帮助，你可以负担得起我。我尝试的每一个代码都不能用于冲突检测javascript如何制作<；img>；在DOM而不是画布中相互碰撞,javascript,dom,collision-detection,2d-games,Javascript,Dom,Collision Detection,2d Games,好的，我得到了两张图片，一张是我跳的一个玩家，另一张是一个滚向玩家的桶。我在谷歌上搜索，以获得我所有的代码。问题是我找不到可以检测冲突的代码。我需要那个密码，这样当枪管击中玩家时，游戏就结束了 游戏性按下开始按钮，木桶朝玩家滚动，按下屏幕上的任意位置，让玩家跳跃。源代码在这里，如果你想尝试它感谢任何帮助，你可以负担得起我。我尝试的每一个代码都不能用于冲突检测 <!DOCTYPEhtml> <html> <head> <scrip
<!DOCTYPEhtml>
<html>
<head>
<script>
function jump() { // controls player jump
document.getElementById("m").style.top = "250px";
setTimeout(function () {
document.getElementById("m").style.top = "390px";
}, 1500)
}
function moving() { // controls barrel movement
var pp = document.getElementById("b");
var left = parseInt(pp.style.left);
var tim = setTimeout("moving()", 50); // controls the speed
left = left - 25; // move by 50 pixels
pp.style.left = left + "px";
}
</script>
</head>
<body>
<img src="back.png" onclick="jump()" style="position:absolute;top:0;left:0; height:570px;width:1200px;zdepth:1;" />
<img id="m" src="Mario.png" style="position:absolute;top:390px;left:75px;height:80px;width:80px;zdepth:2;" />
<img id="b" src="barrel.png" style="position:absolute;top:390px;left:1000px;height:80px;width:80px;zdepth:2;" />
<img id="s" src="start.png" onclick="moving()" style="position:absolute;top:0px;left:500px;height:80px;width:80px;zdepth:2;" />
</body>
</html>
函数jump（）{//控制玩家跳转
document.getElementById（“m”）.style.top=“250px”；
setTimeout（函数（）{
document.getElementById（“m”）.style.top=“390px”；
}, 1500)
}
函数moving（）{//控制桶的移动
var pp=document.getElementById（“b”）；
var left=parseInt（pp.style.left）；
var tim=setTimeout（“移动（）”，50）；//控制速度
left=left-25；//移动50像素
pp.style.left=左+像素；
}
位置。您正在使用top
和left
设置图像的坐标，因此需要检查它们是否位于相同的top
和相同的left
偏移：
var topEq = document.getElementById('m').style.top === document.getElementById('b').style.top;
var leftEq = document.getElementById('m').style.left === document.getElementById('b').style.left;
if(topEq && leftEq){
//game over
}
或者，您可以在循环中运行整个游戏，如下所示：
var playing = true;
while(playing){
//game
if(topEq && leftEq){
playing = false;
}
}
function colides(elem1, elem2){
var cr1 = elem1.getClientRects()[0]; // get the rectangle for the image
var cr2 = elem2.getClientRects()[0]; // ''
var heightOffset = (cr1.bottom - cr2.top); // calculate relative positions vert
var widthOffset = (cr1.right - cr2.left ); // calculate relative positions horiz
if ( heightOffset < (elem1.clientHeight + elem2.clientHeight) // bottom of one below top of other
&& heightOffset > 0 // and not below bottom of other
&& widthOffset < (elem1.clientWidth + elem2.clientWidth) // left of one further right than right of other
&& widthOffset > 0) // and not to the right of it
return true; // this is a collision.
return false; // we didn't return true, so it must be false.
}
function moving() // controls barrel movement
{
var barrel = document.getElementById("b"); // get the barrel image
var mario = document.getElementById("m"); // get the mario image
var left = parseInt(pp.style.left); // figure out how far left the barrel is
if (colides(barrel, mario)){ // if there is a collision
barrel.style.left = "1000px" // reset position
alert ("game over"); // notify player
} else { // else
var tim = setTimeout("moving()",50); // run this code again in 50ms
left = left-25; // move by 25 pixels // set the left coordinate down by 25px
if (left < 0) left = 1000; // if we would go off the screen, reset
barrel.style.left = left+"px"; // set the position of the image to match our variable
}
}
您需要手动检查项目是否重叠。我所知道的最简单的方法是测试一个的矩形是否与另一个的矩形重叠
element.getClientRects（）
，它提供了上/下/左/右。示例碰撞检测函数可能如下所示：
var playing = true;
while(playing){
//game
if(topEq && leftEq){
playing = false;
}
}
function colides(elem1, elem2){
var cr1 = elem1.getClientRects()[0]; // get the rectangle for the image
var cr2 = elem2.getClientRects()[0]; // ''
var heightOffset = (cr1.bottom - cr2.top); // calculate relative positions vert
var widthOffset = (cr1.right - cr2.left ); // calculate relative positions horiz
if ( heightOffset < (elem1.clientHeight + elem2.clientHeight) // bottom of one below top of other
&& heightOffset > 0 // and not below bottom of other
&& widthOffset < (elem1.clientWidth + elem2.clientWidth) // left of one further right than right of other
&& widthOffset > 0) // and not to the right of it
return true; // this is a collision.
return false; // we didn't return true, so it must be false.
}
function moving() // controls barrel movement
{
var barrel = document.getElementById("b"); // get the barrel image
var mario = document.getElementById("m"); // get the mario image
var left = parseInt(pp.style.left); // figure out how far left the barrel is
if (colides(barrel, mario)){ // if there is a collision
barrel.style.left = "1000px" // reset position
alert ("game over"); // notify player
} else { // else
var tim = setTimeout("moving()",50); // run this code again in 50ms
left = left-25; // move by 25 pixels // set the left coordinate down by 25px
if (left < 0) left = 1000; // if we would go off the screen, reset
barrel.style.left = left+"px"; // set the position of the image to match our variable
}
}
编辑添加的评论。这些应该可以解释代码。我需要的是，代码通常不是你想在这里表达问题的方式……如果听起来有敌意，很抱歉：我只是说，当你这样表达你的问题时，你是在乞求反对票，因为1）你含糊不清，2）你提问的方式让你听起来像是在说话要求我们为您编写代码而不是帮助您解决问题。请参阅：问题是我找不到能够检测冲突的代码
与不同，我找不到答案，因为我找到的所有示例都不是DOM
。后者对试图回答你问题的人更有用。它很模糊，因为这不是一个{code\u dump}：解决我的问题网站，这是一个Q/a网络，可以帮助你解决编程问题。如果你努力提供尽可能多的信息并不断更新，人们会帮助你；没有必要生气。@user3630522:始终包括并与之有问题。最好添加一个（或类似的）演示当前代码是如何工作的。@zeantsoi:那么，如果是为了澄清你标记他们帖子的原因，那么在So上咒骂某人是可以的？比如“说实话，你是个白痴”？剧透：不是。你应该更清楚，拥有超过10k的rep.function hit（）{var topEq=document.getElementById（'m'）.style.top==document.getElementById（'b'）.style.top；var leftEq=document.getElementById（'m'）.style==document.getElementById（'b'）.style.left；如果（topEq&leftEq）{alert（“gameover”）；}你调用了hit（）
从内部移动（）
？哦，该死的，我没有，但我现在就这么做了，而且很有效！！我是否必须为同一个游戏的另一个问题打开另一个主题？这取决于该主题与此游戏的关联程度。一般建议不要在评论中进行讨论，但是如果你更新了你的问题，人们可以修改他们的答案或发布新的答案。这里有聊天室类型的功能吗？基本上，我尝试了这个代码，让桶回到右侧屏幕。var barrel=document.getElementById（“b”）；好的，谢谢，我还有一个问题，你看起来很在行，我试着让木桶回到它的起点，如果它没有像这样与玩家碰撞，如果（木桶<0）{barrel.style.left=+1000；}但是它不起作用，我做错了什么？看看我的代码，它是用if来做的（左）是的，你的代码是有效的，我只是想弄清楚是什么原因导致它比我的代码更复杂。你在哪里学的代码，请添加注释，希望这有帮助