Hey! Ich habe derzeit ein Problem mit Js mit Kollisionen von bildern (keine eigenen div boxen). Ziel ist es, wenn das Monster berührt wird, die Progress bar auf value 50 zu setzen und auf die "Inseln" springen zu können. Ich bin eigentlich vertraut mit DOM (Canvas darf nicht verwendet werden, nur DOM), jedoch scheitert es hier irgendwo. Mein Code sieht derzeit so aus:
Ich hoffe mir kann jemand helfen, ich verzweifle langsam echt daran.
Grüße,
Laurin
HTML:
<!DOCTYPE>
<html>
<meta charset="utf-8">
<head>
<title>IT-BOY</title>
<script language="javascript" type="text/javascript" src="Spiel.js"></script>
<link href="Spieldesign.css" rel="stylesheet">
<style>
@import url('https://fonts.googleapis.com/css?family=Press+Start+2P');
</style>
</head>
<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>
<!--<audio autoplay loop>
<source src=jarmusik.mp3">
</audio>
-->
<div id="main">
<h1 id="h">Dein Leben: </h1>
<progress value="10" id="p" max="100" min="0"></progress>
<div id="wiese">
<div style="width:100%;">
<img class="bg_image" id="bgimg01" width="100%" src="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">
<script>
var is = kollision(boy, monster1);
if(is == true) {
document.getElementById('p').value = 100;
}
</script>
</div>
</div>
</form>
<script type="text/javascript">
move("initial");
</script>
</body>
</html>
Javascript:
var obj_left = 560;
var obj_top = 520;
//*********************************
var steps = 10;
var characterGround = obj_top + 50;
var obj_postion = "";
function move(direction) { //Set initial character- enemy- and backgrundposition
if(direction=="initial") {
setPos(obj_top,obj_left); //Sets the enemy's and the background
//setSzene();
}
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";
}
//Keyboard Listener
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 */
/***********************************************************/
//Global Vars
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();
}
}
/* The aim of the function droploop is the slow descent of the character after the Jump */
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 */
/***********************************************************/
//function setSzene() {
//document.getElementById('bgimg01').style.top = 560 + "px";
//document.getElementById('bgimg01').style.left = 680 + "px";
//}
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);
}
function kollision(a, b) {
var aRect = a.getBoundingClientRect();
var bRect = b.getBoundingClientRect();
return !(
((aRect.top + aRect.height) < (bRect.top)) ||
(aRect.top > (bRect.top + bRect.height)) ||
((aRect.left + aRect.width) < bRect.left) ||
(aRect.left > (bRect.left + bRect.width))
);
}Grüße,
Laurin
