HTML5

Size: px

Start display at page:

Download "HTML5"

준엽 장곡
5 years ago
Views:

1 행맨 류관희 충북대학교

2 2

3 3

4 4

5 5

6 사전준비 단어목록읽기 단어빈칸보여주기 인터페이스를통해알파벳선택하면알파벳사라지기 단어에선택한알파벳이있으면표시하기 없으면선이나타원으로사람형태그리기 게임종료조건 : 모든맞추는경우 모두틀린경우 ( 행맨 ) 6

7 단어목록배열에저장 words.js var words = [ "muon", "blight","kerfuffle","qat" ]; <script src="words.js" defer></script> defer: 파일을로딩하는동안브라우저가기본 HTML 문서의다른부분을계속실행 7

8 function setupgame() { var i; var x; var y; var uniqueid; var an = alphabet.length; for(i=0;i<an;i++) { uniqueid = "a"+string(i); 알파벳버튼만들기 var thingelem; var alphabet = "abcdefghijklmnopqrstuvwxyz var alphabety = 300; var alphabetx = 20; var alphabetwidth = 25; d = document.createelement('alphabet'); // alphabet 요소의 HTML 마크업생성 d.innerhtml = ( "<div class='letters' id='"+uniqueid+"'>"+alphabet[i]+"</div>"); document.body.appendchild(d); thingelem = document.getelementbyid(uniqueid); x = alphabetx + alphabetwidth*i; y = alphabety; thingelem.style.top = String(y)+"px"; // 세로위치저장 thingelem.style.left = String(x)+"px"; // 가로위치저장 thingelem.addeventlistener('click',pickelement,false); 8

9 알파벳버튼만들기 var ch = Math.floor(Math.random()* words.length); secret = words[ch]; for (i=0;i<secret.length;i++) { uniqueid = "s"+string(i); d = document.createelement('secret'); d.innerhtml = ( "<div class='blanks' id='"+uniqueid+"'> </div>"); document.body.appendchild(d); thingelem = document.getelementbyid(uniqueid); x = secretx + secretwidth*i; y = secrety; thingelem.style.top = String(y)+"px"; thingelem.style.left = String(x)+"px"; steps[cur](); cur++; return false; 9

10 알파벳버튼만들기 ( 테두리 ) <style>.letters {position:absolute;left: 0px; top: 0px; border: 2px; borderstyle: double; margin: 5px; padding: 5px; color:#d0d; background-color:#dbf; font-family:"courier New", Courier, monospace;.blanks {position:absolute;left: 0px; top: 0px; border:none; margin: 5px; padding: 5px; color:#006; background-color:white; fontfamily:"courier New", Courier, monospace; textdecoration:underline; color: black; font-size:24px; </style> 클래스앞마침표 : 그이름으로클래스가지정된모든요소 Form: 모든 form 요소에스타일이적용이름앞 #: 그이름으로 id 속성을지정한요소를참조 10

11 클릭한알파벳사라지기 function pickelement(ev) { var not = true; var picked = this.textcontent; var i; var j; var uniqueid; var thingelem; var out; for (i=0;i<secret.length;i++) { if (picked==secret[i]) { id = "s"+string(i); document.getelementbyid(id).textcontent = picked; not = false; lettersguessed++; // var lettersguessed; if (lettersguessed==secret.length) { ctx.fillstyle=gallowscolor; out = " 이겼습니다!"; ctx.filltext(out,200,80); ctx.filltext(" 다시하려면페이지새로고침을..",200,120); for (j=0;j<alphabet.length;j++) {// 모든문자에대해이벤트리스너제거 uniqueid = "a"+string(j); thingelem = document.getelementbyid(uniqueid); thingelem.removeeventlistener('click',pickelement,false); 11

12 if (not) { steps[cur](); cur++; if (cur>=steps.length) { for (i=0;i<secret.length;i++) { id = "s"+string(i); document.getelementbyid(id).textcontent = secret[i]; ctx.fillstyle=gallowscolor; out = " 졌습니다!"; ctx.filltext(out,200,80); ctx.filltext(" 다시하려면페이지새로고침을..",200,120); for (j=0;j<alphabet.length;j++) { // 모든문자에대해이벤트리스너제거 uniqueid = "a"+string(j); thingelem = document.getelementbyid(uniqueid); thingelem.removeeventlistener('click',pickelement,false); var id = this.id; document.getelementbyid(id).style.display = "none"; 12

13 캔버스에단계적으로그림생성 var steps = [ drawgallows, drawhead, drawbody, drawrightarm, drawleftarm, drawrightleg, drawleftleg, drawnoose ]; 13

14 캔버스에단계적으로그림생성 교수대그리기 function drawgallows() { ctx.linewidth = 8; ctx.strokestyle = gallowscolor; ctx.beginpath(); ctx.moveto(2,180); ctx.lineto(40,180); ctx.moveto(20,180); ctx.lineto(20,40); ctx.moveto(2,40); ctx.lineto(80,40); ctx.stroke(); ctx.closepath(); 14

15 캔버스에단계적으로그림생성 머리그리기 function drawhead() { ctx.linewidth = 3; ctx.strokestyle = facecolor; ctx.save(); // 타원이되게원의크기를조정하기전에저장 ctx.scale(.6,1); ctx.beginpath(); ctx.arc (bodycenterx/.6,80,10,0,math.pi*2,false); ctx.stroke(); ctx.closepath(); ctx.restore(); 15

16 function drawbody() { ctx.strokestyle = bodycolor; ctx.beginpath(); ctx.moveto(bodycenterx,90); ctx.lineto(bodycenterx,125); ctx.stroke(); ctx.closepath(); function drawrightarm() { ctx.beginpath(); ctx.moveto(bodycenterx,100); ctx.lineto(bodycenterx+20,110); ctx.stroke(); ctx.closepath(); function drawleftarm() { ctx.beginpath(); ctx.moveto(bodycenterx,100); ctx.lineto(bodycenterx-20,110); ctx.stroke(); ctx.closepath(); function drawrightleg() { ctx.beginpath(); ctx.moveto(bodycenterx,125); ctx.lineto(bodycenterx+10,155); ctx.stroke(); ctx.closepath(); function drawleftleg() { ctx.beginpath(); ctx.moveto(bodycenterx,125); ctx.lineto(bodycenterx-10,155); ctx.stroke(); ctx.closepath(); 16

function drawnoose() { ctx.strokestyle = noosecolor; ctx.beginpath(); ctx.moveto(bodycenterx-10,40); ctx.lineto(bodycenterx-5,95); ctx.stroke(); ctx.closepath(); ctx.save(); ctx.scale(1,.3); ctx.

17 function drawnoose() { ctx.strokestyle = noosecolor; ctx.beginpath(); ctx.moveto(bodycenterx-10,40); ctx.lineto(bodycenterx-5,95); ctx.stroke(); ctx.closepath(); ctx.save(); ctx.scale(1,.3); ctx.beginpath(); ctx.arc(bodycenterx,95/.3,8,0,math.pi*2,false); ctx.stroke(); ctx.closepath(); ctx.restore(); drawneck(); drawhead(); function drawneck() { ctx.strokestyle=bodycolor; ctx.beginpath(); ctx.moveto(bodycenterx,90); ctx.lineto(bodycenterx,95); ctx.stroke(); ctx.closepath(); 17

18 게임상태유지와승패판단 플레이어의선택글자가문제단어에들어있는글자와일치하는지검사. 일치할때마다 textcontent 에해당글자지정하여빈요소안에해당글자표시 변수 lettersguessed 에선택된글자수파악 lettersguessed 와 secret.length 를비교 게임이기면 => 승리지정 선택한문자가없으면 cur 를 steps 의인덱스로사용 cur 와 steps.length 를비교하여게임졌는지검사 두값이같으면 => 패배정보출력 display 속성에 none 을지정하여클릭된알파벳보이지않게함 18

19 알아맞힌알파벳을검사하고 textcontext 를할당해서문제단어의알파벳공개하기 var picked=this.textcontent; var picked = this.textcontent; for (i=0;i<secret.length;i++) { if (picked==secret[i]) { id = "s"+string(i); document.getelementbyid(id).text Content = picked; not = false; lettersguessed++;. 19

20 클릭한알파벳사라지기 function pickelement(ev) { var not = true; var picked = this.textcontent; var i; var j; var uniqueid; var thingelem; var out; for (i=0;i<secret.length;i++) { if (picked==secret[i]) { id = "s"+string(i); document.getelementbyid(id).textcontent = picked; not = false; lettersguessed++; if (lettersguessed==secret.length) { ctx.fillstyle=gallowscolor; out = " 이겼습니다!"; ctx.filltext(out,200,80); ctx.filltext(" 다시하려면페이지새로고침을..",200,120); for (j=0;j<alphabet.length;j++) {// 모든문자에대해이벤트리스너제거 uniqueid = "a"+string(j); thingelem = document.getelementbyid(uniqueid); thingelem.removeeventlistener('click',pickelement,false); 20

21 if (not) { steps[cur](); cur++; if (cur>=steps.length) { for (i=0;i<secret.length;i++) { id = "s"+string(i); document.getelementbyid(id).textcontent = secret[i]; ctx.fillstyle=gallowscolor; out = " 졌습니다!"; ctx.filltext(out,200,80); ctx.filltext(" 다시하려면페이지새로고침을..",200,120); for (j=0;j<alphabet.length;j++) { // 모든문자에대해이벤트리스너제거 uniqueid = "a"+string(j); thingelem = document.getelementbyid(uniqueid); thingelem.removeeventlistener('click',pickelement,false); var id = this.id; document.getelementbyid(id).style.display = "none"; 21

HTML5

HTML5 퀴즈 류관희 게임규칙 동적으로 HTML 요소생성 생성된 HTML 요소의화면배치및위치옮기기 퀴즈게임 국가명과수도명의짝맞추기 배열 ( 국가명, 수도명 ) 짝모두맞추면 => 동영상플레이 2 퀴즈게임 3 4 5 6 주요특징 배열 : 국가명과수도명저장 피드백 : 색상변경, 동영상재생 플레이 20쌍중에 4 쌍무작위로선택 글자 : 국가명과수도명 => 그림으로대치 7 사전준비항목