HTML5

Size: px

Start display at page:

Download "HTML5"

수은 권
6 years ago
Views:

1 짝맞추기게임

2 게임규칙 짝맞추기게임 카드가뒤집혀있으면플레이어는한번에카드두개를클릭해서일치하는카드찾기게임 만약두개의카드가일치하면이두카드를제거 그렇지않으면다시두카드를뒤집어원위치시킴 플레이어가일치하는카드를전부찾으면프로그램종료하고게임걸린시간표시 2

3 게임의시작예 3

4 4

5 5

6 게임의결과표시 <body onload="init();"> <canvas id="canvas" width="900" height="400"> 이브라우저는 HTML5 의 canvas 요소를지원하지않습니다. </canvas> <br/> 두카드를클릭해서서로맞는지확인하세요. <form name="f"> 일치횟수 : <input type="text" name="count" value="0" size="1"/> <p> 퍼즐완료에걸린시각 : <input type="text" name="elapsed" value=" " size="4"/> 초 </p> </form> </body> 6

7 짝맞추기게임 다각형짝맞추기 3 각형, 4 각형, 5 각형, 6 각형, 7 각형, 8 각형 그림짝맞추기 미리입력한인물사진 같은인물맞추기 7

8 카드뒷면그리기 작업해야할사항 같은선택배열이계속나오지않게플레이어의첫선택전에카드섞기 플레이어가카드를클릭할때감지하기, 첫번째와두번째클릭을구별하기 클릭을감지할때적절한카드면 ( 다각형, 사진 ) 을표시하기 일치하는쌍을제거하기 일치하는쌍의수를계산하기 게임경과시간을계산하기 8

9 주요기능 HTML5 문서의구조 Canvas 요소 선분으로구성된패스 사각형, 그림, 패스그리기 사용자정의함수및내장함수 사용자객체 Form 요소 배열 주요새로운기능 시간종료이벤트, Date 객체 캔버스에글자그리기 9

10 초기화면 function init(){ ctx = document.getelementbyid('canvas').getcontext('2d'); canvas1 = document.getelementbyid('canvas'); canvas1.addeventlistener('click',choose,false); makedeck(); // 패를준비하는함수, Card 객체생성 document.f.count.value = "0"; document.f.elapsed.value = ""; starttime = new Date(); // 시간을설정하기위한함수 starttime = Number(starttime.getTime()); shuffle();.// 카드를섞는함수 10

11 카드만들어그리기 //generate deck of cards 6 pairs of polygons function makedeck() { var i; var acard; var bcard; var cx = firstsx; var cy = firstsy; for(i=3;i<9;i++) { acard = new Card(cx,cy,cardwidth,cardheight,i); deck.push(acard); shuffle(); var deck = []; bcard = new Card(cx,cy+cardheight+margin,cardwidth,cardheight,i); deck.push(bcard); cx = cx+cardwidth+ margin; acard.draw(); bcard.draw(); 11

12 var cwidth = 900; var cheight = 400; var ctx; var firstpick = true; var firstcard; var secondcard; var backcolor = "rgb(128,0,128)"; var frontbgcolor = "rgb(251,215,73)"; var polycolor = "rgb(254,11,0)"; var tablecolor = "rgb(255,255,255)"; var cardrad = 30; var deck = []; var firstsx = 30; var firstsy = 50; var margin = 30; var cardwidth = 4*cardrad; var cardheight = 4*cardrad; var tid; var matched; var starttime; 12

13 글자그리기 <html> <head> <title> 글꼴 </title> <script type= text/javascript > function init() { var ctx=document.getelementbyid( canvas ).getcontext( 2d ); ctx.font= 15px Lucida Handwriting ; ctx.filltext( this is Lucida Handwriting, 10,20); ctx.font= italic 30px HarlemNights ; ctx.filltext( italic HarlemNights, 40,80); ctx.font= bold 40px HarlemNights ; ctx.filltext( HarlemNights, 100,200); ctx.font= 30px Accent ; ctx.filltext( Accent + KKK, 200,300); </script> </head> 13

14 다각형그리기 function Polycard(sx,sy,rad,n) { this.sx = sx; this.sy = sy; this.rad = rad; this.draw = drawpoly; this.n = n; this.angle = (2*Math.PI)/n //parens may not be needed. this.moveit = generalmove; function generalmove(dx,dy) { this.sx +=dx; this.sy +=dy; 14

15 다각형그리기 function drawpoly() { ctx.fillstyle= frontbgcolor; ctx.strokestyle=backcolor; ctx.fillrect(this.sx-2*this.rad,this.sy-2*this.rad,4*this.rad,4*this.rad); ctx.beginpath(); ctx.fillstyle=polycolor; var i; var rad = this.rad; ctx.beginpath(); ctx.moveto(this.sx+rad*math.cos(-.5*this.angle),this.sy+rad*math.sin(-.5*this.angle)); for (i=1;i<this.n;i++) { ctx.lineto(this.sx+rad*math.cos((i-.5)*this.angle), this.sy+rad*math.sin((i-.5)*this.angle)); ctx.fill(); 15

16 카드객체 앞면 ( 다각형, 그림 ), 뒤면 ( 색칠된사각형 ) function Card(sx,sy,swidth,sheight,info) { this.sx = sx; this.sy = sy; this.swidth = swidth; this.sheight = sheight; this.info = info; // 앞면을지정할정보 this.draw = drawback; // 뒷면그리기함수 var backcolor = "rgb(128,0,128)"; function drawback() { ctx.fillstyle = backcolor; ctx.fillrect(this.sx,this.sy,this.swidth,this.sheight); 16

17 카드만들어그리기 //generate deck of cards 6 pairs of polygons function makedeck() { var i; var acard; var bcard; var cx = firstsx; var cy = firstsy; for(i=3;i<9;i++) { acard = new Card(cx,cy,cardwidth,cardheight,i); deck.push(acard); shuffle(); var deck = []; bcard = new Card(cx,cy+cardheight+margin,cardwidth,cardheight,i); deck.push(bcard); cx = cx+cardwidth+ margin; acard.draw(); bcard.draw(); 17

18 카드섞기 function shuffle() { //coded to resemble how I shuffled cards when playing concentration var i; var k; var holder; var dl = deck.length var nt; for (nt=0;nt<3*dl;nt++) { //do the swap 3 times deck.length times i = Math.floor(Math.random()*dl); k = Math.floor(Math.random()*dl); holder = deck[i].info; deck[i].info = deck[k].info; deck[k].info = holder; 18

19 카드클릭하기 canvas1 = document.getelementbyid('canvas'); canvas1.addeventlistener('click',choose,false); choose 함수 : - 어느카드를선택해서섞을지알아내는코드필요 - 플레이어가캔버스를클릭할때마우스좌표를반환해야함 function choose(ev) { var mx; var my; var pick1; var pick2; var mx; var my; var pick1; var pick2; if ( ev.layerx ev.layerx == 0) { // Firefox mx= ev.layerx; my = ev.layery; else if (ev.offsetx ev.offsetx == 0) { // Opera mx = ev.offsetx; my = ev.offsety; 19

20 카드클릭하기 for (i=0;i<deck.length;i++) { var card = deck[i]; if (card.sx >=0) //this is the way to avoid checking for clicking on this space if ((mx>card.sx)&&(mx<card.sx+card.swidth)&&(my>card.sy)&& (my<card.sy+card.sheight)) { //check that this isn't clicking on first card if ((firstpick) (i!=firstcard)) break; 20

21 카드클릭하기 if (i<deck.length) { //clicked on a card if (firstpick) { firstcard = i; firstpick = false; // create poly to draw it on top of back pick1 = new Polycard(card.sx+cardwidth*.5,card.sy+cardheight*.5,cardrad,card.info); pick1.draw(); else { 두번째선택 21

22 카드클릭하기 { secondcard = i; pick2 = new Polycard(card.sx+cardwidth*.5,card.sy+cardheight*.5,cardrad,card.info); pick2.draw(); if (deck[i].info==deck[firstcard].info) { matched = true; var nm = 1+Number(document.f.count.value); document.f.count.value = String(nm); if (nm>=.5*deck.length) { var now = new Date(); var nt = Number(now.getTime()); var seconds = Math.floor(.5+(nt-starttime)/1000); document.f.elapsed.value = String(seconds); //need to fo to flipback for the last match else { matched = false; firstpick = true; tid = settimeout(flipback,1000); 22

23 일시정지효과넣기 플레이어가카드두장을비교할수있게일시정지 settimeout(flipback, 1000); firstpick matched function flipback() { var card; if (!matched) { deck[firstcard].draw(); deck[secondcard].draw(); else { ctx.fillstyle = tablecolor; ctx.fillrect(deck[secondcard].sx,deck[secondcard].sy, deck[secondcard].swidth,deck[secondcard].sheight); ctx.fillrect(deck[firstcard].sx,deck[firstcard].sy, deck[firstcard].swidth,deck[firstcard].sheight); deck[secondcard].sx = -1; deck[firstcard].sx = -1; 23

24 Date 를이용한시간측정 starttime = new Date(); starttime = Number(starttime.getTime()); var now=new Date(); var nt =Number(now.getTime()); var seconds=math.floor(0.5+(nt-starttime)/1000); 24

25 그림짝맞추기 25

26 var pairs = [ ["allison1.jpg","allison2.jpg"], [ "grant1.jpg","grant2.jpg"], ["liam1.jpg","liam2.jpg"], ["aviva1.jpg","aviva2.jpg"], ["daniel1.jpg","daniel2.jpg"] ] function drawback() { ctx.fillstyle = backcolor; ctx.fillrect(this.sx,this.sy,this.swidth,this.sheight); function Card(sx,sy,swidth,sheight, img, info) { this.sx = sx; this.sy = sy; this.swidth = swidth; this.sheight = sheight; this.info = info; this.img = img; this.draw = drawback; // 첫번째선택 firstcard = i; firstpick = false; ctx.drawimage(card.img,card.sx,card.sy,card.swidth,card.sheight); // 두번째선택 secondcard = i; ctx.drawimage(card.img,card.sx,card.sy,card.swidth,card.sheight); 26

27 function makedeck() { var i; var acard; var bcard; var pica; var picb; var cx = firstsx; var cy = firstsy; for(i=0;i<pairs.length;i++) { pica = new Image(); pica.src = pairs[i][0]; acard = new Card(cx,cy,cardwidth,cardheight,pica,i); deck.push(acard); picb = new Image(); picb.src = pairs[i][1]; bcard = new Card(cx,cy+cardheight+margin,cardwidth,cardheight,picb,i); deck.push(bcard); cx = cx+cardwidth+ margin; acard.draw(); bcard.draw(); 27

HTML5

HTML5 미로 류관희 미로만들고이동하는프로그래밍기법 플레이어가직접미로만들어저장 벽의충돌검사 미로프로그램 캔버스 ( 객체, 미로의벽 ) 토큰 ( 오각형 ) 과벽의충돌검사 미로의벽그리기 마우스이용 토큰의이동 ( 화살표를이용 ) 2 1 차버전미로 모든기능을하나의파일 2 차버전미로 미로제작하는코드파일 플레이어가라디오버튼으로미로를선택할수있는코드파일 3 미로구조제작 화살표키로토큰움직이기