안녕하세요 IT여행자입니다.
입문자 딱지를 떼도 어떤 프로그램을 어떻게 만들지 잘 떠오르지 않는 때가 바로 초보 개발자 시절이라고 생각합니다. 뭔가를 배우기는 했는데 내가 배운 것으로 무엇을 할 수 있을지도 잘 모르는 때이기도 하고요.
이런 분들을 위해 HTML, CSS, Javascript만으로 스무고개란 간단한 게임을 만들어 보도록 하겠습니다. 동여상도 첨부 되어 있으니 참고해 주시길 바랍니다.
간단히 개발 환경을 말씀드리자면 앞서서 말씀드린것과 같이 html, css, javascript만을 사용하였습니다. 또한 개발 툴은 어떤 툴을 사용하든지 상관없습니다. 저는 이클립스를 사용하여 제작해 보도록 하겠습니다.
가장 먼저 프로젝트를 '스무고개게임' 이라고 만들도록 하겠습니다. 이클립스 환경에 따라 다소 폴더의 구조가 다르지만 일반적으로 webapp 폴더가 웹과 관련된 파일들이 저장되는 공간입니다. webapp 폴더 안에 아래와 같이 폴더와 파일들을 생성하고 시작하겠습니다.
- webapp/index.html
- webapp/css/index.css
- webapp/js/index.js
HTML 문서 작성하기
webapp/index.html 파일을 열고 아래의 그림처럼 파일을 작성하도록 하겠습니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>스무고개 게임</title>
</head>
<body>
<main>
<h1>스무고개 게임</h1>
<button type='button' class='btnStart'>시작</button>
<div class='message'>게임을 시작하려면 시작 버튼을 클릭하세요...</div>
<div class='zone'>
<span>정답</span>
<input type='text' class='answer'>
<button type='button' class='btnSend'>전송</button>
</div>
</main>
</body>
</html>html 내용이 몇개 없습니다. 위의 코드에서 가장 중요한 요소는 각 태그에 작성된 class 속성입니다. 이 class 속성은 화면 디자인 요소로도 사용되지만, 자바 스크립트 파일에서 이벤트를 처리하고 필요한 태그를 가져오기 위한 요소로 사용됩니다.
위의 코드에 css 파일과 자바스크립트 파일을 가져오도록 link 태그와 script 태그를 추가하도록 하겠습니다.
<head>
<meta charset="UTF-8">
<title>스무고개 게임</title>
<link rel='stylesheet' href='css/index.css'>
<script defer src='js/index.js'></script>
</head>
CSS 파일 작성하기
webapp/css/index.css 파일을 편집하도록 하겠습니다.
1) padding 속성에 의해서 전체 크기가 변경되는 것을 방지하기 위한 속성을 추가합니다.
*{
box-sizing: border-box;
}
2) 게임 화면의 전체 영역을 포함하고 있는 main 태그의 속성을 입력합니다.
main{
margin:40px auto;
padding:30px;
width:500px;
border:5px solid #44f;
border-radius:12px;
box-shadow:2px 2px 3px #ccc;
}
3) 헤드라인 태그의 속성을 수정합니다.
main h1{
text-align: center;
font-size:3.0em;
}
4) 게임 시작 버튼의 속성을 지정합니다.
main .btnStart{
width:100%;
height:60px;
font-size:1.4em;
}5) 게임 메시지를 표시해 주는 message 영역의 속성을 지정하도록 하겠습니다.
main .message{
width:100%;
height:400px;
padding:15px;
background-color:#eee;
margin : 10px 0;
overflow: scroll;
font-weight:bolder;
}
6) 마지막으로 정답입력과 정답 전송버튼이 있는 zone 영역의 속성을 지정하겠습니다.
main .zone>*{
font-size:1.4em;
height:45px;
}
작성된 css 파일의 전체 내용입니다.
@charset "UTF-8";
*{
box-sizing: border-box;
}
main{
margin:40px auto;
padding:30px;
width:500px;
border:5px solid #44f;
border-radius:12px;
box-shadow:2px 2px 3px #ccc;
}
main h1{
text-align: center;
font-size:3.0em;
}
main .btnStart{
width:100%;
height:60px;
font-size:1.4em;
}
main .message{
width:100%;
height:400px;
padding:15px;
background-color:#eee;
margin : 10px 0;
overflow: scroll;
font-weight:bolder;
}
main .zone>*{
font-size:1.4em;
height:45px;
}위와 같은 내용으로 css가 html 문서에 적용되었다면 아래와 같은 화면을 볼 수 있을 것입니다.
Javascript 파일 작성하기
1) 가장 먼저 스무고개 게임의 핵심이 되는 난수를 발생시켜 저장하는 변수와 정답을 전송한 횟수를 카운트하는 변수를 선언해 둡니다.
let num; //컴퓨터가 발생시킨 난수
let count=0; // 답안 전송 횟수
2) 본 자바스크립트에서 가장 많이 사용하게 될 함수를 선언할 것인데, 이 함수는 태그의 클래스명을 전달받아 해당 태그를 반환하는 기능을 갖는 함수입니다.
// 태그 가져오는 함수
function get(ele){
return document.querySelector(ele);
}
3) 게임 시작 버튼이 클릭되었을 때 처리 내용입니다. Math.random() 함수를 사용하여 1~1000사이의 난수를 발생시켜 num에 저장하고 초기 메시지를 화면에 표시하는 역활을 하지요.
// 게임 시작버튼이 클릭되었을 때
get('.btnStart').addEventListener('click', function(){
num = parseInt(Math.random()*1000)+1;
count = 0;
console.log(num);
let msg = `스무고개 게임이 시작되었습니다.<br/>
1~1000사이의 값중 하나를 선택하고 전송버튼을 클릭해 주십시요<br/>`;
get('.message').innerHTML = msg;
get('.answer').value='';
})
4) 게이머가 정답이라고 생각하는 숫자를 전송하면 자바스크립트는 발생한 난수를 저장한 변수 num과 비교하여 정답 또는 대소 관계를 게이머에게 전달하여 다음 정답을 예측한 값을 입력하도록 유도 합니다.
// 답안이 전송되었을 때
get('.btnSend').addEventListener('click', function(){
count++;
let msg;
let v = get('.answer').value;
if(num==v){
msg = count + ' 번째에 답을 맞추셨습니다....';
count=0;
}else{
if(num>v){
msg = v + " 보다 큰수 입니다."
}else{
msg = v + " 보다 작은수 입니다."
}
}
get('.message').innerHTML += (msg + "<br/>") ;
get('.message').scrollTop=get('.message').scrollHeight;
})
5) 마지막 이벤트로 게이머가 정답을 입력하고 전송 버튼을 클릭하지 않고 엔터키만 눌러도 정답이 전송되도록 keyup 이벤트를 처리하는 부분입니다.
//입력상자에서 엔터키를 누른경우
get('.answer').addEventListener('keyup', function(ev){
if(ev.keyCode==13){
get('.btnSend').click();
}
})
자바스크립트 전체 소스
/**
* 스무고개 겡미
*/
let num; //컴퓨터가 발생시킨 난수
let count=0; // 답안 전송 횟수
// 태그 가져오는 함수
function get(ele){
return document.querySelector(ele);
}
// 게임 시작버튼이 클릭되었을 때
get('.btnStart').addEventListener('click', function(){
num = parseInt(Math.random()*1000)+1;
count = 0;
console.log(num);
let msg = `스무고개 게임이 시작되었습니다.<br/>
1~1000사이의 값중 하나를 선택하고 전송버튼을 클릭해 주십시요<br/>`;
get('.message').innerHTML = msg;
get('.answer').value='';
})
// 답안이 전송되었을 때
get('.btnSend').addEventListener('click', function(){
count++;
let msg;
let v = get('.answer').value;
if(num==v){
msg = count + ' 번째에 답을 맞추셨습니다....';
count=0;
}else{
if(num>v){
msg = v + " 보다 큰수 입니다."
}else{
msg = v + " 보다 작은수 입니다."
}
}
get('.message').innerHTML += (msg + "<br/>") ;
get('.message').scrollTop=get('.message').scrollHeight;
})
//입력상자에서 엔터키를 누른경우
get('.answer').addEventListener('keyup', function(ev){
if(ev.keyCode==13){
get('.btnSend').click();
}
})
이것으로 스무고개 게임을 간단하게 만들어 보았습니다. 물론, 숫자를 입력하는 상자에서 숫자가 아닌 다른 문자를 입력한 경우나, 게임중 다시 시작버튼을 누른다거나 하는 예외적인 상황에 대한 조치는 하지 않았습니다. 게임의 완성도는 높아질 수 있겠지만, 프로그램에 대한 진입 장벽이 높아지는 것을 원치않았기 때문입니다. 이점 양지해 주시기 바랍니다.
게임의 난이도를 높이려면 이전에 입력했던 숫자들을 보여주지 않으면 게임의 난이도도 높아지고 치매 예방도(?) 할 수 있지 않을까 합니다. 이것 저것 수정한 내용으로 답글을 달아 공유해 주셨으면 합니다.
이상으로 여행자 수첩을 마치도록 하겠습니다.
'BOOKS > 수월한 자바스크립트' 카테고리의 다른 글
| 개발 초보자를 위한 상위 Top10 구하기 (0) | 2023.02.24 |
|---|
