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