[Node.js] 영단어 퀴즈 게임

 

---

1.개요

Node.js에 조금더 익숙해지기 위해, 영단어 공부를 위한 게임을 만들고자하였다.

 

 

 

 

2.사용한것

Vite의 로 프로젝트를 만들었고
npm의 물리엔진을 위한 matter-js
githubpages 배포를 위한 gh-pages라이브러리를 사용하였다.

{
  "name": "english-voca-game",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview",
    "predeploy": "npm run build",
    "deploy": "gh-pages -d dist"
  },
  "devDependencies": {
    "gh-pages": "^6.1.1",
    "vite": "^5.3.1"
  },
  "dependencies": {
    "jquery": "^3.7.1",
    "matter-js": "^0.20.0"
  },
  "homepage": "https://asa9874.github.io/English_Voca_game/"

  
}

 

 

 

3.기능

3-1.팝업

페이지를 로드하면 레이어 팝업이 나오도록하였다.

 

 

3-1-1.JS파일

DOMContentLoaded일때 팝업이 나오도록하였다.
화면 외부나 x를 누르면 꺼진다.

document.addEventListener('DOMContentLoaded', function() {
    // 팝업을 화면 중앙에 표시
    playSound("cutesound",0.3);
    document.getElementById('popup').style.display = 'flex';
    
    // 닫기 버튼 클릭 시 팝업 닫기
    document.getElementById('closePopup').addEventListener('click', function() {
        document.getElementById('popup').style.display = 'none';
        playSound("cutesound",0.3);
    });

    // 팝업 바깥 클릭 시 팝업 닫기
    document.getElementById('popup').addEventListener('click', function(event) {
        
        if (event.target === document.getElementById('popup')) {
            document.getElementById('popup').style.display = 'none';
            playSound("cutesound",0.3);
        }
    });
});

 

 

3-1-2.HTML파일

팝업창 HTML이다.

<div id="popup" class="popup">
    <div class="popup-content">
        <span id="closePopup" class="close">&times;</span>
        <p id="popuptitle">영단어 퀴즈!</p>
        <p id="popupintroduce">1354개의 토익단어를 풀고 </p>
        <p id="popupintroduce">초록색공으로 가득채워봐요!</p>
        <img id="popimg" src="https://media.tenor.com/gQwV8s2pCp8AAAAi/gura-hololive.gif">
        <img id="popimg" src="https://media.tenor.com/gQwV8s2pCp8AAAAi/gura-hololive.gif">

    </div>
</div>

3-1-3.CSS파일

팝업창 디자인을 위한 CSS파일

#popup {
    display: none; /* Initially hidden */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    justify-content: center;
    align-items: center;
}

.popup-content {
    background-color: rgb(184, 240, 173);
    height: 800px;
    width: 1300px;
    border-radius: 10px;
    text-align: center;
    position: relative;
}

.close {
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 80px;
    cursor: pointer;
}

#popuptitle{
    font-size: 120px;
    font-family: cursive;
    text-align: center;
    color: #00ff22;
    font-weight: 1000;
    text-shadow: 5px 5px 10px #1d9c61;
    margin: 0;
}

#popupintroduce{
    font-size: 50px;
    font-family: cursive;
    text-align: center;
    font-weight: 1000;
    padding-top: 50px;
    color: #40ffff;
    text-shadow: 1px 1px 3px #000000;
    margin: 0;
}

#popimg{
    height: 400px;
    width: 400px;
}

3-2.영단어기능

3-2-1.리셋기능

버튼란에 무작위로 한국말이 채워지고
위의 영어란에는 4개의 버튼중 하나의 영어단어가 입력된다.
이는 페이지가 로드될시 작동한다.

function englishinit(){
    buttons.forEach(button => {
        // VOCA 리스트에서 무작위로 요소 선택
        const randomIndex = Math.floor(Math.random() * valuesList.length);
        const randomWord = valuesList[randomIndex];
        
        // 버튼의 텍스트 설정
        button.innerText = randomWord;
        
    });
}

function koreaninit(){
    // 무작위로 하나의 버튼 선택
    const randomIndex = Math.floor(Math.random() * buttons.length);
    const randomButton = buttons[randomIndex];

    // 선택된 버튼의 텍스트(단어) 가져오기
    const randomWord = randomButton.innerText;

    // 선택된 단어의 (값) 가져오기
    const englishDefinition = Voca[randomWord];

    // english-voca 요소에 설정
    englishVocaElement.innerText = englishDefinition;
    corret=englishDefinition;
}

//로드
document.addEventListener('DOMContentLoaded', englishinit());
document.addEventListener('DOMContentLoaded', koreaninit());

3-2-2.버튼 클릭,정답확인

버튼들에 checkCorrect함수를 click했을때 작동하게 만든다.
버튼을 누르면 잠시동안 버튼들이 비활성화되고
틀렸다면 버튼의 배경을 빨간색으로 바꾸고 올바른 정답을 알려준다.
일정시간이 지나면 문제를 초기화시킨다.

//버튼 클릭함수 주입
buttons.forEach(button => {
    button.addEventListener('click', function() {
        checkCorrect(button);
    });
});

//정답확인
function checkCorrect(button) {
    var balltype=0;

    //버튼 비활성화
    buttons.forEach(button => {button.disabled = true;});

    //정답아닐때 빨간색
    if(Voca[button.innerText]!=corret){
        balltype=1;
        button.style.backgroundColor="#fc5757"
        playSound("bad",0.5)
    }
    //정답
    else{playSound("good",0.3)}

    //정답 답안에 초록색(항상실행)
    buttons.forEach(button => {
        if(Voca[button.innerText]===corret){button.style.backgroundColor="#00ff51"}
    });

    //시간지난후 버튼활성화, 색초기화
    setTimeout(()=>{
        addFruit(balltype);
        buttons.forEach(button => { button.style.backgroundColor="#fbeee0"});
        englishinit();
        koreaninit();
        buttons.forEach(button => {button.disabled = false;});
    },1000);
}

 

3-3.공 기능 핵심함수

해당 기능은 이전에 만든 수박게임 클론에서 matter.js를 사용했던 코드를 참고한뒤 필요부분을 수정하였다.

3-3-1.공추가

//과일추가
export function addFruit(a){
    const index=a;
    const fruit = BALLS[index];
    var color ="#00f200";
    if(index===1){color ="#fc0a3b";}
    const body = Bodies.circle(300, 100, fruit.radius, {
        index:index,
        render: {
            fillStyle: color,  // 채우기 색상 설정
            strokeStyle: '#000000',  // 테두리 색상 설정
            lineWidth: 5,  // 테두리 두께 설정
        },
        restitution:0.5,  //탄성
    });

    currentBody=body;
    currentFruit=fruit;

    World.add(world, body);  // 원을 월드에 추가
    disableAction=true;
    setTimeout(()=>{
        addFruit(); 
        disableAction=false;  
    },1000);
}

3-3-2.충돌판정

충돌시 두개의 공의 합이 1이라면 (빨간공 + 초록공)이라면 상쇄되어 사라진다.

Events.on(engine,"collisionStart",(event) =>{
    event.pairs.forEach((collision)=> {
        if(collision.bodyA.index + collision.bodyB.index===1){
            World.remove(world, [collision.bodyA,collision.bodyB]);
            playSound("pop",0.5);
        }

        if(!disableAction && ((collision.bodyA.name=== "topline" && collision.bodyB.index===0)||(collision.bodyB.name=== "topline"&& collision.bodyA.index===0))){
            alert("클리어!!!");
        }
    });
});

4.소리

mp3 파일들은 별도의 파일대신 github에 올려 githubusercontent를 활용하여 제작하였다.

 

export function playSound(name,vol) {
    const audio = new Audio('https://raw.githubusercontent.com/asa9874/Github-User-Content/main/'+name+'.mp3');
    audio.volume = vol;
    audio.play();
}

 

 

 

 

 

 

5.소스코드

https://github.com/asa9874/English_Voca_game

GitHub - asa9874/English_Voca_game

 

 

6.플레이 

https://asa9874.github.io/English_Voca_game/

영단어 퀴즈