단순히 게시판에 있는 글자 배경을 순서대로 바꾸면서 역순으로 다시 색을 바꾸는 샘플 소스 코드를 작성하려다 이왕 만드는 거 슬롯머신 기능을 추가하고 당첨되는 내용을 추가하면 재밌을 것 같았습니다.
소스 코드의 흐름은 1부터 7까지 table 태그의 td 배경색이 변경되며 마지막에 멈춘 번호를 당첨 번호로 정하여 입력한 당첨 번호와 당첨 금액을 계산해서 보여주는 간단한 소스 코드입니다.
See the Pen Untitled by zzarungna (@zzarungna) on CodePen.
소스 코드에서 재밌는 부분은 animateRows 코드가 진행되며 조건에 만족할 때까지 다시 animateRows 자기 자신을 다시 호출해 조건에 맞을 때까지 한 칸씩 TD 태그의 색을 변경해 준다는 것입니다.
$(rows[index]).effect("highlight", { color: "rgb(255 62 130)" }, 200, function() { animateRows(index + 1, true, endTime, result); // 다음 행으로 재귀 호출 });
개인적으론 animateRows 함수 호출 시 4개의 매개 변수 중 마지막 매개변수는 함수로 전달해 준 뒤 소스 코드의 마지막 코드에서 전달받은 result 함수를 호출해 마지막 당첨 결과를 계산해 주는 부분이 꽤 흥미로웠던 것 같습니다.
animateRows(1, true, endTime, function(lastNumber) { // 슬롯 머신 애니메이션 종료 후 실행 if (parseInt(lastNumber) === slotNum) { const multiplier = Math.floor(Math.random() * 11) + 10; // 10배에서 20배 사이의 랜덤 값 const winnings = batNum * multiplier; alert(`축하합니다! 당첨되었습니다. 당첨금액은 ${winnings}원 입니다.`); } else { alert("아쉽지만 당첨되지 않았습니다."); } }); if (result) result(lastNumber); 마지막 코드에서 마지막 매개변수 함수 호출
재미 삼아 만들어본 코드이니 흥미 위주로 보시면 좋을 것 같습니다. 함수 매개 변수에 또 다른 함수를 사용하는 방식이 익숙하지 않은데 이번 기회에 사용해 봐서 좋았던 것 같습니다.