HTML5 - PDF 무료 다운로드

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

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

주사위게임화면 canvas form 3

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

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

<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

<!DOCTYPE html> <html> <body> <h3>send e-mail to khyoo@chungbuk.ac.kr:</h3> <form action="mailto:khyoo@chungbuk.ac.kr" method="post" enctype="text/plain"> Name:<br> <input type="text" name="name" value="your name"><br> E-mail:<br> <input type="text" name="mail" value="your email"><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

HTML Forms Tag 8

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

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

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

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

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

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

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.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

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

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

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

<!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