Frontend/JavaScript
배열을 이용한 좌표녹화, 이동
Study
2021. 3. 20. 16:10
|
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
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
|
<!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>
body{margin: auto;}
.wrapper{
width: 1200px;
height: 900px;
background-color: yellow;
overflow: hidden;
}
#content{
width: 1000px;
height: 100%;
background: url("../images/lol.jpg");
background-size: cover;
background-repeat: no-repeat;
float: left;
}
#log{
width: 200px;
height: 100%;
background-color: greenyellow;
float: left;
overflow: scroll;
}
</style>
<script>
var content;
var log;
var pointArray=[];
var img;
var index=0; //이차원배열을 순차적으로 접근하기 위한 변수
function init(){
content=document.getElementById("content");
log=document.getElementById("log");
createHero();
}
function createHero(){
img=document.createElement("img");
img.src="../images/mushroom.png";
img.style.width="100px";
img.style.position="absolute";
img.style.left=100+"px";
img.style.top=100+"px";
content.appendChild(img);
}
function createPos(){
var span=document.createElement("span");
span.innerText="●";
span.style.color="red";
span.style.fontSize="6px";
span.style.position="absolute";
x=event.clientX;
y=event.clientY;
var pos = [x,y];
pointArray.push(pos);
span.style.left=x+"px";
span.style.top=y+"px";
content.appendChild(span);
printPos()
}
//좌표출력
function printPos(){
str="";
for(var i=0;i<pointArray.length;i++){
str+="["+pointArray[i][0]+", "+pointArray[i][1]+"]\n ";
}
log.innerText =str;
}
//수동 움직이기
function move(){
var x=pointArray[index][0];
var y=pointArray[index][1];
img.style.left=x+"px";
img.style.top=y+"px";
index++
}
function auto(){
setInterval("move()", 600);
}
window.addEventListener("load", function(){
init()
});
</script>
</head>
<body>
<div class="wrapper">
<div id="content" onMouseDown="createPos()"></div>
<div id="log">좌표로그</div>
</div>
<button onclick="move()">밀어주마 버섯</button>
<button onclick="auto()">뛰어라 버섯</button>
</body>
</html>
|
cs |