html5 캔버스를 이용한 주사위

레비아스 2011. 12. 4. 07:32

2011. 12. 4. 07:32

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>dice Game</title>
<script>
	var cwidth = 400; //캔버스 너비 
	var cheight = 300; // 캔버스 높이
	var dicex = 50; // 주사위 가로 
	var dicey = 50; // 주사위 세로 
	var dicewifth = 100;  //너비 
	var diceheifht = 100; //높이 
	var dotrad = 6; //점 
	var ctx; //캔버스 저장  
	
	function init(){
		var ch = 1 + Math.floor(Math.random() * 6);
		drawface(ch);
	}
	
	function drawface(n){
	    ctx = document.getElementById("canvas").getContext("2d")
		ctx.lineWidth = 5; //선 굵기 
		ctx.clearRect(dicex, dicey, dicewifth, diceheifht); //주사위 면 내부를 지움 
		ctx.strokeRect(dicex, dicey, dicewifth, diceheifht); //주사위 면의 윤곽선 
		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();draw6();break;
		}
	}
	
	function draw1 () {
		  var dotx; //그릴려는 점 1개의 가로 위치 
		  var doty; //그릴려는 점 1개의 세로 위치 
		  
		  ctx.beginPath(); //패스 시작 
		  dotx = dicex+0.5*dicewifth; //이 점 중심을 주사위면의 가로 중심에 지점 
		  doty = dicey+0.5*diceheifht; //세로 중심에도 일치하게 설
		  
		  ctx.arc(dotx, doty, dotrad, 0, Math.PI*2, true);
		  ctx.closePath();
		  ctx.fill();
	}
	
	function draw2 () {
		  var dotx;
		  var doty;
		
		  ctx.beginPath();
		  dotx = dicex + 3 * dotrad;
		  doty = dicey + 3 * dotrad;
		  ctx.arc(dotx, doty, dotrad, 0, Math.PI*2, true);
		  dotx = dicex + dicewifth - 3 * dotrad;
		  doty = dicey + diceheifht - 3 * dotrad;
		  ctx.arc(dotx, doty, dotrad, 0, Math.PI*2, true);
		  ctx.closePath();
		  ctx.fill();
	}
	
	function draw4 () {
		 var dotx;
		 var doty;
		 
		 ctx.beginPath();
		 dotx = dicex + 3 * dotrad;
		 doty = dicey + 3 * dotrad;
		 ctx.arc(dotx, doty, dotrad, 0, Math.PI*2, true);
		 dotx = dicex + dicewifth - 3 * dotrad;
		 doty = dicey + diceheifht - 3 * dotrad;
		 ctx.arc(dotx, doty, dotrad, 0, Math.PI*2, true);
		 dotx = dicex + 3 * dotrad;
		 ctx.closePath();
		 ctx.fill();
		 ctx.beginPath();
		 doty = dicey + diceheifht - 3 * dotrad;
		 ctx.arc(dotx, doty, dotrad, 0, Math.PI*2, true);
		 dotx = dicex + diceheifht - 3 * dotrad;
		 doty = dicey + 3 * dotrad;
		 ctx.arc(dotx, doty, dotrad, 0, Math.PI*2, true);
		 ctx.closePath();
		 ctx.fill();
	}
	
	function draw6 () {
		 var dotx;
		 var doty;
		 
		 ctx.beginPath();
		 dotx = dicex + 3 * dotrad;
		 doty = dicey + 0.5 * diceheifht;
		 ctx.arc(dotx, doty, dotrad, 0, Math.PI * 2, true);
		 dotx = dicex + dicewifth - 3 * dotrad;
		 ctx.arc(dotx, doty, dotrad, 0, Math.PI * 2, true);
		 ctx.closePath();
		 ctx.fill(); 
	}

</script>
</head>
<body onLoad="init ();">
	<canvas id="canvas" width="400" height="300">
		
	</canvas>

</body>
</html>

저작자표시

'프로그래밍 > html&js' 카테고리의 다른 글

html5 오디오 (0)	2012.03.12

Revias Blog

html5 캔버스를 이용한 주사위

'프로그래밍 > html&js' 카테고리의 다른 글

+ Recent posts

티스토리툴바