2019-09-22JavaScript4 minutes read (About 614 words) 0 visits

Image sprite, Dictionary자료구조, setInterval(fuction(){},100), find VS findindex VS indexOf, Object.entries(객체), or연산자를 [].includes()로

웹 게임을 만들며 배우는 JS : 가위바위보
Image sprite, Dictionary자료구조, setInterval(fuction(){},100), find VS findindex VS indexOf, Object.entries(객체), or연산자를 [].includes()로

1. 이미지스프라이트(Image sprite)

가위바위보게임을 만들기 위해 가위,바위,보 손가락 모양의 이미지가 필요하다.

흔히 이미지를 가위 하나, 바위 하나, 보 하나 총 3장이 있어야 된다고 생각하기 쉬운데~

땡!!!

가위바위보가 다 그려져있는 한 장의 이미지를 가지고 표현할 수 있다.

이것을 이미지스프라이트라고 한다

<head>
    <style>
        #computer {
            width : 273px;   
            height: 350px;
            background :url("가위바위보.jpeg") no-repeat;
            background-position: -273px 0; 
            //각각 왼쪽부터 x축과 y축의 좌표. x축의 좌표를 변경하여 한장으로 가위,바위,보를 각각 나타낼 수 있다
        }
    </style>
</head>
<body>
    <div id="computer">
        <img src="" alt="">
    </div>
</body>

2. Dictionary 딕셔너리자료구조

//딕션너리자료구조
var dictionary = { //딕셔너리자료구조
    바위 : ['0', '바위', 'rock'] //1대 多 구조 가능
    보 : {
        한국어 : '보',
        영어 : 'paper',
        값 : '0'
    } //배열,객체 구조도 가능. 다국어 지원시 용이
};

3. setInterval(fuction(){},100)

setInterval(function(){
    if(컴퓨터의선택 === dictionary.바위){
        컴퓨터의선택 = dictionary.가위;
    }else if(컴퓨터의선택 === dictionary.가위){
        컴퓨터의선택 = dictionary.보;
    }else {
        컴퓨터의선택 = dictionary.바위;
    }
    document.querySelector('#computer').style.background = 
    "url('가위바위보.jpeg') "+ 컴퓨터의선택 + ' 0';
}, 100) //0.1초마다 반복 실행

setInterval과 setTimeout 차이점

setInterval n초마다 반복실행(인터벌은 간격을 뜻하니까)

setTimeout n초에 한번실행 후 종료

4. find VS findindex VS indexOf

차이점은 indexOf는 1차원배열에 쓰고, find또는findindex는 2차원배열에 쓴다

find반복문이지만 지정된 값을 찾으면 반복문 자동 종료

findindex는 2차원배열의 인덱스값(몇번째인지)을 알려준다

5. Object.entries(객체)

Object.entries(객체)는 객체를 배열로 바꾸어준다.

var dictionary = { //딕셔너리자료구조
    가위 : '-255px',
    바위 : '0',
    보 : '-535px'
};

console.log(dictionary);
// {가위: "-255px", 바위: "0", 보: "-535px"}

console.log(Object.entries(dictionary));
// (3) [Array(2), Array(2), Array(2)]
// 0: (2) ["가위", "-255px"]
// 1: (2) ["바위", "0"]
// 2: (2) ["보", "-535px"]

2차원 배열인 [key, 값(value)] 로 만들어진다

6. or연산자를 [].includes()로 나타내기

1
2
3

if (결과 === -1 || 결과 === 2 ){
 console.log('이겼습니다!!')
}

위의 or연산자를 [].includes() 간단하게 나타낼 수 있다.

1
2
3

if([-1,2].includes(결과)){
  console.log('이겼습니다!!')
}

#TIL Web Game

Image sprite, Dictionary자료구조, setInterval(fuction(){},100), find VS findindex VS indexOf, Object.entries(객체), or연산자를 [].includes()로

1. 이미지스프라이트(Image sprite)

2. Dictionary 딕셔너리자료구조

3. setInterval(fuction(){},100)

4. find VS findindex VS indexOf

5. Object.entries(객체)

6. or연산자를 [].includes()로 나타내기

Catalogue

Categories

Recent

Archives

Tags

Advertisement