Enemy rain( DOM )

권기현·2020년 2월 11일

DOM

enemy rain:

*영웅을 조작하여 움직이는 유령들을 죽이는 게임

영웅을 이리저리 움직여야 하지만!

오늘은 캐릭터들이 움직일 필드와 영웅의 위치를 지정하여 넣고,

영웅의 위치를 좌우로 움직이되, 필드 밖으로 나가지 않게 하는 것까지의 기능을 구현하였다.

*먼저 정리하여야 하는 개념!

* DOM (Documnet Object Model)

DOM의 역할

DOM의 역할을 Document 즉, HTML과 JavaScript를 잇는 역할을 한다.

거꾸로 된 나무

위와 같은 구조로 HTML의 각 요소에 접근한다. 그래서 "거꾸로 된 나무" 라고도 불린다.

주의사항

: css의 class명과는 다르게 '-' (하이폰)을 사용하지 못한다.

따라서 camelCase 로 바꿔주는게 좋다.

enemy Rain의 HTML 코드

.
.
.
<body>
    <div id="bg" > 
      <div class="hero"  ></div>
      <div class="ghost"></div>
    </div>
  .
  .
  .
  </body>

실제로 쓰이는, 중요한 부분만 기입하였다.

enemy Rain의 CSS 코드


*{
    box-sizing: border-box;
}



#bg{
    width:800px;
    height: 600px;

    background-image: url("/images/bg.png");
     position: relative;
    margin: 250px auto 0;

}

.hero{
    width:35px;
    height: 54px;
    background: url("/images/hero.png");
    background-position-x: 140px; 
    position: absolute;
    left: 385.5px;
    bottom:0;
}

아직 'Ghost'에 대해서는 기능을 구현하지 못하였다.


const hero = document.querySelector('.hero');
let heroNow = hero.offsetLeft;
console.log(heroNow)


const fixel = 5; //언제는 쉽게 움직이는 픽셀값을 바꾸기 위하여 따로 변수로 지정하였다.

function moveLeft(){     //영웅을 왼쪽으로 움직이고, 필드의 왼쪽으로 나가지 않게 해주는 함수.
    if(heroNow < 10){
        return hero.style.left = 10 + "px";
    }else{
        heroNow = heroNow - fixel;
        hero.style.left = heroNow + "px";
    }
}

function moveRight(){      //moveLeft()의  오른쪽 버전의 함수.
    
    if(heroNow > 750){
        return hero.style.left = 750 + "px";
    }else{
        heroNow = heroNow + fixel;
        hero.style.left = heroNow + "px";
    }
}

function moveHero(){        //위의 두 함수를 왼쪽,오른쪽 방향키가 눌릴 때 작동하게 하는 함수
    window.addEventListener("keydown",function(e){
        let eCode = e.keyCode;
        if(eCode == 37) {
            moveLeft()
        }else if(eCode == 39){
            moveRight()
        }
    })
}

moveHero()