작업 결과물1
body, CSS, script 작업
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{margin:0px;}
</style>
<script src="../js/lib.js"></script>
<script>
//전산에서 모든 그래픽은 사각형으로 표현된다!!!
//이 예제에서는 사각형들간, 충돌여부를 체크하는 로직을 작성해보자!!
var box1;
var box2;
var flag=false;
function init(){
box1=document.getElementById("box1");
box2=document.getElementById("box2");
//스타일 적용
box1.style.position="absolute";
box1.style.left=100+"px";
box1.style.top=200+"px";
box1.style.background="green";
box1.style.width=100+"px";
box1.style.height=100+"px";
box1.style.color="#ffffff";
box2.style.position="absolute";
box2.style.left=600+"px";
box2.style.top=200+"px";
box2.style.background="blue";
box2.style.width=100+"px";
box2.style.height=100+"px";
box2.style.color="#ffffff";
log(box1, 100,200);
log(box2, 600,200);
}
function drag(){
if(flag){
box1.style.left=(event.clientX-50)+"px";
box1.style.top=(event.clientY-50)+"px";
//초록이의 좌표 실시간 출력
log(box1, parseInt(box1.style.left) , parseInt(box1.style.top) );
if(hitTest(box1 , box2)){
box2.style.background="red";
}else{
box2.style.background="blue";
}
}
}
//실시간 좌표 출력 obj:누구에게,
function log(obj, x, y){
obj.innerText="x:"+x+" , y:"+y;
}
//한번 누르면 들고다니고, 또한번 누르면, 내려놓게..
function take(){
flag=!flag; //상태 뒤집기!
}
window.addEventListener("load", function(){
init();
});
</script>
</head>
<body onmousemove="drag()">
<div style="width:100%;height:600px;background:yellow">
<div id="box1" onClick="take()"></div>
<div id="box2"></div>
</div>
</body>
</html>
|
cs |
script 작업
* 감싸는 <div> 1개를 생성하고 충돌을 검사할 <div> 2개를 생성한 뒤 각 id를 부여한다.
* 나를 지칭할 <div>는 클릭 시 움직일수 있게 이벤트 핸들러 onClick 을 부여한다.
* init() 함수에는 각 <div>를 사용하기위해 각 변수로 요소를 가져오고 스타일을 설정 해준다.
* log(obj, x, y) 함수를 선언하고 각 <div> 안에 x,y 좌표를 표기해준다.
* drag() 함수에는 flag가 true일때 즉, 클릭했을때 박스가 마우스를 따라 box1이 움직이며 좌료가 변한다.
* 그리고 라이브러리에 있는 hitTest함수가 true 일때 box2의 색상이 빨간색으로 변하고 아닐경우 다신 파란색으로 변한다.
lib.js 라이브러리
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
|
function hitTest(me, target) {
//두물체간 충돌 여부 판단
me_x= parseInt(me.style.left);
me_y= parseInt(me.style.top);
me_width=parseInt(me.style.width);
me_height=parseInt(me.style.height);
target_x= parseInt(target.style.left);
target_y= parseInt(target.style.top);
target_width=parseInt(target.style.width);
target_height=parseInt(target.style.height);
var result1=(me_x >= target_x) && (me_x <= (target_x+target_width));//나의 x좌표위치가 타겟의 x range 내에 있는지 판단
var result2=(me_x+me_width >= target_x) && (me_x+me_width <= (target_x+target_width)); //나의 가로폭이 타겟의 가로폭 내에 있는지 판단
var result3=(me_y >= target_y) && (me_y <= (target_y+target_height));//나의 y좌표위치가 타겟의 세로폭 내에 있는지 판단
var result4=(me_y+me_height >= target_y) && (me_y+me_height <= (target_y+target_height));//나의 y폭이 타겟의 세로폭 내에 있는지 판단
return (result1 || result2) && (result3 || result4);
}
|
cs |
* 충돌 함수는 me의 <div>가 target <div> 와 만날 모든 경우의 수를 계산해 주어야한다.
* 모든경우의 수를 계산해준 코드는 위와 같다.
반응형
'개발 > HTML&JS' 카테고리의 다른 글
| html JSON 활용 (0) | 2021.03.30 |
|---|---|
| htm 슈팅게임 (0) | 2021.03.25 |
| html 객체와 class (0) | 2021.03.23 |
| html 다차원 배열2 (0) | 2021.03.18 |
| html 다차원 배열1 (0) | 2021.03.17 |
댓글