HTML5

Size: px

Start display at page:

Download "HTML5"

재용 노
6 years ago
Views:

1 주사위게임 류관희 충북대학교

2 주사위게임규칙 플레이어 두개의주사위를던졌을때두주사위윗면숫자의합 The First Throw( 두주사위의합 ) 합 : 7 혹은 11 => Win 합 : 2, 3, 혹은 12 => Lost 합 : 4, 5, 6, 8, 9, 10 => rethrow The Second Throw 합 : 첫번째던진주사위합과같은면 => Win 합 : 그렇지않으면 => Lost 2

3 주사위게임화면 canvas form 3

4 HTML Forms 사용자입력의다른종류를선택하기위해사용 Create text fields 문장필드에문자열을쓸수있게함 Create password field 비밀번호필드를생성하여입력하게함 4

5 HTML Forms 데이터를서버에전달하기위해사용될수있음 입력요소 : text fields, checkboxes, radiobuttons, submit buttons and more. select lists, textarea, fieldset, legend, and label elements. <form> 태그사용 5

6 <input> 요소 HTML Forms text field, checkbox, password, radio button, submit button, and more. <form> First name:< input type="text" name="firstname"><br> Last name:< input type="text" name="lastname"> < /form> <form> Password:< input type="password" name="pwd"> < /form> <form name="input" action="html_form_action.asp" method="get"> Username: <input type="text" name="user"> <input type="submit" value="submit"> < /form> 6

7 <!DOCTYPE html> <html> <body> <h3>send to <form method="post" enctype="text/plain"> Name:<br> <input type="text" name="name" value="your name"><br> <br> <input type="text" name="mail" value="your "><br> Comment:<br> <input type="text" name="comment" value="your comment" size="50"><br><br> <input type="submit" value="send"> <input type="reset" value="reset"> </form> </body> </html> 7

8 HTML Forms Tag 8

9 HTML Forms <button onclick="throwdice();"> 주사위던지기 </button> <form name="f" id="f"> 판 : <input name="stage" value=" 첫번째던지기 "/> 포인트 : <input name="pv" value=" "/> 결과 : <input name="outcome" value=" "/> </form> document.f.stage.value=" 새로시작 "; document.f.pv.value=sum; document.f.outcome.value = " 이겼습니다."; 9

10 주사위그림그리기 10

11 Canvas <canvas> 태그 : JavaScript 를통해그래픽스를그릴때사용 <canvas> 요소는그리는능력은없음 그래픽스를그리기위해서는 JavaScript 를사용 getcontext() method: an object(methods and properties for drawing on the canvas) getcontext("2d") object: text, lines, boxes, circles, and more - on the canvas. 11

12 Canvas 예 <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>canvas 예 </title> <script> function init() { var ctx = document.getelementbyid("canvas").getc ontext("2d"); ctx.strokestyle="rgb(200,0,0)"; ctx.clearrect(0, 0, 400, 300); ctx.strokerect(0, 0, 400, 300); ctx.stroke(); } </script> </head> <body onload="init();"> <canvas id="canvas" width = "400" height="300"> 이브라우져는 HTML5 의 Canvas 요소를지원하지않습니다. </canvas> <br/> </body> </html> 12

13 Canvas 지원기능 Color, Styles, Shadows Line Styles Rectangles Paths(line, Polyline, Arc, Curve ) Transformations Text Image Drawing Pixel Manipulation Compositing 13

14 Canvas Rectangles <script> var c = document.getelementbyid("mycanvas"); var ctx = c.getcontext("2d"); ctx.fillstyle = "#FF0000"; ctx.fillrect(0,0,150,75); < /script> <script> var c = document.getelementbyid("mycanvas"); var ctx = c.getcontext("2d"); ctx.linewidth=5; ctx.strokestyle = rgb(255,0,0)"; ctx.strokerect(0,0,150,75); < /script> 14

15 Canvas 선그리기 moveto(x,y) defines the starting point of the line lineto(x,y) defines the ending point of the line stroke() method to actually draw the line var c = document.getelementbyid("mycanvas"); var ctx = c.getcontext("2d"); ctx.moveto(0,0); ctx.lineto(200,100); ctx.stroke(); 15

16 Canvas 원그리기 arc(cx, cy, radius, start_angle, end_angle, direction) cx,cy: 원의중심, radius: 반지름, start_angle, edm_angle: radian, direction(true): CCW var c = document.getelementbyid("mycanvas"); var ctx = c.getcontext("2d"); ctx.beginpath(); ctx.strokestyle= rgb(255,0,0) ; ctx.arc(200,200,50,0,math.pi, false); ctx.stroke(); ctx.beginpath(); ctx.strokestyle= rgb(255,0,0) ; ctx.arc(200,200,50,0,math.pi, false); ctx.closepath(); ctx.stroke(); 16

Canvas 원그리기 var c = document.getelementbyid("mycanvas"); var ctx = c.getcontext("2d"); ctx.beginpath(); ctx.strokestyle= rgb(255,0,0) ; ctx.arc(200,200,50,0,math.pi*2, false); ctx.

17 Canvas 원그리기 var c = document.getelementbyid("mycanvas"); var ctx = c.getcontext("2d"); ctx.beginpath(); ctx.strokestyle= rgb(255,0,0) ; ctx.arc(200,200,50,0,math.pi*2, false); ctx.stroke(); Ctx.lineWidth=5; ctx.strokestyle="rgb(255,0,0)"; ctx.fillstyle="rgb(0,0,255)"; ctx.arc(200,200,50,0, Math.PI*2, false); ctx.closepath(); ctx.fill(); ctx.linewidth=5; ctx.stroke(); 17

18 Canvas 주사위그리기 <!DOCTYPE html> <html> <body> <canvas id="mycanvas" width="150" height="150" style="border:1px solid #d3d3d3;"> Your browser does not support the HTML5 canvas tag.</canvas> <script> var c=document.getelementbyid("mycanvas"); var ctx=c.getcontext("2d"); ctx.arc(50,50,10,0,2*math.pi); ctx.closepath(); ctx.arc(110,50,10,0,2*math.pi); ctx.closepath(); ctx.arc(50,80,10,0,2*math.pi);ctx.closepath(); ctx.arc(110,80,10,0,2*math.pi);ctx.closepath(); ctx.arc(50,110,10,0,2*math.pi);ctx.closepath(); ctx.arc(110,110,10,0,2*math.pi);ctx.closepath(); ctx.fill(); </script> </body> </html> 18

19 플레이어 주사위게임규칙 두개의주사위를던졌을때두주사위윗면숫자의합 The First Throw( 두주사위의합 ) 합 : 7 혹은 11 => Win 합 : 2, 3, 혹은 12 => Lost 합 : 4, 5, 6, 8, 9, 10 => rethrow The Second Throw 합 : 첫번째던진주사위합과같으면 => Win 합 : 그렇지않으면 => Lost 19

20 던진주사위의상태를그리기 canvas 20

21 <!doctype html> <html lang="kr"> <head> <script> function throwdice() { } </script> <body> <canvas id="canvas" width = "400" height="300"> 이브라우져는 HTML5 의 Canvas 요소를지원하지않습니다. </canvas> <br/> <button onclick="throwdice();"> 주사위던지기 </button> </body> </html> 21

22 <script> var cwidth=400; var cheight = 300; var dicex=50; var dicey=50; var dicewidth=100; var diceheight = 100; var dotrad=6; var ctx; var dx; var dy; function throwdice() { var ch=1+math.floor(math.random()*6); dx = dicex; dy = dicey; drawface(ch); dx=dicex+150 ch=1+math.floor(math.random()*6); drawface(ch); } function drawface(n) { ctx=document.getelementbyid('canvas').getcontext('2d' ctx.linewidth=5; ctx.clearrect(dx, dy, dicewidth, diceheight); ctx.strokerect(dx, dy, dicewidth, diceheight); var dotx; var doty; ctx.fillstyle="#009966"; switch(n) { case 1: draw1(); break; case 2: draw2(); break; case 3: draw2(); draw1(); break; case 4: draw4(); break; case 5: draw4(); draw1(); break; case 6: draw4(); draw2mid(); break; } } </script> 22

쉽게 풀어쓴 C 프로그래밍

쉽게 풀어쓴 C 프로그래밍 CHAPTER 3. HTML 멀티미디어와입력요소 웹브라우저와멀티미디어 예전방법 : HTML 안에서는 나 태그를사용하여야했고웹브라우저에는플래시나 ActiveX 를설치 HTML5: 와 태그가추가 오디오 요소의속성 오디오파일형식 MP3 'MPEG-1 Audio Layer-3' 의약자로 MPEG