[HTML/JS] JS기초 : 행맨 게임 만들어보기!

js hangman.zip

0.01MB

기본 파일들이고 여기서 JS파일만 참고해서 작성해보시면 됩니다!

 

---

목표

New Game을 누르면 게임이 시작되면서 언더바가 쭉 나오고, 맞추면 해당되는 언더바들이 문자가 출력되고, 틀리면 행맨 그림이 바뀌면서 Guesses에 시도한 문자들이 출력되는 게임을 js으로 만들어 봅시다!

 

---

HTML

<div id="hangman">
     <div>
         <img id="hangmanpic" src="hangman6.gif" alt="hangman"/>
     </div>
     <div id="clue">Prsee New Game to Play!</div>
     <div>
         <input id="hguess" type="text" size="1" maxlength="1" />
         <button id="guessbutton" onclick="guessLetter();" disabled="disabled">Guess</button>
     </div>
     <div id="newgamearea">
         <button onclick="newGame();">New Game</button>
     </div>
     <div id="hguessstr"></div>
</div>

id="hangmanpic" 행맨 이미지

id="clue" 언더바가 있는 부분

id="hguess"  퀴즈 문자 받는 입력창

id="guessbutton" 입력한 문자를 제출하는 버튼

id ="hguessstr" 현재 게임에서 지금까지 입력한 문자들

 

---

전역변수와 게임 시작 함수 newGame()

//행맨
var POSSIBLE_WORDS = ["obdurate", "verisimilitude", "defenestrate", 
"obsequious", "dissonant", "today", "idempotent"];

var MAX_GUESSES = 6;
// global variables
var guesses = "";                // all letters guessed so far
var guessCount = MAX_GUESSES;    // number of guesses player has left
var word;

function newGame(){
    var ram = parseInt(Math.random()*(POSSIBLE_WORDS.length));
    word = POSSIBLE_WORDS[ram];
    guessCount = MAX_GUESSES;
    guesses = "";
    var guessbutt =document.getElementById("guessbutton");
    guessbutt.disabled = false;
    updatePage();
}

우선 전역변수로 퀴즈 단어들을 배열로 선언합니다.

게임을 시작할 때마다 랜덤 인덱스를 입력해서 문자를 지정해줍니다.

인덱스가 정수가 아니면 nullpointer 예외가 나오기 때문에 parseInt()나 Math.floor()를 이용해서 난수(0.0~5.0)에 소수점을 없애줍니다.

게임을 적어도 한번 했다면 게임 시작할때 초기화해줘야하는 값들이 있는데요, 지금까지 입력한 문자들을 없애줘야하기 때문에

guesses를 초기화해줍니다.

guessCount는 쉽게 말해서 몫숨인데 , 최대 몫숨으로 설정합니다. (guessCount = MAX_GUESSES)

그리고 guess 버튼은 게임이 시작해야 활성화 되어야하는데요, guessbutton id로 엘리먼트 객체를 변수에 저장해주고, 그 변수를 통해 disabled 속성에 접근해서 활성화 해줍니다!

그러나 이 모든 것을 수행해도, html 페이지에 나타나지 않으면 소용이 없는데요, 페이지에 내용들을 새로고침 해주는 함수updatePage()를 작성해줘야합니다!

 

---

updatePage() 함수 작성하기

function updatePage(){
    var cluestr ="";
    //언더바 부분을 cluestr에 저장하겠습니다. 새로 구성해야하기 때문에 초기화.
    //언더바부분은 단어의 길이 만큼 해야하기 때문에 lenth만큼 반복해줍니다.
    for (var i = 0; i < word.length; i++) {
        var letter = word.charAt(i);
        // 정답 단어의 i 번재 문자를 가져옵니다.
        if (guesses.indexOf(letter)>=0) {
            //문자가 존재할때
            cluestr+=letter+" ";
            //   _ _ _ 이렇게 언더바+스페이스 가 기본값인데요,
            // a b _ 이런식으로 맞춘 문자부분은 문자+스페이스로 대체해줍니다!
        }
        else
            cluestr+="_ ";
        //존재하지 않을때 그냥 _+스페이스만으로 구성해줍니다.
    }
    document.getElementById("clue").innerHTML = cluestr;
    //update의 메인이죠? 지금까지 구성한 힌트 부분을 출력해줍니다.

    var guessArea  = document.getElementById("hguessstr");
    //입력한 문자들을 출력하는 곳으로, 게임 종료 메세지도 여기에 출력해줍니다.
    if (guessCount==0) {
        //몫숨이 0이 되면 게임끝
        guessArea.innerHTML = "You Lose.";
    } else if(cluestr.indexOf("_")<0){
        //언더바가 다 사라지면 승리로 게임끝
        guessArea.innerHTML = "You Win";
    }else{
        //게임 끝나기 전에는 입력한 문자들을 다 출력해줍니다.
        guessArea.innerHTML = "Guesses: "+guesses;
    }

    var image = document.getElementById("hangmanpic");
    image.src = "hangman"+guessCount+".gif";
    //이미지 엘리먼트를 불러와서 src속성에 알맞게 이미지가 변하도록 합니다.
}

guesses는 지금까지 예상한 문자들의 배열입니다.

 

---

배열.indexOf(요소)

이 함수는 배열의 특정값의 위치를 찾는 함수이예요.

배열 안에서 찾으려는 값과 정확하게 일치(===)하는  '첫번째' element의 index를 리턴합니다. 
만약, 찾으려는 값이 배열에 없으면 -1을 리턴합니다.

그러면 위의 코드에 있는 guesses.indexOf(letter)는 guesses 배열에 letter과 같은 값을 갖고 있는 요소에 해당하는 인덱스를 가져옵니다.

그 인덱스가 만약에 0이상이라면 그게 어디던 존재하고 정답이라는 거겠죠?

반대로 인덱스가 음수가 나오면 존재하지 않는 다는 것입니다.

 

---

엘리먼트.innerHTML

Element 속성(property) innerHTML 은 엘리멘트내에 포함 된 HTML 또는 XML 마크업을 가져오거나 설정합니다.

이번실습에서는 가져오는 기능은 필요없고 설정하는 기능이 필요하겠죠??

.innerHTML는 그 엘리먼트 안쪽에 html코드를 구성하게 해줍니다.

.innerHTML할때마다 기존에 있는 내용은 없어지고 새로 구성하는 겁니다!

---

 

---

guess 버튼 눌렀을때 함수 작성하기

function guessLetter(){
    var input = document.getElementById("hguess");
    var clue = document.getElementById("clue");
    var letter = input.value;
    if(guessCount==0||clue.innerHTML.indexOf("_")<0||guesses.indexOf(letter)>=0){
        return;
    }
    guesses+=letter;
    if(word.indexOf(letter)<0)
        guessCount--;
    updatePage();
}

입력한 문자를 담고있는 엘리먼트를  input에 저장하고, 언더바부분의 엘리먼트를 clue에 저장합니다.

letter를 입력한 문자로 설정합니다.

input 엘리먼트 객체의 value값을 참조해서 접근합니다.

 

몫숨이 없을때, 언더바가 없을때(이미 우승했을때) , 이미 전에 입력한 문자일때 함수를 종료해서 예외처리를 해줍니다.

 

만약에 입력한 문자가 정답이면 updatepage호출해서 반영해줍니다.

오답이면 목숨을 하나 감소시키고 updatepage호출해서 반영해줍니다.

 

웹프 화이팅해용~