<html>
<head>
    <title>±â¾ï·Â °ÔÀÓ: »çÁø ¸ÂÃß±â</title>
    <style>
	form {
	width:330px;
	margin:20px;
	background-color:pink;
	padding:20px;
	}
	input {
	text-align:right;
	}
	</style>
    <script type="text/javascript">
	var cwidth = 900;
	var cheight = 400;
	var ctx;
	var firstpick = true;
	var firstcard = -1;
	var secondcard;
	var backcolor = "rgb(128,0,128)";
	var tablecolor = "rgb(255,255,255)";
	var deck = [];
	var firstsx = 30;
	var firstsy = 50;
	var margin = 30;
	var cardwidth = 100;
	var cardheight = 100;
	var tid;
	var matched;
	var starttime;
	var count = 0;
	var pairs = [
		["allison1.jpg","allison2.jpg"],
	   [ "grant1.jpg","grant2.jpg"],
	  ["liam1.jpg","liam2.jpg"],
	   ["aviva1.jpg","aviva2.jpg"],	   
	   ["daniel1.jpg","daniel2.jpg"]	   
	]
	
// µ¥Å©¿¡´Â Ä«µå Á¤º¸(À§Ä¡, Å©±â, ±×¸² Ãâó, ½Äº° Á¤º¸)°¡ µé¾îÀÖÀ½
// ÀÌ Á¤º¸´Â makedeck ÇÔ¼ö¿¡ µé¾îÀÖ´Â ¹è¿­ÀÇ ¹è¿­À» ÅëÇØ ÁöÁ¤µÊ

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;
}

// ´Ù°¢Çü Ä«µå 5½Ö ¹­À½À» »ý¼º
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();
	}
	
}

function shuffle() {
// Çö½ÇÀÇ ±â¾ï·Â °ÔÀÓ¿¡¼­ Ä«µå¸¦ ¼¯´Â ¹æ½Ä°ú Èí»çÇϵµ·Ï ÄÚµù
// ¹Ù²î´Â Á¤º¸(ÀÏÄ¡ Ä«µå¸¦ ³ªÅ¸³»´Â img¿Í info)¸¦ ±³Ã¼
var i;
var k;
var holderinfo;
var holderimg;
var dl = deck.length
var nt;
	for (nt=0;nt<3*dl;nt++) {  // ±³Ã¼¸¦ 3 °öÇϱâ deck.length¹ø ½Ç½Ã
	  i = Math.floor(Math.random()*dl);
	  k = Math.floor(Math.random()*dl);
	  holderinfo = deck[i].info;
	  holderimg = deck[i].img;
	  deck[i].info = deck[k].info;
	  deck[i].img = deck[k].img;
	  deck[k].info = holderinfo;
	  deck[k].img = holderimg;
	}
}


function drawback() {
	ctx.fillStyle = backcolor;
	ctx.fillRect(this.sx,this.sy,this.swidth,this.sheight);	
}


function choose(ev) {
	var out;
	var mx;
	var my;
	var pick1;
	var pick2;
	if ( ev.layerX ||  ev.layerX == 0) { // ÆÄÀÌ¾îÆø½º
   			mx= ev.layerX;
    		my = ev.layerY;
  		} else if (ev.offsetX || ev.offsetX == 0) { // ¿ÀÆä¶ó
    		mx = ev.offsetX;
    		my = ev.offsetY;
  		}
	var i;
	for (i=0;i<deck.length;i++){
		var card = deck[i];
		if (card.sx >=0)  // ÀÌ·¸°Ô Çϸé, ÀÌ °ø°£ÀÌ Å¬¸¯µÆ´ÂÁö °Ë»çÇÏÁö ¾Ê¾Æµµ µÊ
		if ((mx>card.sx)&&(mx<card.sx+card.swidth)&&(my>card.sy)&&(my<card.sy+card.sheight)) {
			// ù ¹øÂ° Ä«µå¿¡ ´ëÇÑ Å¬¸¯ÀÌ ¾Æ´ÑÁö È®ÀÎ
			if ((firstpick)|| (i!=firstcard)) {
				break;}
		}
	}
	if (i<deck.length) {  // Ä«µå°¡ Ŭ¸¯µÇ¸é
		if (firstpick) {
			firstcard = i;
			firstpick = false;
			ctx.drawImage(card.img,card.sx,card.sy,card.swidth,card.sheight); 
		}
		else {
			secondcard = i;
			ctx.drawImage(card.img,card.sx,card.sy,card.swidth,card.sheight); 
		  	if (card.info==deck[firstcard].info) {
				matched = true;
				count++;
				ctx.fillStyle= tablecolor;
				ctx.fillRect(10,340,900,100);
				ctx.fillStyle=backcolor;
				ctx.fillText("ÇöÀç±îÁö ¸ÂÃá Ƚ¼ö: "+String(count),10,360);
				if (count>= .5*deck.length) {
					var now = new Date();
					var nt = Number(now.getTime());
					var seconds = Math.floor(.5+(nt-starttime)/1000); 
					ctx.fillStyle= tablecolor;
					ctx.fillRect(0,0,900,400);
					ctx.fillStyle=backcolor;
					out = "°ÔÀÓ ¿Ï·á±îÁö "+String(seconds)+ " ÃÊ °É·È½À´Ï´Ù.";
					ctx.fillText(out,10,100);
					ctx.fillText("´Ù½Ã ÇϽ÷Á¸é ÆäÀÌÁö¸¦ »õ·Î°íħ Çϼ¼¿ä.",10,300);
					return;
				}
				
			}
			else {
				matched = false;
			}
			firstpick = true;
			tid = setTimeout(flipback,1000);
		}
	}
}

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;
	}
}

function init(){
   ctx = document.getElementById('canvas').getContext('2d'); 
   canvas1 = document.getElementById('canvas');
   canvas1.addEventListener('click',choose,false);
   makedeck();
   shuffle();
   ctx.font="bold 20pt sans-serif";
   ctx.fillText("¸ÂÃ纼 µÎ Ä«µå¸¦ Ŭ¸¯Çϼ¼¿ä.",10,20);
   ctx.fillText("ÇöÀç±îÁö ¸ÂÃá Ƚ¼ö: 0",10,360);
   starttime = new Date();
   starttime = Number(starttime.getTime());
  } 

</script>
</head>
<body onLoad="init();">  
<canvas id="canvas" width="900" height="400">
ÀÌ ºê¶ó¿ìÀú¿¡¼­´Â HTML5ÀÇ canvas ¿ä¼Ò°¡ Áö¿øµÇÁö ¾Ê½À´Ï´Ù.
</canvas>  
<br/>

</body>
</html>