HTML5

Size: px

Start display at page:

Download "HTML5"

불암 장
5 years ago
Views:

1 퀴즈 류관희

2 게임규칙 동적으로 HTML 요소생성 생성된 HTML 요소의화면배치및위치옮기기 퀴즈게임 국가명과수도명의짝맞추기 배열 ( 국가명, 수도명 ) 짝모두맞추면 => 동영상플레이 2

3 퀴즈게임 3

4 4

5 5

6 6

7 주요특징 배열 : 국가명과수도명저장 피드백 : 색상변경, 동영상재생 플레이 20쌍중에 4 쌍무작위로선택 글자 : 국가명과수도명 => 그림으로대치 7

8 사전준비항목 퀴즈 여러문제를저장 새로고침하면무작위로그중몇개의문제를선택하여보여줌 사각형내의글자 : 국가명 ( 왼쪽 ), 수도명 ( 오른쪽 ) 8

9 사전준비항목 플레이어 국가명을클릭하면색깔이변함 해당수도를클릭할경우국가명의문자가수도명옆으로이동하고 정답이면색깔이변해표시되고정답수가증가 모든문제의답을맞추면동영상플레이 자바스크립트 canvas 를사용하지않음 9

10 <body onload="init();"> <h1>g20 국가와수도 </h1><br/> 국가와그에맞는수도를차례로클릭하세요 ( 클릭순서무관 ) <p> 게임을새로시작하려면페이지를새로고침하세요. <form name="f" > 결과 : <input name="out" type="text" value=" 정답이냐오답이냐 "/> 점수 : <input name="score" type="text" value="0"/> </form> </p> <video id="vid" controls="controls" preload="auto"> <source src="shortfireworks.mp4" type='video/mp4; codecs="avc1.42e01e, mp4a.40.2"'> <source src="shortfireworks.theora.ogv" type='video/ogg; codecs="theora, vorbis"'> <source src="shortfireworks.webmvp8.webm" type="video/webm; codec="vp8, vorbis"'"> 이브라우저는 video 태그를인식하지못합니다. </video> </body> 10

11 배열정보저장하고가져오기 G20 국가명, 수도명, 선택여부 (facts[0],,facts[19]) var facts = [ [" 중국 "," 베이징 ",false], [" 인도 "," 뉴델리 ",false], [" 유럽연합 "," 브뤼셀 ",false], [" 미국 "," 워싱톤, DC",false], [" 인도네시아 "," 자카르타 ",false], [" 브라질 "," 브라질리아 ",false], [" 러시아 "," 모스크바 ",false], [" 일본 "," 도쿄 ",false], [" 멕시코 "," 멕시코시티 ",false], [" 독일 "," 베를린 ",false], [" 터키 "," 앙카라 ",false], [" 프랑스 "," 파리 ",false], [" 영국 "," 런던 ",false], [" 이탈리아 "," 로마 ",false], [" 남아프리카 "," 프레토리아 ",false], [" 대한민국 "," 서울 ",false], [" 아르헨티나 "," 부에노스아이레스 ",false], [" 캐나다 "," 오타와 ",false], [" 사우디아라비아 "," 리야드 ",false], [" 호주 "," 캔버라 ",false] ]; 11

12 스타일형식 <style>.thing {position:absolute;left: 0px; top: 0px; border: 2px; border-style: double; background-color: white; margin: 5px; padding: 5px; } #vid {position:absolute; visibility:hidden; z- index: 0; } </style> 12

13 공통사용변수 var thingelem; var nq = 4; //number of questions asked in a game var elementinmotion; var makingmove = false; var inbetween = 300; var col1 = 20; var row1 = 200; var rowsize = 50; var slots = new Array(nq); // mark all faces as not being used. for (i=0;i<facts.length;i++) { facts[i][2] = false; } for (i=0;i<nq;i++) { slots[i] = -100; } 13

14 do {c = Math.floor(Math.random()*facts.length);} while (facts[c][2]==true) facts[c][2]=true; // put this thing in random choice from empty slots do {s = Math.floor(Math.random()*nq);} while (slots[s]>=0) slots[s]=c; 14

15 프로그램실행중에 HTML 동적으로생성하기 (1) 국가에대해동적 HTML 생성 var d; uniqueid = "c"+string(c); d = document.createelement('country'); // HTML 요소생성 d.innerhtml = ( "<div class='thing' id='"+uniqueid+"'>placeholder</div>"); document.body.appendchild(d); // 요소를문서에추가 thingelem = document.getelementbyid(uniqueid); // 요소참조를가져옴 thingelem.textcontent=facts[c][0]; thingelem.style.top = String(my)+"px"; thingelem.style.left = String(mx)+"px"; thingelem.addeventlistener('click',pickelement,false); 15

16 프로그램실행중에 HTML 동적으로생성하기 (2) 수도에대해동적 HTML 생성 var d; uniqueid = p"+string(c); d = document.createelement('cap '); // HTML 요소생성 d.innerhtml = ( "<div class='thing' id='"+uniqueid+"'>placeholder</div>"); document.body.appendchild(d); // 요소를문서에추가 thingelem = document.getelementbyid(uniqueid); // 요소참조를가져옴 thingelem.textcontent=facts[c][1]; thingelem.style.top = String(row1+s*rowsize)+"px"; thingelem.style.left = String(col1+inbetween)+"px"; thingelem.addeventlistener('click',pickelement,false); 16

17 선택하기 (pickelement) 17

18 첫번째항목을선택한경우 (makingmove == false) makingmove = true; elementinmotion = this; elementinmotion.style.backgroundcolor = "tan"; 18

19 두번째항목을선택한경우 (makingmove == true) // 두번째항목으로자기자신을선택한경우 if (this==elementinmotion) { elementinmotion.style.backgroundcolor = "white"; makingmove = false; return; } 19

20 두번째항목을선택한경우 (makingmove == true) // 두번째항목으로다른항목을선택한경우 thisx= this.style.left; thisx = thisx.substring(0,thisx.length-2); //remove the px thisxn = Number(thisx) + 115; elementinmotion.style.left = String(thisxn)+"px"; elementinmotion.style.top = this.style.top; makingmove = false; if (this.id.substring(1)==elementinmotion.id.substring(1)) { elementinmotion.style.backgroundcolor = "gold"; this.style.backgroundcolor = "gold"; document.f.out.value = " 정답 "; sc = 1+Number(document.f.score.value); document.f.score.value = String(sc); if (sc==nq) { v = document.getelementbyid("vid"); v.style.visibility = "visible"; v.style.zindex="10000"; v.play(); } } else { document.f.out.value = " 오답 "; elementinmotion.style.backgroundcolor = "white"; } 20

21 21

HTML5

HTML5 행맨 류관희 충북대학교 2 3 4 5 사전준비 단어목록읽기 단어빈칸보여주기 인터페이스를통해알파벳선택하면알파벳사라지기 단어에선택한알파벳이있으면표시하기 없으면선이나타원으로사람형태그리기 게임종료조건 : 모든맞추는경우 모두틀린경우 ( 행맨 ) 6 단어목록배열에저장 words.js var words = [ "muon", "blight","kerfuffle","qat"