실습 2: 가위 바위 보 게임 만들기
프로젝트명 : exercise02
파일명: index.html, rockscissorspaper.js (외부 스크립트)
요구사항
1. 사용자는 가위, 바위, 보 버튼을 눌러 게임을 진행합니다.
2. index.html은rockscissorspaper.js를 외부 스크립트로 참조합니다.
3. index.html은 game, result의 id를 가진 div 요소를 가집니다.
4. Game의 id를 가진 div 요소는 btnScissors, btnRock, btnPaper의 id를 가진 button 요소를 자식요소로 가집니다.
5. DOM 이벤트는 크로스 브라우징 문제가 있으므로 모든 이벤트와 관련된 함수를 만들 때는 크로스 브라우징 문제를 반드시 해결해야 합니다.
6. 웹 브라우저의 window 객체에서 load 이벤트가 발생하면 init() 함수를 호출하여 초기화 작업을 합니다.
7. init() 함수에서는 game이란 id를 가진 요소를 참조하고, 이 요소에서 click 이벤트 리스너로 playRockScissorsPaper() 함수를 추가하도록 합니다. 자식 요소인 버튼에서 발생하는 click 이벤트를 부모 요소에서 처리할 수 있도록 이벤트 버블링 특성을 이용합니다.
8. playRockScissorsPaper() 함수에서는 먼저 이벤트 발생원을 조사하여, Player() 생성자 함수 호출을 통해 생성된 player객체의 point 프로퍼티에 0(가위일 경우), 1(바위일 경우), 2(보일 경우) 중 하나의 값을 저장합니다. 이벤트 핸들러 함수는 인자로 event 객체를 전달 받으며, 이 event 객체를 통해 발생원을 조사할 수 있습니다.
9. Player() 생성자 함수 호출을 통해 생성된computer 객체 역시0(가위일 경우), 1(바위일 경우), 2(보일 경우) 중 하나의 값을 가지게 합니다.
10. player와 computer 객체의 point 프로퍼티 값을 비교하여 결과를 생성합니다. 이 때 일반적인 가위, 바위, 보 승리 결정 알고리즘을 적용합니다.
11. 게임이 완료되면 result의 id를 가진 요소의 innerHTML 프로퍼티를 이용해 승패 결과를 나타냅니다.
index2.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8" />
<title>exercise02</title>
<script type="text/javascript" src="rockscissorspaper2.js">
</script>
</head>
<body>
<div id="game">
<button id="btnScissors">가위</button>
<button id="btnRock">바위</button>
<button id="btnPaper">보</button>
<button id="btnReset">리셋</button>
</div>
<div id="result">
</div>
</body>
</html>
rockscissorspaper2.js
function Player(p) {
if (!p) {
p = 0;
}
this.point = p;
}
//이부분은 오버라이딩부분
Player.prototype.toString = function() {
switch(this.point) {
case 0:
return "가위";
case 1:
return "바위";
case 2:
return "보";
}
};
//이벤트핸들러여서 evt가 넘어오게 되어있다.
function playRockScissorsPaper(evt) {
//alert(evt);//마우스 이벤트내
var source = getEventSource(evt);//source는 buttonElement다
var player = new Player();
var computer = new Player(Math.floor(Math.random() * 3));//0,1,2가 발생
var resultElement = document.getElementById('result');//이해 완료
switch(source.id) {//evt.target.id가 즉 buttonElement의 id가 아래와 같으면
case 'btnScissors':
player.point = 0;
break;
case 'btnRock':
player.point = 1;
break;
case 'btnPaper':
player.point = 2;
break;
default:
return;
}
if (player.point == computer.point) {//같으면 비기고
resultElement.innerHTML = '플레이어: ' + player + ' vs 컴퓨터: ' + computer + ' => 비겼습니다!!!';
} else {//여긴 알고리즘부분
if ((player.point + 1) % 3 == computer.point) {
resultElement.innerHTML = '플레이어: ' + player + ' vs 컴퓨터: ' + computer + ' => 졌습니다!!!';
} else {
resultElement.innerHTML = '플레이어: ' + player + ' vs 컴퓨터: ' + computer + ' => 이겼습니다!!!';
}
};
}
function clearResult(){
var resultElement = document.getElementById("result");
resultElement.innerHTML = "준비";
}
function init() {
var btnRockElement = document.getElementById("btnRock");
var btnScissorsElement = document.getElementById("btnScissors");
var btnPaperElement = document.getElementById("btnPaper");
var btnResetElement = document.getElementById("btnReset");
addListener(btnRockElement, 'click', playRockScissorsPaper);
addListener(btnScissorsElement, 'click', playRockScissorsPaper);
addListener(btnPaperElement, 'click', playRockScissorsPaper);
addListener(btnResetElement, 'click', clearResult);
}
//세번째는 call back
function addListener(el, ev, handler) {
//alert(el);
//크롬 파이어폭스용
if (el.addEventListener) {//el에 gameElement임
el.addEventListener(ev, handler, false);
} else {//익스플로러 8버전 이하용
el.attachEvent('on' + ev, handler);
}
}0
//여기 매개변수 부분 이해 잘 안됨
function getEventSource(evt) {
//alert(evt.target);//evt.target은 Button엘레먼트
if (evt.target)
return evt.target;
else
return window.event.srcElement;
}
addListener(window, 'load', init);
출력화면
'프로그래밍 > 자바스크립트' 카테고리의 다른 글
| Javascript - jQuery Mobile 컴포넌트 - 페이지, 버튼, 툴바 (0) | 2015.01.29 |
|---|---|
| Javascript - jQuery 기본 효과, 페이딩, 슬라이딩 (0) | 2015.01.29 |
| Javascript - 셀렉터 기본 개념 및 예제 (0) | 2015.01.28 |
| Javascript - jQuery와 jQuery Mobile 개요 및 aptana 개발환경 세팅 (0) | 2015.01.27 |
| Javascript - 웹브라우저 별 이벤트 처리 (0) | 2015.01.25 |
| Javascript - 객체 생성 과정 및 상속 (0) | 2015.01.25 |
| Javascript - 로또 번호 생성기 만들기 (0) | 2015.01.23 |
| Javascript - 객체 (0) | 2015.01.23 |