개발 기록

자바 스크립트[마우스 좌표 구하기] 본문

공부

자바 스크립트[마우스 좌표 구하기]

청군로 2021. 3. 9. 09:52

오늘은 마우스의 좌표를 구하는 방법이다.

 

x-event.clientX //x좌표

y-event.clientY //x좌표

 

마우스를 좌표를 이용하여 공을 이동하는 프로그램!

<!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>
        #wrapper{
            width: 100%;
            height: 800px;
            background: yellow;
            position: relative;
        }

        body{margin: 0px;}
    </style>

    <script>
        var x=0;
        var y=50;
        var img;
        var flag=false;

        function init(){
            img=document.createElement("img");
            img.src="../image/ball.webp";
            img.style.position="absolute";
            img.style.left=x+"px";
            img.style.top=y+"px";
            img.style.width=100+"px";
            img.style.height=100+"px";


            //기존의 tag에 디자인적으로 부여했던, onClick 이벤트 핸들러를, 
            //자바스크립트 코드로 구현할 경우 다음과 같다.
            img.addEventListener("click", function(){
                flag=!flag;
            });
            //wrapper라는 Id를 가진 곳에 자식으로 img를 생성.
            var wrapper=document.getElementById("wrapper");
            wrapper.appendChild(img);
        }

        function getPos(){
            console.log("마우스 움직이기");  
            //마우스의 좌표를 구한 후 변수 x와 y에 각각 대입
            x= event.clientX;
            y= event.clientY;
            //x,y값을 태그 안에 있는 텍스트에 대입
            document.getElementById("x-pos").innerText=x;
            document.getElementById("y-pos").innerText=y;

            //공의 테두리로 사용자가 집어야할지 말지를 알 수 있게
            img.style.border="2px solid red"

            //조건문을 부여해서 flag가 true이면, 공이 마우스를 따라다닌다.
            if(flag){
                //x와 y에 각각 50을 빼준 이유는 이미지의 좌표는 왼쪽 상단 꼭지점이다.
                //그러므로 이미지가 마우스의 가운데에 위치하게 하려면 이미지 너비와
                //높이의 절반을 빼준 좌표를 적용해야 한다.
                img.style.left=(x-50)+"px";
                img.style.top=(y-50)+"px";
                //마우스를 클릭했을 때 테두리를 사라지게.
                img.style.border="0px";
            }
        }

    </script>
</head>
//onMouseMove는 어떤 개체 위에서 마우스가 움직였을 때 반응한다 즉, 마우스를 움직이면
//getPos()함수를 실행한다. 
//onload 는 모든 로드가 끝나면 자동 실행이다, 브라우저를 실행하면
//init()함수가 자동 실행된다.
<body onMouseMove="getPos()" onload="init()">

    <div id="wrapper">
        <span style="font-size: 30px;" id="x-pos">x축</span>px
        <span style="font-size: 30px;" id="y-pos">y축</span>px
    </div>
</body>
</html>

 

 

'공부' 카테고리의 다른 글

자바스크립트[함수의 매개변수, 리턴]  (0) 2021.03.11
자바스크립트[키보드입력받기, event.keycode]  (0) 2021.03.11
자바스크립트[삼항연산자]  (0) 2021.03.05
자바스크립트[연산자]  (0) 2021.03.04
자바스크립트[기본 문법/버튼 이벤트]  (0) 2021.03.03
'공부' Related Articles more
Comments