[Zerocho-01] 끝말잇기게임 (JS기초)

블로그 내, 게시물에 보시면, Basic 파트에

생활코딩에서 이미 기초 자바스크립트 문법을 숙지했습니다.

하지만, 아직도 충분히 익숙치 않은지, 직접 무언가를 만들기에 상당히 어렵더라구요.

그래서, 저는 지금부터 프로그래밍적 사고와 자바스크립트를 조금 더 깊이 초급~중급에 해당하는 강의를 보면서,

자바스크립트를 활용해 이것저것 만들어보고자 합니다.

위 목적에 가장 적합한 강의로 Zerocho님 강의가 괜찮더군요.

위 강의를 따라하며, 완성된 코드를 리뷰하는 방식으로 포스팅을 이어가도록 하겠습니다.

 

제로초님의 자바스크립트 강의는 아래 링크에서 찾아보실 수 있습니다.

www.youtube.com/watch?v=Qq2IJ2iEgWA&list=PLcqDmjxt30Rtbxbh4eJREOVekql_kWVmu

 

이 포스팅의 목적은 개인적인 복습을 목적으로 합니다.

따라서, 강좌에서 다루는 내용 중 개인적인 판단하에 주요 내용만을 다루기에 누락되는 부분이 있을 수 있으며

Basic에서 다룬 부분에 대해 간략하게나마 언급만 하고 넘어가므로 이 점 참고하셔서 읽어주시길 바랍니다.

 

이미 문법을 숙지하신 분이 많을 수 있으므로, 게임을 만드는 과정을 우선하고,

해당 과정에 필요한 문법을 아래에 재정리 하는 방식으로 포스팅합니다.

 

 

 

1. 끝말잇기

오늘 만들어볼 게임에 대해서 먼저 살펴볼까요?

화면상단 중앙부분을 봐주세요 ~

끝말잇기게임

크롬에서 제공하는 prompt창을 통해서, 끝말잇기 게임을 하는 로직을 구성해보는 간단한 게임입니다.

동영상에서 보신 것처럼 코드는 잠깐 우측에서 보실 수 있었습니다.

한번 자세히 살펴보겠습니다.

 

 

2. 순서도 & 코드분석

끝말잇기 게임 순서도

위 그림은 끝말잇기 게임의 순서도입니다.

 

1. 컴퓨터가 제시어를 prompt창에 보여주면서 사용자의 답을 기다립니다.

2. 사용자가 답을 입력합니다.

3. 사용자의 입력값 첫글자와, 컴퓨터의 제시어 마지막 글자가 같은지 비교합니다.

4-1.  맞는경우, 사용자의 입력값을 받아 컴퓨터는 제시어를 다시 prompt창에 보여줍니다.

4-2. 값이 틀린경우, 게임을 중단합니다.

 

 

 

var question = '돈까스';

while(true){
    var answer = String(prompt(question));
    if(answer[0] === question[question.length -1]){
        question = answer;
        console.log('딩동댕 !!');
    } else {
        console.log('정답이 틀렸습니다 !^^*');
        break;
    }
}

 

1. var변수를 통해, querstion 이라는 변수를 선언하고 첫 제시어를 임의로 '돈까스'라고 지정해주었습니다.

2. 끝말잇기 게임은, 계속 제시어를 받아 사용자에게 전달해줘야 하므로 루프문 while에 조건값을 true로 설정해줬습니다.(무한루프설정)

3. 사용자의 대답을 받을 answer라는 변수를 선언했습니다. 이를 String값으로 변환하고, prompt를 이용해 상단에 띄워주었으며, prompt값으로 question을 넣어주었습니다. 따라서, question의 '돈까스'가 첫 제시어로 prompt창에 출력되게 됩니다.

4. 이제 사용자의 대답(answer)의 첫글자와, 컴퓨터의 제시어(question)의 마지막글자의 값이 같은지 비교합니다.

(사용자의 answer값을 String으로 형변환 해주었습니다. String문자열도 배열과 유사하게 [0],[1]로 값을 가져올 수 있습니다.)

(question부분을 보시면 뒤에, question.length-1을 해주었다는 것을 확인할 수 있습니다. 이 부분은, 문자열의 길이는 단어마다 변화할 수 있습니다. 따라서, 유동적으로 question의 length값을 주어 question길이값을 가져왔으며, 배열과 유사하게, 0부터 숫자를 세므로 문자열의 길이는 늘 문자열보다 1적습니다. 따라서 뒤에 -1을 붙여주어 완성시켰습니다.)

4-1. 값이 맞는경우, question변수에, 사용자가 입력한 값인 answer값을 저장하고, console에 '딩동댕'을 입력해줍니다.

4-2. 값이 틀린경우, console에 정답이 틀렸음을 알리는 메세지를 출력하고, break로 인해 반복문을 탈출합니다.

 

 

 

 

3. 문법사항

기초문법을 전반적으로 요구하므로 아래는 기초문법들을 총정리한다는 느낌으로 보시면 좋을것 같습니다.

 

1. 값 [ 수, 문자, 불리언(True&False) ]

//수
1
2
3

//문자
'안녕'
'Javascript'
"Javascirpt"
"3"

//불리언
true;
false

2. 연산자 & 비교연산자

//연산자 ( + , -, *, /, %(나머지), **(제곱) )

1+1 -> 2
5-2 -> 3
5*5 -> 25
10/2 -> 5
10%3 -> 1
2**3 -> 8

//비교연산자 ( > , < , >= , <= , ==, ===)
1 > 2 -> false;
5 < 10 -> true;
5 >= 3 -> false;
5 <= 3 -> true;
5 == "5" -> true;
5 == 5 -> true;
5 === "5" -> false;
5 === 5 -> true;


//연산자의 우선순위 ( '사칙연산[기본수학과 같음]'  --->>  '< > >= <='  --->>  '= == === 을 연산함')

혹시 위 문법이 이해가 안되신다면, Basic부분을 참조해주시기 바랍니다.

 

3. 변수 & 상수

//ES5

var a = 5;
a        // 5가 출력됨.

var b = 10;
b        // 10이 출력됨.

a + b    // 15가 출력됨.


//ES6 에서는 var 대신, let(변수) 과 const(상수) 를 사용함.

let a = 5;
const b = 10;
console.log(a-b); // -5가 출력됨.

//변수의 첫글자는 숫자가 될 수 없음.
//변수명에는 $ , _ 를 제외한 어떠한 특수기호도 삽입이 불가함.

4. null & undefined

var a;

console.log(a) // undefined 출력

a = null;

console.log(a) // null 출력


//둘다 빈값을 의미합니다.
//undefined는 컴퓨터가 자동적으로 삽입한 빈값, null은 사용자가 입력한 빈 값.

5. 조건문 (if)

//if 조건문

var name = 'blockmonkey'

if(name){
	console.log('Good!');
} else {
	console.log('Bad..');
}



// 두번째 예시 else if
if(조건){
		console.log('Good!');
}else if(조건2){
	console.log('Not Bad~');
}else{
	console.log('Bad!');
}


// 조건문을 활용한 간단한 문제풀기 게임

var answer = prompt('5 * 5 = ?');
  if(Number(answer) === 5 * 5){
      console.log('딩동댕!');
  } else {
      console.log('땡 !!');
  }

//prompt는 상단에 사용자의 입력값을 받아올 수 있는 알림창이다. (alert와 차이)
//Number(answer) 부분은 answer로 받아온 사용자의 입력값(문자열)을 number로 형변환 한 것.
//String(answer) 으로 문자열값으로 형변환 또한 가능함.

6. 반복문 (while / for)

//While 반복문 형태

while(조건){
	실행내용;
}

//While 100회 반복문 예시
var i = 0;
while(i < 100){
	console.log(`나는 백번 나올 것이다.` + i);
    i = i + 1;
}



//for 반복문 형태
for(변수선언; 조건; 변수변동값){
	실행내용;
}

//for문 100회 반복문 예시
for(var i=0; i < 100; i=i+1){
	console.log(`나도 백번 나올 것이다~` + i);
}

7. 함수 (function)

//함수형태
function(매개변수){
	return 반환값;
}

//함수 예시
function sayHello(name){
	console.log(name + '아 안녕 !');
}

console.log(sayHello('blockmonkey'));

 

 

감사합니다.

다음시간에는 반복문 연습을 위해 별찍기를 하도록 하겠습니다.