(javascript) 랭킹 시스템을 만들어보자!

예흠·2020년 6월 28일

javascript를 배워보자

목록 보기

4/5

안녕하세요! 오늘은 랭킹 시스템을 구현해 보려고 해요!
이거 하느라고 진짜 고생했어요...
자 한번 파해쳐 볼까요?

먼저 코드를 살펴보고 하나하나 차근차근 봅시다

* 랭킹 함수를 만들어보자!!

function ranking(count, name) {
    var nameAndCount = {
        name: name,
        count: count
    };
    nameAndCountArray.push(nameAndCount);
    nameAndCountArray.sort(NumberCompare);
    var rankingElem = document.getElementById("ranking");
    var printArray = [];
    for (var i = 0; i < nameAndCountArray.length; i++) {
        if (i >= 5) {
            break;
        }
        printArray.push((i + 1) + '등 : ' + nameAndCountArray[i].name + " " + nameAndCountArray[i].count + '회');
    }
    rankingElem.innerHTML = printArray.join("<br/>");
}
function NumberCompare(a, b) {
    return a.count - b.count;
}

자... 모르는 코드들이 많이 생겼습니다. 일단저는 ranking이라는 함수를 하나 만들었습니다.

* var name{ } 오브젝트

자 여기서 왜 굳이
var nameAndCount = {
name: name,
count: count
};
이런식으로 오브젝트를 만들었냐면 등수를 표현할때 이름과 횟수는 같이 나와야 하고
횟수로 등수를 매겨야 하기에 nameAndCount.count 이런식으로 사용을 하기 위해서 오브젝트를 사용했습니다.

* .push()

javascript에서 .push()는 배열에서 맨 마지막에 추가하고자 하는 것을 추가해 주는 것입니다.
예를들어

array = {'a', 'b', 'c'}
array.push('d');

그러면 array라는 배열에 d값이 마지막에 추가가 되는 것 입니다.

* .sort()

이 문법은 정렬을 해주는 문법입니다!
근데 그냥 저렇게 .sort()를 쓰면 안됩니다.. 어떻게 배열할건지를 넣어줘야하죠! 그래서 아래에 함수를 또 넣어줬습니다.

function NumberCompare(a, b) {
    return a.count - b.count;
}

이 함수가 의미하는 바는 a - b 가 음수일 경우에 a가 b보다 작고 0이면 같다는 의미 입니다.
sort메소드는 return값이 음수인지 양수인지 0인지에 따라 순서를 정합니다.

따라서 위의 예제는 값이 작은 순서대로 정렬을 하는 것 입니다.

* for 반복문 사용!

자 코드를 보겠습니다.

for (var i = 0; i < nameAndCountArray.length; i++) {
        if (i >= 5) {
            break;
        }
        printArray.push((i + 1) + '등 : ' + nameAndCountArray[i].name + " " + nameAndCountArray[i].count + '회');
    }

반복문을 이용해서 1등부터 최대 5등까지 표현을 할 수 가 있게 만들었습니다!
nameAndCountArray[i].name 는 이름을
nameAndCountArray[i].count 는 횟수를 표현해 줍니다.

* .join()

자 중요한 join() 메소드 입니다.

rankingElem.innerHTML = printArray.join("<br/>");

join() 메소드를 통해서 배열을 합칠수 있습니다!! 저 예시처럼
()괄호안에 "< br/>" 을 넣으면 배열사이사이에 "< br/>" 이 들어가
각 배열마다 줄바꿈을 할 수가 있습니다!

* boolean 을 이용하자

한가지 중요한 걸 빼먹었습니다.
정답을 맞춘다음에 또 정답 확인 버튼을 누르면 또 정답으로 인식이 되기 때문에
이것은 게임이 시작했냐 끝났냐로 구분 지을 수 있습니다.

바로 코드를 보죠!

var isGameRunning = true;

이렇게 isGameRunning 이라는 변수를 true로 한 것은 게임이 시작 되었다는 의미입니다.

이 변수를 아래 코드 처럼 맞는 곳에 넣어줍니다.
(일부러 코드를 다 넣었습니다 ㅜㅜㅠ)

function guess() {
    if (!isGameRunning) {
        alert('게임이 종료된 상태입니다. 재시작해주세요.');
        return;
    }
    var num1 = document.getElementById("user").value;
    if (num1 == "") {
        alert('숫자를 입력하세요');
    }
    else if (num1 == ran) {
        var area = document.getElementById("area");
        area.innerHTML = "정답입니다";
        document.getElementById("guesses").value = ("시도한 횟수는 " + (count) + "번 입니다.");
        var name = prompt('정답입니다! 이름을 입력하세요 : ');
        ranking(count, name);
        isGameRunning = false;
    }
    else {
        if (ran > num1) {
            document.getElementById("result").value = (num1 + "보다 큽니다.");
        }
        else {
            document.getElementById("result").value = (num1 + "보다 작습니다.");
        }
    }
    document.getElementById("guesses").value = ("시도한 횟수는 " + (count++) + "번 입니다.");
}
function gameReset() {
    isGameRunning = true;
    ran = Math.floor(Math.random() * 100 + 1);
    count = 1;
    document.getElementById("area").innerHTML = "";
    document.getElementById("result").value = "";
    document.getElementById("guesses").value = "";
    document.getElementById("user").value = "";
}