1
나는 화살표 키를 눌러 보라색 상자를 움직일 수있는 간단한 게임을 만들었다. 보라색 상자가 파란 테두리 안에 있습니다. 보라색 상자가 파란 경계선을 벗어나서 충돌을 방지 할 수 있기를 원하지만, 나는 충돌을 포함하고 있다고 알고 있습니다. 그러나 어떻게 할 수 있는지 이해하지 못합니다. 지금까지 작성한 코드는 다음과 같습니다.어떻게 javascript와 jQuery를 사용하여 아래 2d 게임에서 충돌을 감지합니까?
<!DOCTYPE html>
<html>
<head>
<style>
body
{
background-color:pink;
}
#bob
{
width:400px;
height:500px;
padding:10px;
border:5px solid blue;
margin:0px;
}
</style>
</head>
<body>
<div id="bob">
<div id="k" style="background- color:purple;width:40px;height:40px;position:absolute" onkeydown="keydownControl(this)"/>
</div>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js">
</script>
<script>
$('html').keyup(function(e){
if(e.which==37)
{
$("#k").animate({left:"-=10px"},1);
}
if(e.which==39)
{
$("#k").animate({left:"+=10px"},1);
}
if(e.which==40)
{
$("#k").animate({top:"+=10px"},1);
}
if(e.which==38)
{
$("#k").animate({top:"-=10px"},1);
}
});
</script>
</body>
</html>
그래서 보라색 상자를 움직이고 있다고 말하면 파란색 사각형이 나타납니다. 그렇게되면 그 방향으로 움직이지 않으면 더 이상 파란색 정사각형과 접촉하지 않아서 파란색 정사각형을 벗어날 수 없습니다. JS와 jQuery를 사용하면 어떻게 될까요?
Matt, 감사합니다. 귀하의 방법이 효과가있는 것 같습니다. 가능하면 방법이 어떻게 작동하는지 설명해주십시오. 예를 들어 왜 상 한계가 0보다 큰지 확인해야하는 이유를 이해할 수 없습니다. 0은 어디에서 얻었습니까? –
div 요소의 부모 원점을 변경하는 것이 가능합니까? 다양한 div 요소를 결합하여 상자의 미로를 만들고 싶지만 전체 부모 계층 구조 일 경우 너무 복잡합니다. 아니면 캔버스 같은 것을 사용해야 만 그런 것을 방지 할 수 있을까요 ?? –
다른 상자 안에 들어있는 상자를 유지하는 것보다 좀 더 복잡한 작업을하려는 것 같습니다. 높은 수준에서 당신이해야 할 일은 div를 포함하는 div의 다양한 div가 동일한 공간을 공유하지 않도록하는 것입니다. 움직이는 유일한 div가 "플레이어"인 경우 위에서 설명한 것과 유사한 논리 검사를 실행할 수 있습니다 (이제는 보험 보장보다는 겹침을 방지하려는 경우 제외). 캔버스가 필요한 것은 아니지만 미로가 복잡할수록 성능 문제를 해결하기 위해 캔버스 또는 다른 매체를 고려할 가능성이 높습니다. –