먼저 기계에서 랜덤 컬러 하나가 선택된다.
사용자는 기계가 선택해 준 컬러를 클릭해야한다.
또 기계에서 랜덤 컬러 하나가 선택된다.
사용자는 첫번째 컬러와 방금 선택된 컬러, 두 개를 순서대로 클릭해야한다.
또 기계에서 랜덤 컬러 하나가 선택된다.
사용자는 첫번째, 두번째 컬러와 방금 선택된 컬러, 세 개를 순서대로 클릭해야한다.
계속 이렇게 진행되고 사용자가
기계에서 나온 순서와 다른 컬러를 선택하면 게임이 끝난다.
자바스크립트, 제이쿼리 이용해서 코드 짜기
기계에서 랜덤 컬러 선택하기
✔️ 색이 들어가는 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로 하는지 이해는 안됨
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;
}
다른 학생이 짠 코드 - 선생님이 만든 것보다 더 간단하게 만들었음
'Java Script > Jquery' 카테고리의 다른 글
jQuery] 애니메이션 효과 (0) | 2021.09.07 |
---|---|
jQuery] elements 추가, 삭제하기 (0) | 2021.09.07 |
jQuery] eventListener 추가하기 / on( ) / loop 하는 법 (0) | 2021.09.05 |
jQuery] attributes 변경하기 (0) | 2021.09.03 |
jQuery] 텍스트 변경하기 (0) | 2021.09.03 |
댓글