如何使一个精灵与另一个HTML5和Javascript精灵发生反应？_Javascript_Css_Html_Collision Detection

如何使一个精灵与另一个HTML5和Javascript精灵发生反应？

javascript css html

如何使一个精灵与另一个HTML5和Javascript精灵发生反应？,javascript,css,html,collision-detection,Javascript,Css,Html,Collision Detection,我是新来的，我正试图使它，使我的精灵反应时，接触到另一个精灵或边界我看到碰撞检测适用于用代码绘制的图像，但如果我使用.png呢我不知道当我的角色撞到边缘时如何阻止他们，或者当他们撞到我画布中的另一个精灵时如何阻止他们或让他们做出反应如果有人能帮助我，这就是我的想法 <head> function leftArrowPressed() {var element = document.getElementById("avatar"); element.style.left = p

我是新来的，我正试图使它，使我的精灵反应时，接触到另一个精灵或边界

我看到碰撞检测适用于用代码绘制的图像，但如果我使用.png呢

我不知道当我的角色撞到边缘时如何阻止他们，或者当他们撞到我画布中的另一个精灵时如何阻止他们或让他们做出反应

如果有人能帮助我，这就是我的想法

<head>

function leftArrowPressed() {var element = document.getElementById("avatar");
element.style.left = parseInt(element.style.left) - 5 + 'px';
element.src = 'images/model-human-left-step.png';}

function rightArrowPressed() {var element = document.getElementById("avatar");
element.style.left = parseInt(element.style.left) + 5 + 'px';
element.src = "images/model-human-right-step.png";}

function upArrowPressed() {var element = document.getElementById("avatar");
element.style.top = parseInt(element.style.top) - 5 + 'px';
element.src = 'images/model-human-back-step.png';}

function downArrowPressed() {var element = document.getElementById("avatar");
element.style.top = parseInt(element.style.top) + 5 + 'px';
element.src = 'images/model-human-step.png';}


function moveSelectionPressed(event) {                    
switch (event.keyCode) {
case 37:leftArrowPressed();break;
case 39:rightArrowPressed();break;
case 38:upArrowPressed();break;
case 40:downArrowPressed();break;
}
};


function leftArrowUnPressed() {var element = document.getElementById("avatar");
element.style.left = parseInt(element.style.left) - 5 + 'px';
element.src = 'images/model-human-left.png';}

function rightArrowUnPressed() {var element = document.getElementById("avatar");
element.style.left = parseInt(element.style.left) + 5 + 'px';
element.src = "images/model-human-right.png";}

function upArrowUnPressed() {var element = document.getElementById("avatar");
element.style.top = parseInt(element.style.top) - 5 + 'px';
element.src = 'images/model-human-back.png';}

function downArrowUnPressed() {var element = document.getElementById("avatar");
element.style.top = parseInt(element.style.top) + 5 + 'px';
element.src = 'images/model-human.png';}


function moveSelectionUnPressed(event) {                    
switch (event.keyCode) {
case 37:leftArrowUnPressed();break;
case 39:rightArrowUnPressed();break;
case 38:upArrowUnPressed();break;
case 40:downArrowUnPressed();break;
}
};


function gameLoop()
{// change position based on speed
moveSelection(); setTimeout("gameLoop()",10);}

</head>


<body onload="gameLoop();" onkeydown="moveSelectionPressed(event)" onkeyup="moveSelectionUnPressed(event)"'>

<img id='sprite1' src='images/model-human.png' style='position: absolute; left: 1; right: 1; top: 100; bottom: auto;' width='70' height='70'>

<img id='object' src='images/weapon-sword.png' style='position: absolute; left: 80%; right: 1; top: 200; bottom: auto;' width='36' height='22'>

</body>


函数leftArrowPressed（）{var element=document.getElementById（“化身”）；
element.style.left=parseInt（element.style.left）-5+'px'；
element.src='images/model human left step.png'；}
函数rightarrowspressed（）{var element=document.getElementById（“化身”）；
element.style.left=parseInt（element.style.left）+5+'px'；
element.src=“images/model human right step.png”；}
函数upArrowPressed（）{var element=document.getElementById（“化身”）；
element.style.top=parseInt（element.style.top）-5+'px'；
element.src='images/model human back step.png'；}
函数downArrowPressed（）{var element=document.getElementById（“化身”）；
element.style.top=parseInt（element.style.top）+5+'px'；
element.src='images/model human step.png'；}
函数moveSelectionPressed（事件）{
开关（event.keyCode）{
案例37：按左箭头（）；断开；
案例39：右箭头按下（）；断开；
案例38：向上箭头按下（）；断裂；
案例40：按下箭头（）；断开；
}
};
函数leftArrowUnPressed（）{var element=document.getElementById（“化身”）；
element.style.left=parseInt（element.style.left）-5+'px'；
element.src='images/model human left.png'；}
函数rightArrowUnPressed（）{var element=document.getElementById（“化身”）；
element.style.left=parseInt（element.style.left）+5+'px'；
element.src=“images/model human right.png”；}
函数upArrowUnPressed（）{var element=document.getElementById（“化身”）；
element.style.top=parseInt（element.style.top）-5+'px'；
element.src='images/model human back.png'；}
函数downArrowUnPressed（）{var element=document.getElementById（“化身”）；
element.style.top=parseInt（element.style.top）+5+'px'；
element.src='images/model human.png'；}
函数moveSelectionUnPressed（事件）{
开关（event.keyCode）{
案例37：左箭头未按下（）；中断；
案例39：右箭头未按下（）；断开；
案例38：向上箭头未压（）；
案例40：向下箭头未压（）；断裂；
}
};
函数gameLoop（）
{//根据速度改变位置
移动选择（）；设置超时（“gameLoop（）”，10）；}