body영역에 있는 canvas들을 javascript영역에서 셔플함수를 이용해 카드들을 섞는것까지는 했습니다. 그런데 다음 코드를 보시면 아시겠지만 색상만 섞일뿐 이벤트까지 섞이지는 않더군요 ㅠㅠ 어떻게하면 body영역에 있는것들을 javascript영역에서 이미지뿐만 아니라 이벤트까지 셔플할수있는지 알려주세요 ㅜㅜ
(요약하자면.. 카드들이 섞였을때 빨간색카드를 클릭해야 이벤트 실행되게끔 해야해요)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>연습</title>
</head>
<body>
<canvas id="a_canvas" width="140" height="200"></canvas>
<canvas id="b_canvas" width="140" height="200"></canvas>
<canvas id="c_canvas" width="140" height="200"></canvas>
<canvas id="d_canvas" width="140" height="200"></canvas>
<canvas id="e_canvas" width="140" height="200"></canvas>
<canvas id="f_canvas" width="140" height="200"></canvas>
<canvas id="g_canvas" width="140" height="200"></canvas>
<canvas id="bomb1_canvas" width="140" height="200"></canvas>
<canvas id="bomb2_canvas" width="140" height="200"></canvas>
<canvas id="bomb3_canvas" width="140" height="200"></canvas>
<script type="text/javascript">
var canvasA = document.getElementById("a_canvas"); //메서드를 호출해 캔버스 객체를 얻고. 인수를지정
var canvasB = document.getElementById("b_canvas");
var canvasC = document.getElementById("c_canvas");
var canvasD = document.getElementById("d_canvas");
var canvasE = document.getElementById("e_canvas");
var canvasF = document.getElementById("f_canvas");
var canvasG = document.getElementById("g_canvas");
var canvasH = document.getElementById("bomb1_canvas");
var canvasI = document.getElementById("bomb2_canvas");
var canvasJ = document.getElementById("bomb3_canvas");
var cards = [];
cards[0] = canvasA.getContext("2d");//렌더링 컨텍스트를 얻어 각각의 변수cards에 저장
cards[1] = canvasB.getContext("2d");
cards[2] = canvasC.getContext("2d");
cards[3] = canvasD.getContext("2d");
cards[4] = canvasE.getContext("2d");
cards[5] = canvasF.getContext("2d");
cards[6] = canvasG.getContext("2d");
cards[7] = canvasH.getContext("2d");
cards[8] = canvasI.getContext("2d");
cards[9] = canvasJ.getContext("2d");
function shuffle(d){ //셔플(랜덤함수)
for(var c = d.length-1;c>0;c--)
{
var b = Math.floor(Math.random()*(c+1));
var a = d[c];
d[c] = d[b];
d[b] = a;
}
}
var shuffled = cards
shuffled = shuffle(shuffled); //셔플함수를 이용하여 카드들의 렌더링객체들을 섞는다.
cards[0].fillStyle="rgb(255,0,0)"; //색을 지정
cards[0].fillRect(50,50,200,200); //사형을 렌더링
cards[1].fillStyle="rgb(255,187,0)";
cards[1].fillRect(50,50,200,200);
cards[2].fillStyle="rgb(255,255,0)";
cards[2].fillRect(50,50,200,200);
cards[3].fillStyle="rgb(29,219,22)"; //113,12,153 보라 255,255,0 노
cards[3].fillRect(50,50,200,200);
cards[4].fillStyle="rgb(1,0,255)";
cards[4].fillRect(50,50,200,200);
cards[5].fillStyle="rgb(70,65,217)";
cards[5].fillRect(50,50,200,200);
cards[6].fillStyle="rgb(113,12,153)";
cards[6].fillRect(50,50,200,200);
cards[7].fillStyle="rgb(43,25,2)";
cards[7].fillRect(50,50,200,200);
cards[8].fillStyle="rgb(124,21,55)";
cards[8].fillRect(50,50,200,200);
cards[9].fillStyle="rgb(30,215,155)";
cards[9].fillRect(50,50,200,200);
var tStart, tFinish, tInterval;
function gameStart() {
document.getElementById('tstart').innerHTML = "?";
document.getElementById('tfinish').innerHTML = "?";
document.getElementById('tinterval').innerHTML = "?";
var b = document.getElementById('a_canvas');
b.onclick = gamemid;
}
function gamemid(){
tStart = new Date();
//var tS = new SimpleDateFormat(mm:ss);
document.getElementById('tstart').innerHTML = tStart;
}
window.onload = function()
{
gameStart();
}
</script>
<h1> Start:<span id="tstart">?</span></h1>
<h1>Finish:<span id="tfinish">?</span><h1>
<hr>
<h1>E.Time:<span id="tinterval"></span> seconds.</h1>
<br>
</body>
</html>
글쓰기