Javascript 与2D div'碰撞；s使用DOM
首先：很抱歉我的英语不好，我很难用英语描述我的问题：）Javascript 与2D div'碰撞；s使用DOM,javascript,html,Javascript,Html,首先：很抱歉我的英语不好，我很难用英语描述我的问题：） <body id="game" onload="monster1Bewegen()"> <audio autoplay loop> <source src="jarmusik.mp3" type="audio/mpeg"> </audio> <form name="form01"> <script type="t
<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);
}
<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);
}
var elem=document.getElementById（'game'）；
元素addEventListener（“向下键”，按下键）；
邓·勒本：
移动（“初始”）；
`
var obj_左=560；
var obj_top=520；
var阶数=10；
var characterGround=obj_top+50；
var obj_position=“”；
功能移动（方向）{
如果（方向=“初始”）{
setPos（obj_顶部，obj_左侧）；
}
否则{
开关（方向）{
案例“up”：
obj_top-=台阶；
打破
案例“左”：
obj_左-=步数；
打破
案例“权利”：
obj_左+=步数；
打破
大小写“向下”：//向下-仅当字符高于地面时
如果（对象顶部>字符接地）{
obj_top+=台阶；
}
打破
}
setPos（obj_顶部，obj_左侧）；
}
}
功能设置位置（otop、oleft）{
document.form01.character01.style.position=“绝对”；
document.form01.character01.style.zIndex=“3”；
document.form01.character01.style.top=otop+“px”；
document.form01.character01.style.left=oleft+“px”；
}
按下功能键（evt）{
/**********************************************************
******重要键码***
***********************************************************
向上箭头：键代码38
向下箭头：键代码40
左箭头：键代码37
右箭头：键代码39
空格：键码32
*********************************************************/
开关（evt.keyCode）{
//左
案例37：
obj_左-=步数；
打破
//对
案例39：
obj_左+=步数；
打破
//向上
案例38：
bj_top-=台阶；
打破
//向下
案例40：
obj_top+=台阶；
打破
//跳跃空间
案例32：
跳跃（）；
打破
}
setPos（obj_顶部，obj_左侧）；
}
/***********************************************************/
/*字符跳转*/
/***********************************************************/
var-yVel=0//Y方向上的速度（顶部）
var重力=2//重力
var=false//保存角色是否跳跃的状态-防止多次跳跃
var下降；
函数jump（）{//如果角色尚未跳跃-跳跃
if（isJumping==false）{
伊维尔=-150；
obj_top+=yVel；
setPos（obj_顶部，obj_左侧）；
isJumping=true；
droploop（）；
}
}
函数dropoop（）{
//如果是真的
如果（正在跳跃）{
obj_top+=重力；
setPos（obj_顶部，obj_左侧）；
//检查角色是否已到达地面，停止下降
如果（obj_top>characterGround）{
obj_top=字符地面；
setPos（obj_顶部，obj_左侧）；
yVel=0；
isJumping=false；
清除间隔（下降）；
}
否则{
//如果角色尚未到达地面，则开始下降循环
下降=设定间隔（下降，500）；
}
}
}
/***********************************************************/
/*塞斯泽内*/
/***********************************************************/
var x=830；
var left=false；
函数monster1Bewegen（）{
如果（x>=810&&x请尝试此演示
<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);
}
函数获取位置（框）{
变量$box=$（box）；
var pos=$box.position（）；
var width=$box.width（）；
var height=$box.height（）；
返回[[位置左侧，位置左侧+宽度]，[位置顶部，位置顶部+高度]
];
}
功能比较位置（p1、p2）{
变量x1=p1[0]x2[0]|x1[0]==x2[0]？true:false；
}
函数checkCollisions（）{
变量框=$（“.bomb”）[0]；
var pos=获取位置（框）；
var pos2=获取位置（此）；
var horizontalMatch=比较位置（位置[0]，位置2[0]）；
var verticalMatch=比较位置（位置[1]，位置2[1]）；
变量匹配=水平匹配和垂直匹配；
if（match）{$（“body”）.append（“冲突！！！”）；}
<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);
}
}
试试这是一个演示
<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);
}
函数获取位置（框）{
var$box=