首先：对不起，我的英语不好，我很难用英语来描述我的问题:)
在学校里，我只能使用DOM编写自己的（简单）js游戏。到目前为止，我已经做过游戏控制和其他一些事情了。我的问题是，要检测某些图像/ div之间的冲突。我真的不知道该怎么做，我的老师无法帮助我。所以我的问题是，编写一个检测碰撞和evt的函数。返回true。
希望您的任职者都能帮助我！
劳伦的问候
我的代码：
IT男孩
@import url（'https://fonts.googleapis.com/css?family=Press+Start+2P'）;
<body id="game" onload="monster1Bewegen()">
<audio autoplay loop>
<source src="jarmusik.mp3" type="audio/mpeg">
</audio>
<form name="form01">
<script type="text/javascript">
var elem = document.getElementById('game');
elem.addEventListener("keydown", KeyPressed );
</script>
<div id="main">
<h1 id="h">Dein Leben: </h1>
<progress value="100" id="p" max="100" min="0"></progress>
<div id="wiese">
<div style="width:100%;">
<img class="bg_image" id="bgimg01" width="100%" src="C:\Users\Laurin\Desktop\MEDT2\MEDT2\www\01Brein\Modul3\wiese.png">
</div>
<img name="character01" id="boy" src="ITboy.gif">
<img id="sonne" src="sonne.png">
<img id="erdblock" src="Stehdings.png">
<img id="monster1" src="monster.gif">
<img id="gewitter" src="gewitter.png">
<img id="busch" src="busch.png">
<img id="erdblock2" src="stehdings.png">
<img id="wolke" src="stehwolke.png">
<img id="monster2" src="regenbogenschwein.gif">
<img id="erdblock3" src="stehdings.png">
<img id="wolke2" src="stehwolke.png">
<img id="wolke3" src="stehwolke.png">
<img id="monster3" src="rosasaurus.gif">
</div>
</div>
</form>
<script type="text/javascript">
move("initial");
</script>
</body>
</html>`
var obj_left = 560;
var obj_top = 520;
var steps = 10;
var characterGround = obj_top + 50;
var obj_postion = "";
function move(direction) {
if(direction == "initial") {
setPos(obj_top,obj_left);
}
else {
switch(direction) {
case "up":
obj_top -= steps;
break;
case "left":
obj_left -= steps;
break;
case "right":
obj_left += steps;
break;
case "down": //Down - only if character is higher than ground
if(obj_top>characterGround) {
obj_top += steps;
}
break;
}
setPos(obj_top,obj_left);
}
}
function setPos(otop,oleft) {
document.form01.character01.style.position = "absolute";
document.form01.character01.style.zIndex = "3";
document.form01.character01.style.top = otop + "px";
document.form01.character01.style.left = oleft + "px";
}
function KeyPressed(evt) {
/**********************************************************
****** Important KeyCodes ***
***********************************************************
UP Arrow: KeyCode 38
DOWN Arrow: KeyCode 40
LEFT Arrow: KeyCode 37
RIGHT Arrow: KeyCode 39
SPACE: KeyCode 32
*********************************************************/
switch(evt.keyCode) {
//LEFT
case 37:
obj_left -= steps;
break;
//RIGHT
case 39:
obj_left += steps;
break;
//UP
case 38:
bj_top -= steps;
break;
//Down
case 40:
obj_top += steps;
break;
//Jump - Space
case 32:
jump();
break;
}
setPos(obj_top,obj_left);
}
/***********************************************************/
/* Character Jump */
/***********************************************************/
var yVel = 0; //Velocity in the Y Direction (top)
var gravity = 2; //Gravity
var isJumping = false; //Saves the state if the character is jumping or not - prevent multiple jumps
var drop;
function jump() { //If the character isn't already jumping - jump
if (isJumping == false) {
yVel = -150;
obj_top += yVel;
setPos(obj_top,obj_left);
isJumping = true;
droploop();
}
}
function droploop() {
//if isJumping is true
if(isJumping) {
obj_top += gravity;
setPos(obj_top,obj_left);
//Check if the character has reached the ground the drop is stopped
if (obj_top > characterGround) {
obj_top = characterGround;
setPos(obj_top,obj_left);
yVel = 0;
isJumping = false;
clearInterval(drop);
}
else {
//if the character has not reached the ground the loop for the drop is started
drop = setInterval(droploop, 500);
}
}
}
/***********************************************************/
/* Set Szene */
/***********************************************************/
var x = 830;
var left = false;
function monster1Bewegen() {
if(x>=810 && x<=900){
if(left)
x--;
else
x++;
}
if(x == 810 || x == 900) {
left = !left;
}
document.getElementById('monster1').style.left = x + "px";
window.setTimeout(monster1Bewegen, 30);
}
最佳答案
试试这里是演示https://jsfiddle.net/ryanoc/TG2M7/
function getPositions(box) {
var $box = $(box);
var pos = $box.position();
var width = $box.width();
var height = $box.height();
return [ [ pos.left, pos.left + width ], [ pos.top, pos.top + height ]
];
}
function comparePositions(p1, p2) {
var x1 = p1[0] < p2[0] ? p1 : p2;
var x2 = p1[0] < p2[0] ? p2 : p1;
return x1[1] > x2[0] || x1[0] === x2[0] ? true : false;
}
function checkCollisions(){
var box = $(".bomb")[0];
var pos = getPositions(box);
var pos2 = getPositions(this);
var horizontalMatch = comparePositions(pos[0], pos2[0]);
var verticalMatch = comparePositions(pos[1], pos2[1]);
var match = horizontalMatch && verticalMatch;
if (match) { $("body").append("<p>COLLISION !!!</p>"); }
}