개발 기록

자바스크립트 키보드로 이미지 움직이기 본문

Front-end/javascript

자바스크립트 키보드로 이미지 움직이기

청군로 2021. 3. 2. 18:49 
<!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:0px;
}
#wrapper{
    width:100%; /*body에 도달할때까지*/
    height:500px;
    background: url(../image/bg_city.jpg);    
    background-repeat: repeat-x; /*x축으로만 반복*/
    background-size: 100% 500px;
    background-position: 0px  0px;
}    
#hero{
    position:absolute; /*부모 태그를 기준으로 한 위치 속성 현재는 wrapper를 기준*/
    left:50px;
    top:150px;
    width:150px;
}
</style>

<script>
/*프로그램 영역이다~!! 따라서 에민하기 때문에 정신 차리자 오타없이!! 대소문자 가림
아래의 코드를 무조건 실행을 막기 위해 블럭을 지정한 후, 코드 영역에 이름을 붙여보자
아래의 코드 블럭의 이름은 moveBg이고, 개발자가 그 이름을 호출할때까지는 절대로
실행되지 않는다. 즉 불러야 일한다!!
*/
var x=0; // 자바스크립트 에서는 변수 선언시 var라는 키워드를 사용함(variable==변수)
function moveBg(){
    x = x -1; //기존 x 에 -10을 누적해서 다시 x에 대입!!
    console.log("변수 x값은 ", x);

    //alert('나 불렀어?');
    //문서내의 wrapper라 불리는 요소의 배경을 x축의 음수방향으로 이동시키자!!
    document.querySelector("#wrapper").style.backgroundPosition=x+"px  0px";
}

//우측으로 이동함수 정의
var a=50;
function moveRight(){
    a = a+5;
    //문서내의 hero라는 요소의 style 시트 중 left값을 증가시키자!!
    document.querySelector("#hero").style.left=a+"px";
}

//수동으로 하지 말고, 자동으로  moveBg를 나 대신 호출해주는 기능이 있다면?
//자동이라 할 수 있다..
function gameLoop(){
   //자바스크립트가 스스로 moveBg를 호출 
   setInterval("moveBg()", 10);       //1000분의 1초로 표현가능
}
</script>
</head>
<body>
    <div id="wrapper">
        <img src="../image/ironmanFly.png" id="hero">
    </div>
    <!-- 이벤트 핸들러란? 해당 이벤트가 발생했을때 어떤 자바스크립트 코드를 작성할지
    결정할 수 있는 해들러 
    프로그래밍 언어에서는 단어와 단어가 조합이 되면, 뒷 단어의 첫 철자를 낙타등으로
    표기하는 습관이 있다..
    -->
    <button onClick="moveBg();">배경 수동으로 움직이기</button>
    <button onclick="gameLoop()">auto</button>
    
    <button>좌</button>
    <button onClick="moveRight()">우</button>
    <button>위</button>
    <button>아래</button>

</body>
</html>

 

 

'Front-end > javascript' 카테고리의 다른 글

onsubmit: form 전송 전 검증 방법  (0) 2022.06.08
'Front-end/javascript' Related Articles more
Comments