Westagram review✨ & Enemy Rain 게임 만들기📍

westagram 구현하면서 짚고 넘어갈 포인트

1. 단위 vh/vw

height : 100vh
width : 100vw

-기존 전체 css에 적용하는 body 값을 %가 아닌 vh로 적용함으로서 반응형웹같은곳에서 편리하게 쓰인다고 해서 앞으로 많이 접목 해야겠다.

2.속성 적는 순서☝🏼

-꼭 이거다는 아니더라도 중요한 순서대로 attributes를 기입한다.
예를들어 이미지 태그라면, 이미지를 선택할 태그, 정보를 담는 alt가 중요하니 앞에 넣도록 한다.

<img class="" alt="" src="">
속성 위치는 class alt src 순서 이미지

3.img 삽입할때 img tag vs div tag💁

• 검색에 걸리게 하려면 이미지 태그를 사용한다.
• 정보전달의 이미지가 아닌 디자인적 이미지라면 div에 background url로 이미지를 적용한다.
  
  

4. 삼항연산자

-if 문이 많이 쓰여서 지저분한 코드를 깨끗하게 만들어줄 삼항연산자를 적.극 활용한다.

A ? B : C

• A이면 B 이고 아니면 C이다

    id.value && pw.value
      ? (btn.style.backgroundColor = "red")
      : (btn.style.backgroundColor = "yellow");
  btn.style.backgroundColor = id.value && pw.value ? "red" : "yellow";
});

5. A tag 무력화

-어차피 style을 따로 입혀야 하는 a tag는 css 파일 위에 none해주는 css 코드를 입력해서 전체 파일에 적용되게 한다.

6.Keyboard 효과

-입력값은 얼마, 혹은 하나 입력하면 얼마 이런 정확한 계산이 필요한경우, keydown이 아니라 key up 사용해야한다.

자바스크립트 게임만들기 진행된 부분 정리☂

1. 캐릭터가 배경의 아래 정중앙 위치 시키기

- 배경에 relative, 캐릭터에 absolute값 주고
- 캐릭터에 bottom :0 적용한 뒤
- left :50% 왼쪽으로 50% 당겨주고
- 캐릭터의 width/2 값만큼 margin-left에 -값 적용하면 
- 완벽 중앙 정렬 가능 

  	left: 50%;
    	margin-left: -17.5px;

2. 키보드 좌우 버튼을 누르면 캐릭터가 맞춰서 좌우로 방향 틀기 (image sprite)

**css sprite**: 한페이지에 여러 이미지가 있고, 
positioning을 통해 필요한 이미지를 잘라 쓴다고 생각하면 됨

  
        if (e.key==="ArrowLeft") {
            myHero.style.backgroundPosition = "-70px 0px";
            // myHero.style.marginLeft=`${UpdatedCurrentPosition-1}px`
        }


        if (e.key==="ArrowRight") {
            myHero.style.backgroundPosition = "-105px 0px"
        }
})

3. 왼쪽오른쪽 키보드를 누르면 그 방향대로 가게 하기

const myHero = document.querySelector(".my-hero");


window.addEventListener("keydown", function (e) {

  
        if (e.key==="ArrowLeft") {
            myHero.style.backgroundPosition = "-70px 0px";
            const HeroPosition = (position) => {
               if (!position) {
                    return -17.5 
                }
          
                else if (position) {
                    return parseInt(position.slice(0,-2));
                }
            };


            const currentHeroPosition= HeroPosition(myHero.style.marginLeft);
            myHero.style.marginLeft = `${currentHeroPosition-1}px`
        }

        if (e.key==="ArrowRight") {
            myHero.style.backgroundPosition = "-105px 0px"
            const HeroPosition = (position) => {
                if (!position) {
                     return -17.5 
                 }

           
                 else if (position) {
                     return parseInt(position.slice(0,-2));
                 }
             };
 
 
             const currentHeroPosition= HeroPosition(myHero.style.marginLeft);
             myHero.style.marginLeft = `${currentHeroPosition+1}px`
        }
})

사실 아래와 같이 더 적용해 나가야할 event가 많은데... 그건 차차 생각해 보는걸로...🙄

3. setInterval/clearInterval 사용해서 하늘에서 유령 비를 랜덤하게 내리게 하기
4. 캐릭터와 유령이 만나면 피흘리게 죽게 하기
5. 캐맄터와 유령이 열번이상 만나면 게임 오버

 오늘은 깃허브 블로그를 만들었다! 
 잔디를 심기위해 차차 옮기는 준비를 해야겠다..
 (아마 붓캠끝나면?ㅎㅎㅎㅎ)