저번 시간에는 JS까지 활용하여 계산기를 구현해 봤습니다.
이번 글에서는 문자 퍼즐이란 페이지를 만들어 보겠습니다.
페이지를 열면 이렇게 위의 페이지가 나옵니다.
(참고로, 이번 코드는 JS를 중심으로 하기 때문에 CSS 디자인은 적용시키지 않았습니다.)
어떤 동작인지 대강 설명하자면, 저렇게 위에 원본 영단어가 표시되고(compare) 아래에는 그
영단어의 알파벳을 섞어 놓은 버튼들이 배치됩니다.
(저 버튼들은 눌러도 이벤트가 발생하지 않습니다.)
그리고 아래에 뒤집기, 왼쪽/오른쪽 밀어내기 버튼이 있는데 뒤집기 버튼은 앞뒤 알파벳들이
바뀌는 것이고 왼쪽/오른쪽 밀어내기는 왼쪽이나 오른쪽으로 알파벳들이 한 칸씩 이동하는
것입니다.
뒤집기 버튼부터 차례대로 눌러 본 결과입니다.
그리고 밑에 "일치하지 않습니다." 텍스트는 원본 단어의 알파벳과 버튼의 알파벳이 같지 않을 때 일치하지 않는다고
텍스트를 띄우고, 버튼의 알파벳이 같으면 "일치합니다." 라는 텍스트를 띄웁니다.
마지막으로 밑에 시간 표시는 페이지 로딩 후 0초부터 시작되어 계속 시간이 흐르는 것이고, 이는 나중에 3번
정답을 맞췄을 때 경과 시간을 표시하게 됩니다.
위에서 설명한 페이지 동작을 모두 JS에서 구현하게 되니 동작을 잘 기억해 주시고,
HTML 코드부터 보겠습니다.
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>단어 퍼즐 구현</title>
<style media="screen">
#btnContainer * {
margin: 5px;
font-size: 1rem;
}
</style>
</head>
<body>
<div id="allContainer">
<p id="restext">결과 표시 : </p>
<p id="word1">HELLO</p>
<div id="btnContainer"></div>
<button type="button" name="button" id="flipOver" onclick="swapcomp()">뒤집기</button>
<button type="button" name="button" id="pushOut" onclick="lshiftcomp()">왼쪽 밀어내기</button>
<button type="button" name="button" id="pushOut" onclick="rshiftcomp()">오른쪽 밀어내기</button>
<p id="comptext">일치합니다.</p>
<p id="time">0</p>
</div>
<script src="./mainJS.js"></script>
</body>
</html>
구성을 쭉 보면 전체 요소를 div 태그로 감싸고 있고 결과 표시와 원본 단어를 p 태그로 감싸고 있습니다.
여기서 안에 내용이 비어 있는 div 태그가 있는데, 이는 JS에서 원본 단어에 따라 알파벳 버튼을 추가해 주기 때문에
여기서는 id 값만 잘 기억하고 있으면 됩니다.
그 아래에는 뒤집기, 왼쪽/오른쪽 밀어내기 버튼이 있으며 이들은 onclick 속성으로 JS 함수를 호출하고 있습니다.
나머지 요소 또한("일치합니다" 텍스트, 시간 표시) p 태그로 감싸고 있습니다.
사실 거의 모든 작업이 JS에서 이뤄지기 때문에 여기서는 각 태그들의 id 값을 잘 보고 넘어가면 됩니다.
이제 JS 코드를 보겠습니다.
// 전역변수
//randomWord => 랜덤한 단어 3개가 담긴 배열
//correct => 정답을 맞춘 개수이자 현재 정답을 맞추고 있는 단어 배열의 위치를 동시에 뜻하는 변수
const randomWord = [];
let correct;
let starttime;
// ***기본 기능 함수***
//문제풀이 시작 후 경과 시간을 표시해 주는 역할
let startInterval = setInterval(updateTime, 50);
//btnContainer의 객체 반환
function getBtnContainer() {
return document.getElementById("btnContainer");
}
//word1 객체 반환
function getWord() {
return document.getElementById("word1");
}
//word1의 HTML 텍스트 반환
function getWordStr() {
return getWord().innerHTML
}
//현재 버튼의 텍스트와 위의 원본 텍스트(HELLO)와 비교하여 동일한지 판단하는 함수
function compStr() {
console.log(randomWord);
console.log(correct);
const comptext = document.getElementById("comptext");
const wordstr = getWordStr();
const btnContainer = getBtnContainer();
const btnAll = btnContainer.childNodes;
let compjudge = true;
for(let i = 0; i < btnAll.length; i++) {
if(btnAll[i].innerHTML !== wordstr[i]) {
compjudge = false;
}
}
if(compjudge) {
comptext.innerHTML = "일치합니다.";
if(correct < 2) {
document.getElementById("restext").innerHTML += " O ";
correct += 1;
collocateStr();
} else {
document.getElementById("restext").innerHTML += " O ";
let now = Date.now() - starttime;
alert("Good! Your record : " + (now / 1000) + " s");
clearInterval(startInterval);
}
} else {
comptext.innerHTML = "일치하지 않습니다.";
}
}
//해당 단어들 중 랜덤하게 단어 3개를 뽑아서 반환하는 함수
function randomstr() {
const words = "apple,linux,javascript,tutorial,code,baby,girlfriend,legend,compare,judgement".split(',');
const randnumarr = getRandNumArr(10);
//랜덤 단어 3개를 배열에 넣고 해당 배열 반환
randomWord.push(words[randnumarr[0]]);
randomWord.push(words[randnumarr[1]]);
randomWord.push(words[randnumarr[2]]);
}
//매개변수로 중복되지 않는 숫자 범위를 받아 해당 범위만큼 중복되지 않는 숫자 배열을 만들어 반환
function getRandNumArr(arraynum) {
const randomIndexArray = [];
//랜덤하게 버튼 문자를 배치하기 위한 중복되지 않는 범위의 랜덤 숫자 배열 생성
for (let i = 0; i < arraynum; i++) {
let randomNum = Math.floor(Math.random() * (arraynum));
if (randomIndexArray.indexOf(randomNum) === -1) {
randomIndexArray.push(randomNum);
} else {
i--;
}
}
return randomIndexArray;
}
//원본 문자에서 특정 기준으로 단어를 무작위로 섞어 버튼으로 배치하게끔 하는 함수
function shuffle(wordstr) {
const randarr = getRandNumArr(5);
for(let i = 0; i < randarr[0] + 3; i++) {
rshift();
}
for(let i = 0; i < randarr[1] + 3; i++) {
swap();
}
for(let i = 0; i < randarr[2] + 3; i++) {
lshift();
}
}
//뒤집기, 왼/오른쪽 밀어내기 버튼을 통해 원본 문자열과 동일시되었을 때 다음 단어 문자로 새롭게 배치하는 함수
function collocateStr() {
const btnC = getBtnContainer();
const word1 = getWord();
word1.innerHTML = randomWord[correct];
removeContainerChild(btnC);
for(let i = 0; i < word1.innerHTML.length; i++) {
let btn = document.createElement('button');
btn.innerHTML = word1.innerHTML[i];
btnC.appendChild(btn);
}
shuffle();
}
function removeContainerChild(btnContainer) {
while(btnContainer.hasChildNodes()) {
btnContainer.removeChild(btnContainer.firstChild);
}
}
function swap() {
const btnContainer = getBtnContainer();
const btnAll = btnContainer.childNodes;
const btnstr = [];
//문자열 배열에 기존 버튼의 텍스트 저장
for(let i = 0; i < btnAll.length; i++) {
btnstr.push(btnAll[i].innerHTML);
}
//문자 배열의 뒤쪽 문자를 꺼내와 버튼 요소(btnAll[i])의 앞쪽에 넣는다.
for(let i = 0; i < btnAll.length; i++) {
let loc = (btnAll.length - 1) - i;
btnAll[i].innerHTML = btnstr[loc];
}
}
//왼쪽 밀어내기 버튼 클릭 시 이벤트 함수(문자를 한 칸 옆으로 밀어낸다.)
function lshift() {
const btnContainer = getBtnContainer();
const btnAll = btnContainer.childNodes;
const btnstr = [];
//문자열 배열에 기존 버튼의 텍스트 저장
for(let i = 0; i < btnAll.length; i++) {
btnstr.push(btnAll[i].innerHTML);
}
//버튼 문자를 왼쪽으로 한 칸 밀어내고, 첫 번째 버튼의 문자는 마지막 버튼으로 가게 한다.
for(let i = 0; i < btnAll.length; i++) {
let loc = (i + 1) % btnAll.length;
btnAll[i].innerHTML = btnstr[loc];
}
}
//오른쪽 밀어내기 버튼 클릭 시 이벤트 함수(문자를 한 칸 옆으로 밀어낸다.)
function rshift() {
const btnContainer = getBtnContainer();
const btnAll = btnContainer.childNodes;
const btnstr = [];
//문자열 배열에 기존 버튼의 텍스트 저장
for(let i = 0; i < btnAll.length; i++) {
btnstr.push(btnAll[i].innerHTML);
}
//버튼 문자을 한 칸 오른쪽으로 밀어내고, 마지막 버튼의 문자는 첫 번째로 오게 밀어낸다.
for(let i = 0; i < btnAll.length; i++) {
let loc = (i + 1) % btnAll.length;
btnAll[loc].innerHTML = btnstr[i];
}
}
function updateTime() {
let now = Date.now() - starttime;
document.getElementById("time").innerHTML = (now / 1000) + " s";
}
// ***기본 기능 함수***
// ***html 요소와 연결된 함수들***
//화면 로딩 시 div 태그 영역에 버튼 5개 추가
window.onload = function() {
randomstr();
correct = 0;
starttime = Date.now();
collocateStr();
}
function swapcomp() {
swap();
compStr();
}
//왼쪽 밀어내기 버튼 클릭 시 이벤트 함수(문자를 한 칸 옆으로 밀어낸다.)
function lshiftcomp() {
lshift();
compStr();
}
//오른쪽 밀어내기 버튼 클릭 시 이벤트 함수(문자를 한 칸 옆으로 밀어낸다.)
function rshiftcomp() {
rshift();
compStr();
}
// ***html 요소와 연결된 함수들***
전체 코드입니다.
코드가 길어 각 기능별로 나눠서 설명하겠습니다.
// 전역변수
//randomWord => 랜덤한 단어 3개가 담긴 배열
//correct => 정답을 맞춘 개수이자 현재 정답을 맞추고 있는 단어 배열의 위치를 동시에 뜻하는 변수
const randomWord = [];
let correct;
let starttime;
// ***기본 기능 함수***
//문제풀이 시작 후 경과 시간을 표시해 주는 역할
let startInterval = setInterval(updateTime, 50);
//btnContainer의 객체 반환
function getBtnContainer() {
return document.getElementById("btnContainer");
}
//word1 객체 반환
function getWord() {
return document.getElementById("word1");
}
//word1의 HTML 텍스트 반환
function getWordStr() {
return getWord().innerHTML
}
먼저 전역 변수와 특정 값을 반환하는 get 함수들을 보겠습니다.
전역 변수에는 주석으로 설명되어 있듯이, randomWord 배열에 단어 3개가 들어갈 것이고 correct 변수는
정답 개수를 표시하는 number 값이 들어갈 것입니다.
starttime 변수는 뒤쪽에 페이지 로드 시점의 시간 값이 들어갈 변수이고, 밑에 startInterval 변수에 페이지
로딩 후 updateTime이라는 함수를 50ms 단위로 계속 호출하는 역할을 넣게 됩니다.
아래의 get 함수들을 보면 각각 랜덤 알파벳 버튼들을 감싸는 div 태그 객체의 반환, 원본 단어를 감싸는
p 태그 객체의 반환, 원본 단어 p 태그 안의 HTML 텍스트를 반환하는 함수들입니다.
// ***html 요소와 연결된 함수들***
//화면 로딩 시 div 태그 영역에 버튼 5개 추가
window.onload = function() {
randomstr();
correct = 0;
starttime = Date.now();
collocateStr();
}
function swapcomp() {
swap();
compStr();
}
//왼쪽 밀어내기 버튼 클릭 시 이벤트 함수(문자를 한 칸 옆으로 밀어낸다.)
function lshiftcomp() {
lshift();
compStr();
}
//오른쪽 밀어내기 버튼 클릭 시 이벤트 함수(문자를 한 칸 옆으로 밀어낸다.)
function rshiftcomp() {
rshift();
compStr();
}
// ***html 요소와 연결된 함수들***
그 다음 HTML 페이지와 관련 있는(이벤트 함수 등...) 코드들입니다.
보시다싶이 이벤트 함수들의 코드에는 단순히 위에 정의한 기능 함수들을 호출하는 역할을 하고 있습니다.
먼저 window.onload에 들어가는 함수는 웹 페이지가 로딩된 시점에 호출될 함수로써, 여기서는 randomstr()이라는
함수를 먼저 호출한 후 정답 개수(correct)를 0개로 설정하고 starttime 변수값에 Date.now() 함수를 사용함으로써
페이지가 로드된 시점의 시간 값을 담게 됩니다.
그리고 마지막으로 collocateStr()이라는 함수를 호출하게 되는데, 이 뒤에 이 함수들을 설명하니 지금은 어느
시점에 이 함수가 사용되는 것인지만 알아도 됩니다.
그 밑의 3개 함수는 뒤집기, 왼쪽 밀어내기, 오른쪽 밀어내기 버튼과 onclick으로 연결되어 있는 이벤트 함수들로,
이 역시 어떤 함수들이 호출되는지만 보면 됩니다.
먼저 페이지 로드 시 가장 먼저 호출되는 randomstr() 함수부터 차례대로 보겠습니다.
//해당 단어들 중 랜덤하게 단어 3개를 뽑아서 반환하는 함수
function randomstr() {
const words = "apple,linux,javascript,tutorial,code,baby,girlfriend,legend,compare,judgement".split(',');
const randnumarr = getRandNumArr(10);
//랜덤 단어 3개를 배열에 넣고 해당 배열 반환
randomWord.push(words[randnumarr[0]]);
randomWord.push(words[randnumarr[1]]);
randomWord.push(words[randnumarr[2]]);
}
//매개변수로 중복되지 않는 숫자 범위를 받아 해당 범위만큼 중복되지 않는 숫자 배열을 만들어 반환
function getRandNumArr(arraynum) {
const randomIndexArray = [];
//랜덤하게 버튼 문자를 배치하기 위한 중복되지 않는 범위의 랜덤 숫자 배열 생성
for (let i = 0; i < arraynum; i++) {
let randomNum = Math.floor(Math.random() * (arraynum));
if (randomIndexArray.indexOf(randomNum) === -1) {
randomIndexArray.push(randomNum);
} else {
i--;
}
}
return randomIndexArray;
}보면 words 변수에 제가 랜덤으로 선정한 10개 정도의 영단어들이 배열 형태로 들어가게 됩니다.
그리고 randnumarr 변수에는 getRandNumArr() 함수의 반환값을 넣게 되는데, 아래 함수의 코드를 보면
Math.random() 함수로 랜덤값을 뽑은 후 indexOf() 라는 배열에서 특정 값을 찾는 함수를 사용하여 현재
랜덤 값이 랜덤 값 배열에 이미 있는지 검사하여 없으면 배열에 넣게 됩니다.
결과적으로 getRandNumArr() 함수는 매개 변수로 예를 들어 10이라는 숫자를 넣으면 0~9 범위의 배열을 생성하여
0~9 사이의 중복되지 않는 랜덤 값 배열을 만들어 반환하는 함수인 것입니다.
그렇게 randnumarr 변수에는 10칸 크기의 0~9 사이의 중복되지 않는 랜덤 값 배열이 들어가게 되고, 그 중 1~3번째
랜덤 값을 인덱스로 사용하여 위의 10개 영단어 중에서 랜덤으로 3개 영단어를 뽑아 randomWord 전역 변수에
넣어 주게 되는 것입니다.
그 다음은 페이지 로드 함수에서 마지막에 실행되는 collocateStr() 함수를 보겠습니다.
//뒤집기, 왼/오른쪽 밀어내기 버튼을 통해 원본 문자열과 동일시되었을 때 다음 단어 문자로 새롭게 배치하는 함수
function collocateStr() {
const btnC = getBtnContainer();
const word1 = getWord();
word1.innerHTML = randomWord[correct];
removeContainerChild(btnC);
for(let i = 0; i < word1.innerHTML.length; i++) {
let btn = document.createElement('button');
btn.innerHTML = word1.innerHTML[i];
btnC.appendChild(btn);
}
shuffle();
}
function removeContainerChild(btnContainer) {
while(btnContainer.hasChildNodes()) {
btnContainer.removeChild(btnContainer.firstChild);
}
}이 함수의 역할은 위쪽의 원본 단어에 맞게 랜덤으로 알파벳 버튼을 생성하는 것으로, btnC 변수에는 알파벳 버튼들이
담길 div 태그의 객체를 담고 word1 변수에는 원본 단어를 감싸는 p 태그 객체를 담게 됩니다.
그리고 p 태그의 innerHTML 값으로 현재 정답 개수(correct)에 따라 랜덤 단어를 넣고 removeContainerChild 함수를
호출하게 됩니다.
아래에 있는 함수를 보게 되면 while 반복문을 돌며 현재 알파벳 버튼이 있다면(hasChildNodes()) 그 버튼들을 모두
지우는 역할의 함수입니다.
(정답을 맞춰 다음 랜덤 단어로 넘어가야 되는 상황이라면 그 전의 랜덤 알파벳 버튼들을 모두 지워야 하기 떄문에)
그리고 for 반복문을 돌며 createElement() 함수를 사용하여 버튼을 생성해 알파벳 버튼들을 추가해 준 뒤 알파벳
버튼들을 섞는 shuffle() 함수를 실행시켰습니다.
//원본 문자에서 특정 기준으로 단어를 무작위로 섞어 버튼으로 배치하게끔 하는 함수
function shuffle(wordstr) {
const randarr = getRandNumArr(5);
for(let i = 0; i < randarr[0] + 3; i++) {
rshift();
}
for(let i = 0; i < randarr[1] + 3; i++) {
swap();
}
for(let i = 0; i < randarr[2] + 3; i++) {
lshift();
}
}shuffle() 함수는 버튼을 무작위로 섞는 함수로, 완전히 무작위로 섞어 버리면 뒤집기와 왼쪽/오른쪽 밀어내기 버튼을
아무리 눌러도 정답을 절대 맞추지 못하는 상황이 있을 수 있으므로 각 기능 버튼 함수들을 랜덤으로 실행시켜
무작위로 섞여 보이게끔 함수를 동작시켰습니다.
이제 각 기능 버튼들의 함수와 모든 기능 버튼의 이벤트 함수에서 동일하게 호출되었던 compStr() 함수에 대해
알아보겠습니다.
function swap() {
const btnContainer = getBtnContainer();
const btnAll = btnContainer.childNodes;
const btnstr = [];
//문자열 배열에 기존 버튼의 텍스트 저장
for(let i = 0; i < btnAll.length; i++) {
btnstr.push(btnAll[i].innerHTML);
}
//문자 배열의 뒤쪽 문자를 꺼내와 버튼 요소(btnAll[i])의 앞쪽에 넣는다.
for(let i = 0; i < btnAll.length; i++) {
let loc = (btnAll.length - 1) - i;
btnAll[i].innerHTML = btnstr[loc];
}
}
//왼쪽 밀어내기 버튼 클릭 시 이벤트 함수(문자를 한 칸 옆으로 밀어낸다.)
function lshift() {
const btnContainer = getBtnContainer();
const btnAll = btnContainer.childNodes;
const btnstr = [];
//문자열 배열에 기존 버튼의 텍스트 저장
for(let i = 0; i < btnAll.length; i++) {
btnstr.push(btnAll[i].innerHTML);
}
//버튼 문자를 왼쪽으로 한 칸 밀어내고, 첫 번째 버튼의 문자는 마지막 버튼으로 가게 한다.
for(let i = 0; i < btnAll.length; i++) {
let loc = (i + 1) % btnAll.length;
btnAll[i].innerHTML = btnstr[loc];
}
}
//오른쪽 밀어내기 버튼 클릭 시 이벤트 함수(문자를 한 칸 옆으로 밀어낸다.)
function rshift() {
const btnContainer = getBtnContainer();
const btnAll = btnContainer.childNodes;
const btnstr = [];
//문자열 배열에 기존 버튼의 텍스트 저장
for(let i = 0; i < btnAll.length; i++) {
btnstr.push(btnAll[i].innerHTML);
}
//버튼 문자을 한 칸 오른쪽으로 밀어내고, 마지막 버튼의 문자는 첫 번째로 오게 밀어낸다.
for(let i = 0; i < btnAll.length; i++) {
let loc = (i + 1) % btnAll.length;
btnAll[loc].innerHTML = btnstr[i];
}
}함수 코드에서 값들이 살짝 다르고 구조는 비슷하기에 한 번에 가져왔습니다.
먼저 변수 쪽을 보면 세 함수 모두 알파벳 버튼을 감싸는 div 태그 객체를 가져오고, 해당 div 태그 안에 있는
모든 버튼 객체들을 가져와 btnAll 변수에 배열 형태로 담게 됩니다.
그리고 버튼들의 텍스트 값만을 담을 btnstr 변수를 선언합니다.
그 다음 btnstr 배열에 for 반복문을 돌며 현재 알파벳 버튼들의 텍스트 값(innerHTML)을 가져와 배열에 넣게 됩니다.
이제 함수 밑에 있는 for 반복문의 코드를 통해 동작이 달라지게 되는데, swap 함수는 loc 변수값을 버튼 맨 뒤의
위치로 설정하여 i 변수값은 처음부터, loc 변수값은 마지막부터 시작하여 앞뒤로 서로 바꾸게 됩니다.
그리고 lshift() 함수와 rshift() 함수는 loc 변수값을 동일하게 (i+1) % btnAll.length 값으로 줬는데, 나머지 연산자를
사용한 이유는 왼쪽이나 오른쪽 밀어내기 할 때 양쪽 끝에 있는 값은 배열 범위를 벗어나지 않고 다시 반대쪽
끝으로 위치해야 하기 때문에 나머지 연산자를 활용했습니다.
그리고 두 함수의 동작 차이를 i 값과 loc 값의 인덱스 값을 반대로 활용하여 기능하도록 했습니다.
function updateTime() {
let now = Date.now() - starttime;
document.getElementById("time").innerHTML = (now / 1000) + " s";
}아까 위쪽에서 setInterval로 계속 호출하며 시간을 표시하도록 한 updateTime() 함수입니다.
now 변수에 이 함수가 호출될 시점의 시간값(Date.now())과 처음 페이지가 로드된 시점의 시간값을 뺀 차이를
넣어 주고 해당 값을 시간을 표시하는 p 태그 객체에 텍스트로 넣어 주게 되는데 1000으로 나눈 값으로
소수점 3자리까지만 표시하게 합니다.
그렇게 updateTime 함수는 setInterval 함수를 통해 50ms 단위로 계속 호출되기 때문에 시간이 흐르는 것을
우리 눈으로 볼 수 있게 되는 것입니다.
//현재 버튼의 텍스트와 위의 원본 텍스트(HELLO)와 비교하여 동일한지 판단하는 함수
function compStr() {
const comptext = document.getElementById("comptext");
const wordstr = getWordStr();
const btnContainer = getBtnContainer();
const btnAll = btnContainer.childNodes;
let compjudge = true;
for(let i = 0; i < btnAll.length; i++) {
if(btnAll[i].innerHTML !== wordstr[i]) {
compjudge = false;
}
}
if(compjudge) {
comptext.innerHTML = "일치합니다.";
if(correct < 2) {
document.getElementById("restext").innerHTML += " O ";
correct += 1;
collocateStr();
} else {
document.getElementById("restext").innerHTML += " O ";
let now = Date.now() - starttime;
alert("Good! Your record : " + (now / 1000) + " s");
clearInterval(startInterval);
}
} else {
comptext.innerHTML = "일치하지 않습니다.";
}
}
마지막으로 모든 기능 버튼의 이벤트 함수에서 호출되었던 compStr() 함수입니다.
이 함수의 역할은 함수가 호출된 시점의 알파벳 버튼의 배치가 원본 단어의 알파벳 배치와 같은지 검사하는 함수입니다.
먼저 comptext 변수에 "일치합니다." 또는 "일치하지 않습니다." 텍스트를 표시할 p 태그 객체를 담고 wordstr 변수에는
현재 원본 단어의 텍스트를 가져와 넣습니다.
btnContainer 변수에는 랜덤 알파벳 버튼들을 감싸는 div 태그 객체를 가져와 넣고 btnAll 변수에는 알파벳 버튼 객체로
이뤄진 배열을 넣습니다.
마지막으로 compjudge 변수는 원본 단어와 알파벳 버튼의 배치가 동일한지 판단하는 boolean 변수로 true면 동일,
false면 동일하지 않다는 표시입니다.
for 반복문을 돌며 원본 단어와 알파벳 버튼의 배치가 완전히 동일한지 검사하고 배치가 동일하지 않은 곳이
한 곳이라도 있을 시 compjudge 변수값을 false로 바꿉니다.
그 후 if 조건문으로 배치가 완전히 동일하다면 "일치합니다." 텍스트로 바꾼 후 현재 정답 개수가 3개 이하라면
"결과 표시 : " 텍스트에 O 텍스트를 추가하고 정답 개수 변수값을 1 늘린 후 collocateStr() 함수를 호출하여
다음 랜덤 단어로 넘어가게 합니다.
만약 정답 개수가 3개 이하가 아니라면, 즉 정답을 3번 맞춰 페이지 동작을 끝내야 한다면 정답을 맞춘 시점까지
걸린 시간(now)값을 구하여 alert 창으로 경과 시간을 표시한 후 clearInterval() 함수로 시간이 흘러가는 것을
멈추게 합니다.
이렇게 3번 정답을 맞춘 후에는 시간도 흐르지 않는 것을 볼 수 있습니다.
JS 코드 설명은 여기까지입니다.
긴 글 읽어 주셔서 감사합니다.
'기타 이야기 > 공부 이야기' 카테고리의 다른 글
| 공부 과정 기록07_노마드코더 시청 후 제작 페이지 코드 설명_로그인과 회원가입(03_01) (0) | 2022.08.22 |
|---|---|
| 공부 과정 기록07_노마드코더 시청 후 제작한 페이지 소개(02) (0) | 2022.08.19 |
| 공부 과정 기록06_JS 활용 페이지 만들어보기(01) (0) | 2022.08.17 |
| 공부 과정 기록05_w3school 문서 (0) | 2022.08.17 |
| 공부 과정 기록04_생활코딩 JavaScript 강의 (0) | 2022.08.16 |
댓글