aac063eef02bb1f9674bf510c84312c2.jpg

game

  • 백그라운드 이미지 가운데에 넣기

    #bg {
    position: absolute; 
    // 포지션 부모에 굳이 relative라고 명시해 주지 않아도 자식은 자연스럽게 바디의 포지션에 들어감
    left: 280px; 
    // div의 기준은 왼쪽 끝 부터 시작되기 때문에 left에 값을 줘서 옆으로 옮김
    top: 10px;
    // 위와 마찬가지로 가운데 오게 하려고 값을 줌
    //display: inline-block; 
    // div에 인라인 블록을 넣어서 div를 움직이게 함.에 인라인 블록을 넣어서 div를 움직이게 함.  근데 div면 인라인블록 안해도 된다고...-ㅅ-
    width :900px;
    // div의 위 아래 값을 줌 현재 백그라운드 이미지를 div에 줬기 때문에 그 자체 그림 사이즈를 조절
    height :600px;
    background-image: url("images/bg.png");
    background-repeat: no-repeat;
    }
  • 용사 정면모습으로 가운데에 넣기

    #hero {
      display: inline-block; 
    // 내가 span으로 줘서 인라인블록 해주어야함. span은 내용값만 잡히기 때문에 inline기능을 block해주어야함
    
      width: 35px; 
      height: 53px;
    //width &height는 용사의 크기. span은 inline-block태그여서 너비/높이가 있어야함
    
      background :url("images/hero.png") 0 0;
    //뒤에 0 0은 가로세로가 있어야 이미지를 갖고와서 보임 
    
      position: absolute;
    // 용사 움직이게 하고싶어서 absolute줌
    
      left : 330px;
    // 왼쪽 끝에 붙어있어서 가운데로 옮기려고 내림
    
      bottom : 0;
    //그라운드 바닥에 붙어있게 하려구
    `
  • 방향키 먹였을 때 움직이게하기

    let heroes = document.querySelector(".hero");
    let heroPo = 380;
    //용사가 중앙에 있어도 컴퓨터는 용사가 어디에 있는 지 모르기 때문에 변수 이용해서 알려주어야 함. 
    
    window.addEventListener("keydown", function(e){
    // (e)는 key down의 매개변수.
    // console.log(e.target.keyCode)
    : 콘솔로 찍어보면 그 매개변수의 값이 보임
    
      if (e.keyCode === 37) {
    //참고로,  매개변수 +".keycode" 하면 키코드 값을 불러오는 것
          heroPo = heroPo-1;
    // 위의 heroPo 값을 다시 줌. 왜냐하면 380인 채로 계속 있으면 용사가 -1만 한번 움직이고 움직여지지않음. 380에서 -1뺀 만큼에서 계속 움직여야 하는 데 위의 변수를 다시 정의해주지 않으면 다시 380에서 시작하기 때문.
          heroes.style.left= heroPo +"px";
      } 
      else if(window.event.keyCode === 39){
          heroPo = heroPo+1;
    
          heroes.style.left= heroPo +"px";
      }
    // style.right로 했더니 안움직여져서 이유를 보니, 내가 css에서 용사를 움직일 때 left만 주어져서 right가 먹지 않음. 
    그래서 left를 기준으로 +1되는 뜻임.
    })

    =>upgrade!!
    용사가 background밖으로도 막 나감...

 let heroes = document.querySelector('.hero');
 //console.dir(heroes)
 let heroPo = 380;

 window.addEventListener("keydown", function(x){
 //console.dir(x)

    if (x.keyCode === 37 ) {
//if문 안의 if문. 눌렀을 때 왼쪽으로 갔는데 어디까지 갈거야?
if문 밖에서 if를 돌리면 이게 먹히지 않음 이 if문안에서 움직여야 움직이면서 제어가 됨. 밖이엿으면 또다른 if문이 별도로 돌뿐
    if (heroPo > 0) {
//착각했던게 난 이미 포지션을 주어졌기 때문에 0과 380에서 전체 화면을 뺀 길이만큼 주어야한다고 생각했는 데 그게 아니었음
저 비교 연산자 뒤에는 용사가 가야할 장소만큼의 숫자를 담는 것 
그래서 0부터 시작한거고.. 
        heroPo = heroPo - 10;
        heroes.style.left= heroPo +"px";
    }}
    if(x.keyCode === 39){
        if (heroPo < 760) {
        그대신 여기서 800 이 아닌건 용사 사이즈가 35인데 800으루 하며녀 용사(+35) 한 835만큼 나가게 되서 결국 백그라운드 밖으로 나감
        heroPo = heroPo + 10;
        heroes.style.left= heroPo +"px";
    }}
    그리고 if(x.keyCode === 39){
        if (heroPo < 760)를 
        if(x.keyCode ===39 && heroPo <760) 이렇게도 됨.

})
  • 귀신아 나와랏

let ghostes = document.createElement("div");
ghostes.className = "ghost";

let parentBg = document.getElementById("bg");
// parentBg.appendChild(ghostes);//괄호안에 따옴표 xxxx!!!!!! 넣으면 고스트 텍스트를 넣은것 까먹지맙



function ghostRandom (min, max) {
//랜덤함수의 중간값을 구하는 식 외워야함...
왜냐면 귀신이 랜덤한 위치에서 시작해야함.
    var ghostR = Math.floor ( Math.random () * (max - min + 1 ) ) + min;
    return ghostR;
}
let a = ghostRandom (0,785);
// ghostRandom(); => let a = ghostRandom()으로. 
해당 함수를 받을 변수 만들어야..
console.log(a);
//그리고 랜덤함수의 랜덤수가 나옴

ghostes.style.left = a+"px";
//style사용시에 꼭 스트링 넣어주기
parentBg.appendChild(ghostes);
//괄호안에 따옴표 xxxx!!!!!! 넣으면 고스트 텍스트를 넣은것 까먹지맙. 
그리고 순서를 내린 이유는 appendchild 하기 전에 
style 레프트주고 appendchild해야함..


let ghostC = 0; 
// 초기 귀신 위치 설정이 top=0이었고 재정의
function ghostRain() {
    if ( ghostC < 501 ){
    ghostC = ghostC +50;
    ghostes.style.top = ghostC +"px";
    }
}
setInterval (ghostRain, 500);
//밖에서 해당 함수 호출하여 인터벌 하게 나오게함
  • 귀신내려오는 중
    스크린샷 2019-10-05 오후 2.14.57.png

:: 뭔가 신기해. 뭔가 만들어내고 있는 것 같아서 기분도 묘하고...
되게 단순해 보이는 데 저렇게 이미지를 띄우고 움직이게 하는 데까지 얼마나 어려운지..
정말 공부해보지 않은 사람들은 모르겠구나
나도 모르고 있었으니까.