如何检测是否 <div> 感动另一个 <div> ？
[英]How to detect if one <div> touches another <div>?
问题描述
我正在开发一个基本的HTML / Javascript游戏，其中一个实体（即僵尸）试图捕获另一实体（即大脑）。 僵尸通过使用键盘进行操作，大脑在DOM中呈现。
我的目标是当僵尸div触摸大脑div时，分数会增加+1。
注意注释掉的函数“ collision（$ zombie，$ brain）”是我尝试过的另一种无效的方法。 另请注意，运行代码段时，dom是空白的，因为我无法包含图像文件夹。 使用的图像
function docReady(){ window.addEventListener('keydown', moveZombie); window.addEventListener('keydown', collision); /*eventListner can tell a key is pressed, and then call the function moveZombie*/ } function moveZombie(evt) { /* create a function call it moveZombie*/ switch (evt.keyCode) { /*keyCode is used to identify which key is pressed*/ case 37:leftArrowPressed(); break; /* call the function leftArrowPressed()*/ case 39: rightArrowPressed(); break; case 38: upArrowPressed(); break; case 40: downArrowPressed(); break; } } function leftArrowPressed(){ /*define a function and call it leftArrowPressed()*/ var leftZombie = document.getElementById('zombie'); leftZombie.style.left = parseInt(leftZombie.style.left) - 15 + 'px'; /*when left Arrow Pressed move the zombie 10 px to the left*/ } function rightArrowPressed(){ var rightZombie = document.getElementById('zombie'); rightZombie.style.left= parseInt(rightZombie.style.left) + 15 + 'px'; } function upArrowPressed(){ var upZombie = document.getElementById('zombie'); upZombie.style.top= parseInt(upZombie.style.top) - 20 +'px'; } function downArrowPressed() { var downZombie = document.getElementById('zombie'); downZombie.style.top = parseInt(downZombie.style.top) + 15 + 'px'; } function collision(){ var zombie = document.getElementById('zombie'); var brain = document.getElementById('brain'); var zomLeft = zombie.x; var zomRight = zombie.x + (zombie.width); var zomTop = zombie.y; var zomBottom = zombie.y + (zombie.height); var brainLeft = brain.x; var brainRight = brain.x + (brain.width); var brainTop = brain.y; var brainBottom = brain.y + (brain.height); var crash = false; if ((zomBottom > brainTop) || (zomTop < brainBottom) || (zomRight > brainLeft) || (zomLeft < brainRight)) { crash = true; } return crash; } /*function collision($zombie, $brain) { var x1 = $zombie.offset().left; var y1 = $zombie.offset().top; var h1 = $zombie.outerHeight(true); var w1 = $zombie.outerWidth(true); var b1 = y1 + h1; var r1 = x1 + w1; var x2 = $brain.offset().left; var y2 = $brain.offset().top; var h2 = $brain.outerHeight(true); var w2 = $brain.outerWidth(true); var b2 = y2 + h2; var r2 = x2 + w2; var crash = false; if (b1 < y2 || y1 > b2 || r1 < x2 || x1 > r2) crash = true; return crash; } */ function scoreBoard(){ var score =0; var scoreBoard = "Score: " + score; if(collison==true){ score= score+1; } else return scoreBoard; }
h1{ color:red; font-style: italic; } /*Our png picture is 2000px * 312px, then each frame is 200px * 312px*/ #zombie { /*Our png picture is 2000px * 312px, then each frame is 200px * 312px*/ width: 200px; height: 312px; background-image: url("../img/walkingdead.png"); animation: plays 1.8s steps(10) infinite; position: relative; margin:auto; top:50%; } #brain{ width: 130px; height: 130px; background-image: url("../img/brain.png"); position: fixed; margin: auto; top: 50%; } #wrapper{ width: 600px; height: 200px; position: relative; animation: move 4s infinite ; } #score{ color:red; font-style: italic; } @keyframes plays { from { background-position: 0px; } to { background-position: -2000px; } }
<!DOCTYPE html> <head> <title>Zombie</title> <link rel="stylesheet" type="text/css" href="css/styles.css"> </head> <script src="game.js"></script> <body onload="docReady()" background ="./img/graveyard.png"> <h1>Zombie Game</h1> <div id="wrapper"> <div id ="zombie" style="position:absolute; left:800px; top:200px"></div> </div> <div id = "brain"> </div> <div id="score" style= "position:fixed; left 1000px; top:100px" > </div> </body> </html>
2 个解决方案
解决方案1
0 2017-10-19 05:04:13
如果您只需要检查矩形区域交叉，那么getBoundingClientRect DOM方法就可以了：
var r1 = zombie.getBoundingClientRect();
var r2 = brain.getBoundingClientRect();
var crash = r1.left <= r2.right && r2.left <= r1.right
&& r1.bottom <= r2.top && r2.bottom <= r1.top;
为了更好地测试不规则形状，您需要更专业的逻辑。
解决方案2
0 2017-10-19 08:14:45
尝试这个。
var score = 0; function checkCollision(elm1, elm2) { var elm1Rect = elm1.getBoundingClientRect(); var elm2Rect = elm2.getBoundingClientRect(); return (elm1Rect.right >= elm2Rect.left && elm1Rect.left <= elm2Rect.right) && (elm1Rect.bottom >= elm2Rect.top && elm1Rect.top <= elm2Rect.bottom); } function moveZombie(evt) { var key; var zombie = document.getElementById('zombie'); var brain = document.getElementById('brain'); var scoreDiv = document.getElementById('score'); var x = parseInt(zombie.style.left); var y = parseInt(zombie.style.top); switch (evt.keyCode) { case 37: zombie.style.left = `${x+-15}px`; break; case 39: zombie.style.left = `${x+15}px`; break; case 38: zombie.style.top = `${y+-15}px`; break; case 40: zombie.style.top = `${y+15}px`; break; } setTimeout(function() { if (checkCollision(brain, zombie)) { scoreDiv.innerHTML = ++score; } }, 150); } window.addEventListener('keydown', moveZombie);
#score { position: fixed; top: 0; right: 0; width: 80px; height: 40px; border-radius: 5px; box-shadow: 0 4px 20px 4px rgba(0, 20, 60, .1), 0 4px 80px -8px rgba(0, 20, 60, .2); text-align: center; color: green; font-size: 1.3em; line-height: 1.8; } #zombie { position: absolute; width: 100px; height: 100px; background: #fa0000; color: white; text-align: center; font-size: 1.5em; transition: all 0.1s ease-in-out; } #brain { width: 100px; height: 100px; position: fixed; left: 400px; top: 100px; background: #e5ac5e; text-align: center; font-size: 1.5em; } #buttons { position: fixed; bottom: 0; } #buttons>button { width: 80px; height: 30px; }
<div id="score"></div> <div id="zombie" style="left:0; top:0">Zombie</div> <div id="brain">brain</div>
当一个 div 在滚动时接触另一个 div 时返回的 jQuery 函数
[英]jQuery function that returns when a div touches another div upon scroll
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.