반응형
간단한 턴제 게임의 서버를 구축해보기
서버 실행 코드
cd [file_path]
node server.js
server.js
const http = require('http');
const url = require('url');
const fs = require('fs');
http.createServer((request, response) => {
const path = url.parse(request.url, true).pathname; // url에서 path 추출
if (request.method === 'GET') { // GET 요청이면
if (path === '/about') { // 주소가 /about이면
response.writeHead(200,{'Content-Type':'text/html'}); // header 설정
fs.readFile(__dirname + '/about.html', (err, data) => { // 파일 읽는 메소드
if (err) {
return console.error(err); // 에러 발생시 에러 기록하고 종료
}
response.end(data, 'utf-8'); // 브라우저로 전송
});
} else if (path === '/') { // 주소가 /이면
response.writeHead(200,{'Content-Type':'text/html'});
fs.readFile(__dirname + '/main.html', (err, data) => {
if (err) {
return console.error(err);
}
response.end(data, 'utf-8');
});
} else { // 매칭되는 주소가 없으면
response.statusCode = 404; // 404 상태 코드
response.end('주소가 없습니다');
}
}
}).listen(8080);
//기본형
// const http = require('http');
// http.createServer((request,response) => {
// console.log('Server start!');
// }).listen(8080);
//기본형-구체화
// const http = require('http');
// http.createServer((request,response) => {
// return request
// .on('error',(err)=>{ //요청에 에러가 있으면
// console.error(err);
// })
// .on('data',(data)=>{ //요청에 데이터가 있으면
// console.log(data);
// })
// .on('end',()=>{ //요청의 데이터가 모두 받아졌으면
// response.on('error',(err)=>{ //응답에 에러가 있으면
// console.error(err);
// });
// response.statusCode = 200; //성공 상태 코드
// response.setHeader('Content-type', 'text/plain'); //header 설정
// response.write('hi\n'); //body 에 정보 탑재
// response.end('the end!'); //정보 탑재 후 브라우저로 전송
// });
// }).listen(8080);
about.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>About</title>
</head>
<body>
<div>제작자: me.</div>
</body>
</html>
main.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>턴제 게임</title>
</head>
<body>
<form id="start-screen">
<input id="name-input" placeholder="영웅 이름을 입력하세요!" />
<button id="start">시작</button>
</form>
<div id="screen">
<div id="hero-stat">
<span id="hero-name"></span>
<span id="hero-level"></span>
<span id="hero-hp"></span>
<span id="hero-xp"></span>
<span id="hero-att"></span>
</div>
<form id="game-menu" style="display: none;">
<div id="menu-1">1.모험</div>
<div id="menu-2">2.휴식</div>
<div id="menu-3">3.종료</div>
<input id="menu-input" />
<button id="menu-button">입력</button>
</form>
<form id="battle-menu" style="display: none;">
<div id="battle-1">1.공격</div>
<div id="battle-2">2.회복</div>
<div id="battle-3">3.도망</div>
<input id="battle-input" />
<button id="battle-button">입력</button>
</form>
<div id="message"></div>
<div id="monster-stat">
<span id="monster-name"></span>
<span id="monster-hp"></span>
<span id="monster-att"></span>
</div>
</div>
<script src="./turn.js"></script>
</body>
</html>
turn.js
var TurnGame = (function() {
var instance;
var initiate = function(heroName) {
var hero = {
name: heroName,
lev: 1,
maxHp: 100,
hp: 100,
xp: 0,
att: 10
};
return {
showLevel: function() {
document.getElementById('hero-level').innerHTML = hero.lev + 'lev';
return this;
},
showXp: function() {
var self = this;
if (hero.xp > 15 * hero.lev) {
hero.xp -= 15 * hero.lev;
hero.maxHp += 10;
hero.hp = hero.maxHp;
hero.att += hero.lev;
hero.lev++;
window.setTimeout(function() {
self.setMessage('레벨업!');
}, 1000);
}
document.getElementById('hero-xp').innerHTML = 'XP: ' + hero.xp + '/' + 15 * hero.lev;
document.getElementById('hero-att').innerHTML = 'ATT: ' + hero.att;
return this.showLevel().showHp();
},
showHp: function() {
if (hero.hp < 0) {
return this.gameOver();
}
document.getElementById('hero-hp').innerHTML = 'HP: ' + hero.hp + '/' + hero.maxHp;
return this;
},
toggleMenu: function () {
document.getElementById('hero-name').innerHTML = hero.name;
document.getElementById('start-screen').style.display = 'none';
if (document.getElementById('game-menu').style.display === 'block') {
document.getElementById('game-menu').style.display = 'none';
document.getElementById('battle-menu').style.display = 'block';
document.getElementById('battle-input').focus();
} else {
document.getElementById('game-menu').style.display = 'block';
document.getElementById('battle-menu').style.display = 'none';
document.getElementById('menu-input').focus();
}
return this;
},
setMessage: function(msg) {
document.getElementById('message').innerHTML = msg;
return this;
},
};
};
return {
getInstance: function(name) {
if (!instance) {
instance = initiate(name);
}
return instance;
}
};
})();
document.getElementById('start-screen').onsubmit = function(e) {
var name = document.getElementById('name-input').value;
e.preventDefault();
if (name && name.trim() && confirm(name + '으로 하시겠습니까?')) {
TurnGame.getInstance(name).showXp().toggleMenu(); // 체이닝
} else {
alert('이름을 입력해주세요');
}
};
document.getElementById('game-menu').onsubmit = function(e) {
var input = document.getElementById('menu-input');
var option = input.value;
e.preventDefault();
input.value = '';
};
document.getElementById('battle-menu').onsubmit = function(e) {
var input = document.getElementById('battle-input');
var option = input.value;
e.preventDefault();
input.value = '';
};
반응형
'Programming > JavaScript' 카테고리의 다른 글
| [Node.js] Node.js 입력 받는 방법, 표준입출력 (0) | 2020.03.18 |
|---|---|
| [jQuery] jQuery 요소 찾기, 텍스트 바꾸기, 요소 변경/생성 (0) | 2019.12.22 |
| AJAX란 (0) | 2019.12.21 |
| [JavaScript] 자바스크립트와 웹 프론트엔드 파트4. Networking (0) | 2019.12.18 |
| [JavaScript] 자바스크립트와 웹 프론트엔드 파트3. Event (0) | 2019.12.18 |
댓글