jQuery] 사이먼 게임 만들기 The Simon Game

먼저 기계에서 랜덤 컬러 하나가 선택된다.

사용자는 기계가 선택해 준 컬러를 클릭해야한다.

또 기계에서 랜덤 컬러 하나가 선택된다.

사용자는 첫번째 컬러와 방금 선택된 컬러, 두 개를 순서대로 클릭해야한다. 

 

또 기계에서 랜덤 컬러 하나가 선택된다.

사용자는 첫번째, 두번째 컬러와 방금 선택된 컬러, 세 개를 순서대로 클릭해야한다. 

계속 이렇게 진행되고 사용자가

기계에서 나온 순서와 다른 컬러를 선택하면 게임이 끝난다.

 

자바스크립트, 제이쿼리 이용해서 코드 짜기 

기계에서 랜덤 컬러 선택하기

✔️ 색이 들어가는 array를 하나만든다 -> buttonColours

✔️ 0~3 랜덤 숫자를 뽑아서 randomNumber에 담는다.

✔️ 나온 숫자로 buttonColours array에서 해당 컬러 뽑아낸 후 randomChosenColour에 저장한다.

✔️ gamePattern이라는 빈 array하나 만들고, buttonColours에서 뽑힌 컬러를 array에 입력해준다. 

// gamePatterns = colorButtons[randomNumber]; <- 이렇게 하면 안들어가나?

✔️ 선택된 버튼에 flash 효과가 나오게 한다. 선택은 id로 했다.

✔️ 선택된 버튼에 소리가 나게 한다. 

✔️ 이 과정을 함수에 담는다

 

 

 

 

유저가 클릭한 버튼들 저장하기

✔️ 맨 위에 사용자가 클릭한 내용 담을 빈 array 하나 만들기 

✔️ btn 클래스 중에서 마우스 클릭이 감지되면 

✔️ 클릭된 버튼의 해당 id를 뽑아서 userChosenColour 변수에 저장한다. 

✔️ 이 변수에 들어온 내용을 빈 array였던 userClickedPattern에 차곡차곡 저장한다.

 

 

 

오디오 파일 연결하기

✔️ 새 함수 만들어서 오디오 파일을 연결한다.

✔️ nextSequence()함수와 사용자 클릭한 내용에도 오디오 함수가 들어가서 

호출되게 한다. 

 

 

사용자가 버튼 클릭시 버튼에 css 효과주기 

✔️ 새 함수를 만들어 클릭한 버튼에 css효과가 들어가게 한다. 

✔️ 만든 함수를 사용자 클릭시 호출한다. 

 

 

게임 시작하기 

✔️ 게임을 시작하기 위해 아무 키나 누르면

nextSequence() 함수가 호출되어야한다. 

하지만 키 눌렀을 때 함수를 바로 호출해 버리면

게임 중간에 키 눌러도 레벨은 계속 업이 되는 에러가 발생하게 된다.

틀린 코드

 

✔️딱 시작할 때 한 번만 nextSequence() 함수가 호출 되어야 한다. 

그래서 started = false;로 세팅해 놓고 

조건문으로 if를 써서 (!started)를 물어보는데 왜 이렇게 하면 잘 작동하는지 아직 로직이 이해가지 않는다. 

 

var started = false; 

You'll need a way to keep track of whether if the game has started or not, so you only call nextSequence() on the first keydown. 

✔️ 키 누름이 감지되면 nextSequence()함수를 부른다. 

 

 

✔️ Level이 0에서 1로 되어야 한다. 

그래서 level은 기본 0으로 세팅해준다. 

nextSequence()함수가 호출될 때는 레벨이 올라갔을 때니 level을 1씩 높여준다. 

텍스트도 변경해준다. 

 

 

 

 

유저가 누른 버튼 순서와 기계에 입력된 순서 같은 지 확인하기 

 

✔️함수를 하나 만든다. 

✔️if문을 이용해 gamePattern 변수에 마지막으로 저장된 색과 

userClickedPattern 변수에 마지막으로 저장된 색이 같은지 확인한다. 

 

그러려면 인덱스 번호를 알아야하는데

(".btn").click(function() 이 쪽에 가서 인덱스 번호를 받아와야한다. 

userClickedPattern 안에 든 아이템 갯수에서 인덱스는 0부터 시작하니 -1을 하면 마지막 인덱스 번호가 된다. 

 

✔️ checkAnswer() 함수에 이 인덱스 번호를 받을 인풋을 하나 만들어준다. 

✔️그리고서 if문을 만들어 최근 유저가 클릭한 색이 gamePattern에 있는 색과 같으면 log로 "seccess"를 다르다면 "wrong"을 써준다. 콘솔에 잘 나오면 내용을 지운다

 

 

✔️ 유저가 클릭한 색과  gamePattern에 있는 색 갯수가 같다면 다음 단계로 넘어간다. 

다음 단계 넘어가는 것은 nextSequence()함수를 1초뒤 호출하는 것이다.

 

✔️ nextSequence()함수가 트리거되면 userClickedPattern은 리셋이 되어 빈 array로 만들어 줘야한다.

array에 클릭한 아이템이 남아 있으면 다음 단계에서 클릭시 바로 틀렸다고 나온다.

array를 비우고 처음부터 새로 눌러야한다.

 

 

 

유저가 틀렸을 경우

 

✔️ wrong 사운드를 재생해준다. 

유저가 틀린 경우는 else이므로

else에서 인풋을 "wrong"으로 넣어 playSound()함수를 호출해준다. 

 

✔️ css에 있는 game-over클래스를 잠깐 켰다 꺼준다. 

body에 클래스 추가해서 전체 배경이 빨간색이 되게 한다.

 

✔️ H1 텍스트를 변경해 준다. id #level-title을 사용하였다. 

✔️ startOver() 함수를 호출해 준다. 

 

 

다시 처음으로 리셋 / startOver 함수 만들기 

startOver() 함수를 만들어서 

레벨 0으로, gamePattern에 든 아이템을 비운다.

started를 false로 바꿔준다.그래야 키 눌렀을 때 다시 처음부터 시작이됨. 왜 false로 하는지 이해는 안됨

 

 

 

---

JS

var buttonColours = ["red", "blue", "green", "yellow"];

 

var gamePattern = [];

var userClickedPattern = [];

 

var started = false;

var level = 0;

 

$(document).keypress(function() {

if (!started) {

$("#level-title").text("Level " + level);

nextSequence();

started = true;

}

});

 

$(".btn").click(function() {

 

var userChosenColour = $(this).attr("id");

userClickedPattern.push(userChosenColour);

 

playSound(userChosenColour);

animatePress(userChosenColour);

 

checkAnswer(userClickedPattern.length - 1);

});

 

function checkAnswer(currentLevel) {

 

if (gamePattern[currentLevel] === userClickedPattern[currentLevel]) {

if (userClickedPattern.length === gamePattern.length) {

setTimeout(function() {

nextSequence();

}, 1000);

}

} else {

playSound("wrong");

$("body").addClass("game-over");

$("#level-title").text("Game Over, Press Any Key to Restart");

 

setTimeout(function() {

$("body").removeClass("game-over");

}, 200);

 

startOver();

}

}

function nextSequence() {

userClickedPattern = [];

level++;

$("#level-title").text("Level " + level);

var randomNumber = Math.floor(Math.random() * 4);

var randomChosenColour = buttonColours[randomNumber];

gamePattern.push(randomChosenColour);

 

$("#" + randomChosenColour).fadeIn(100).fadeOut(100).fadeIn(100);

playSound(randomChosenColour);

}

 

function animatePress(currentColor) {

$("#" + currentColor).addClass("pressed");

setTimeout(function() {

$("#" + currentColor).removeClass("pressed");

}, 100);

}

 

function playSound(name) {

var audio = new Audio("sounds/" + name + ".mp3");

audio.play();

}

 

function startOver() {

level = 0;

gamePattern = [];

started = false;

}

---

다른 학생이 짠 코드 - 선생님이 만든 것보다 더 간단하게 만들었음