저번시간의 가위바위보게임에 이어 이번에는
1인 토이프로젝트로 틀린글자찾기라는 게임을 만들어보았습니다.
(https://myeongsu0257.tistory.com/143)
Javascript - 미니게임 프로젝트(가위바위보)
Javascript를 이용해 간단한 여러 프로젝트를 해볼려고합니다. 아직 실력이 미흡해서 프로젝트의 퀄리티가 부족할 수 있습니다. 이점 참고해주세요! 게임설명 컴퓨터와 가위바위보 할 수 있습니다
myeongsu0257.tistory.com
먼저 만든화면입니다.
아직 css 부분은 많이 공부하지 않았기도하고 이번 프로젝트의 목표가 js에 익숙해질려고 진행하였기 때문에 디자인은 별로 좋지않습니다.
이후에 js에 익숙해지고 css를 공부하여 다시 한번 더 프로젝트를 꾸밀 생각입니다!
게임설명
- 여러개의 동일한 글자 중 한개만 다른 글자를 찾아야합니다.
- 글자를 찾을때마다 score 점수가 1점상승하고 정답 글자가 초기화되어 랜덤으로 다시 나타나게 됩니다.
- 5번을 성공하면 게임이 종료됩니다. 대신 틀릴때마다 1점감소하게 됩니다.
프로젝트 진행하면서 겪은 문제점
1. 배열에 값을 담아 화면에 출력
제가 생각했던 목표입니다.
- 배열에 글자값 담기, 배열의 특정 index에 하나만 잘못된 값 담기
- 배열에 값 화면에 출력
글자들을 배열에 담고 랜덤 특정 index에 잘못된 값을 넣기까지는 성공하였으나
배열의 글자들을 화면에 출력하는 과정에서 많이 해맸습니다.
처음에는 document.write()로 값들을 출력하였으나 이렇게하면 글자만 동적으로 보여지고 나머지값들은 html에서 작성해야 하기때문에 이건 아니라고 생각하여 다시 코드를 작성했습니다.
그래서 textContent로 값들을 출력을하는데 위의 결과화면이미지처럼 8개의 글자가 나오고 줄바꿈을 하여 글자를 다시 출력해야하는데 이부분이 어려웠습니다. 단순히 개행문자를 넣어도 띄어쓰기만 되고 줄바꿈은 되지 않았습니다. <br>태그를 넣어보기도 하고 했지만 해결되지 않아 다른방법을 찾았습니다.
고민을 하던 중 이 게임의 목표가 애초에 글자들을 클릭하는 것이기때문에 글자를 클릭할려면 각 글자마다 고유의 공간? div같은 태그가 필요할거 같다는 생각을 했습니다.
그래서 html에서 해당 글자가 들어갈 부분의 태그를 미리 생성해주고 js에서 단어들을 생성해주었습니다.
2.이벤트생성,제거
제가 생각한 목표입니다.
- addEventListener()함수를 이용하여 글자를 클릭했을때의 이벤트 생성
- 정답일 경우 removeEventListener()함수를 이용하여 이전에 생성하였던 이벤트 제거
처음에 addEventListener()함수를 이용해 어떻게 이벤트를 생성하였나면 아래의 코드입니다.
저렇게 코드를 작성하니 이벤트생성은 잘되었지만 정답을 하고 다시 이벤트를 제거해주는 과정에서
이벤트가 제거되지 않았습니다.
function success(word)
{
word.addEventListener("click", ()=>{
alert("정답입니다");
score++;
...
})
}
function fail()
{
...
}
//글자마다 이벤트 생성
function makeevent()
{
for(let i=0; i<24; i++)
{
let word=document.getElementById("word"+i);
if(i==number)
{
success(word);
}
else
{
fail(word);
}
}
}
이유를 찾아보았습니다.
일단 addEventListener(), removeEventListener()함수를 보겠습니다.
element.addEventListener(type,eventListener), element.removeEventListener(type, eventListener)
두 함수 모두 2개의 파라미터를 입력받는데
- type : 이벤트타입
- eventListener : 이벤트가 발생했을 때 실행할 함수
두번째 매개변수에 함수를 넣어줘야하는데 저는 위의 코드처럼 화살표함수로 바로 함수를 적어주었고
제거할때는removeEventListener("click", success()); 처럼 해서 삭제가 안되었습니다.
그래서 sucess()함수 자체를 두번째 매개변수로 넣어주어 해결하였습니다.
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>다른 글자 찾기 게임</title>
<link rel="stylesheet" href="main.css">
</head>
<body>
<div class="stage" id="stage">
<div class="stagelevel" id="stagelevel">
</div>
<div class="word_area" id="word_area">
<div class="line1" id="line1">
<sapn id="word0"></sapn>
<sapn id="word1"></sapn>
<sapn id="word2"></sapn>
<sapn id="word3"></sapn>
<sapn id="word4"></sapn>
<sapn id="word5"></sapn>
<sapn id="word6"></sapn>
<span id="word7"></span>
</div>
<div class="line2" id="line2">
<sapn id="word8"></sapn>
<sapn id="word9"></sapn>
<sapn id="word10"></sapn>
<sapn id="word11"></sapn>
<sapn id="word12"></sapn>
<sapn id="word13"></sapn>
<sapn id="word14"></sapn>
<span id="word15"></span>
</div>
<div class="line3" id="line3">
<sapn id="word16"></sapn>
<sapn id="word17"></sapn>
<sapn id="word18"></sapn>
<sapn id="word19"></sapn>
<sapn id="word20"></sapn>
<sapn id="word21"></sapn>
<sapn id="word22"></sapn>
<span id="word23"></span>
</div>
</div>
<div class="score_area" id="score_area">
</div>
<div class="explain" id="explain">
게임설명<br>
틀린글자를 찾을때마다 1점이 올라가게 됩니다.<br>
총 5번을 맞추면 게임을 승리하게 됩니다.<br>
대신, 틀릴때마다 1점감소하게 됩니다.<br> 그럼 화이팅!
</div>
</div>
<script src="index.js"></script>
</body>
</html>
css
.stage{
display:flex;
/* 메인축의 방향을 세로로 */
flex-direction: column;
justify-content: center;
align-items: center;
}
.stagelevel{
font-size:40px;
}
.word_area{
padding:15px;
margin-top:40px;
font-size:30px;
border : 5px solid rgba(88, 105, 12, 0.258);
}
.score_area
{
font-size:35px;
margin-top: 20px;
color:rgb(249, 74, 74);
}
.explain{
margin-top:20px;
border:3px solid black;
}
javascript
let stagelevel = document.getElementById('stagelevel');
let scorearea = document.getElementById("score_area");
let score = 0;
let stagescore=0;
let number; // 랜덤으로 단어를 바꿔줄때 필요한 수의 인덱스 (0~23)
//초기 score, stagelevel 값 설정
scorearea.textContent="score : "+score+"점";
stagelevel.textContent="stage"+stagescore;
//html의 단어가 들어갈 자리에 단어 생성
function setword()
{
for(let i =0; i<24; i++)
{
let word = document.getElementById("word"+i);
word.textContent="멵";
}
}
//랜덤으로 단어 바꿔주는 함수
function changeword()
{
//난수생성(0~23)
number = Math.floor(Math.random()*24);
//console.log("바뀌는 숫자 인덱스 : "+ number);
let word=document.getElementById("word"+number);
word.textContent="멶";
}
//정답
function success()
{
//console.log("정답");
alert("정답입니다");
score++;
if(score==5)
{
alert("승리하셨습니다!");
score=0;
stagescore=0;
}
stagescore++;
//stage, score 값 재설정
scorearea.textContent="score : "+score+"점";
stagelevel.textContent="stage"+stagescore;
//새로운 값이 '멶'이되어야 하기 때문에 이전값 초기화
let word=document.getElementById("word"+number);
word.textContent="멵";
//이전이벤트제거 함수 실행
resetevent();
//다시 난수생성부터 함수실행
onecycle();
}
//틀림
function fail()
{
stagescore--;
//틀릴때마다 score 감소
score--;
scorearea.textContent="score : "+score+"점";
//console.log("틀림");
alert("틀렸습니다");
}
//글자마다 이벤트 생성
function makeevent()
{
for(let i=0; i<24; i++)
{
let word=document.getElementById("word"+i);
if(i==number)
{
//정답일경우 이벤트생성
word.addEventListener("click", success);
}
else
{
word.addEventListener("click", fail);
}
}
}
//이전 이벤트 제거
function resetevent()
{
for(let i =0; i<24; i++)
{
let word=document.getElementById("word"+i);
if(i==number)
{
word.removeEventListener("click",success);
}
else
{
word.removeEventListener("click", fail);
}
}
}
function onecycle()
{
setword();
changeword();
makeevent();
}
onecycle();
시연영상
'프론트엔드 > javascript' 카테고리의 다른 글
| 모달창 만들기(Modal/Dialog) (0) | 2023.07.13 |
|---|---|
| 자바스크립트프로젝트 - 다른색깔찾기 (0) | 2023.07.05 |
| Javascript프로젝트 - 가위바위보 (1) | 2023.07.01 |
| javascript - 북마크 아이템 추가하기 (0) | 2023.06.14 |
| 자바스크립트 - 5. 북마크 바 만들기 (0) | 2023.06.11 |
