トランプを上から順に取得し、5枚表示後トランプを選択(クリック)したらそのトランプの背景色を変更させ、変更buttonで次のカードに入れ替える処理を作りたいのですが、うまくいきません。現在input type="imageを用いて、<a>を用いたほうがいいと助言をいただいたのですが、作り方が皆目見当つきません。
どうかお願いします。
具体的には、カードをランダムで表示することはできていても、クリックすると初めの状態に戻る、ということが起きてonclickで関数を実行することができません。
html
1<!DOCTYPE heml> 2<html> 3 4<body> 5 6 <head> 7 <meta charset="UTF-8"> 8 <meta name="author" content=""> 9 <link rel="stylesheet" href="poker.css" media="all"> 10 <canvas id="Main" width="550" height="200"></canvas> 11 <div style="position:absolute; top:2px; left:100px;" <title>ポーカー</title> 12 </div> 13 </head> 14 <form name="forms"> 15 <input type="button" value="ゲームスタート!" onClick="game_start()" name="start" style="width:300px;height:80px;font-size:30px"> 16 <table border=1 cellspacing=" 5 "> 17 </form> 18 <div id=C ard> 19 <tr bgcolor="#ff000d"> 20 <th>相手</th> 21 <th> 22 <input type="image" src="" id="image1"> 23 </th> 24 <th> 25 <input type="image" src="" id="image3"> 26 </th> 27 <th> 28 <input type="image" src="" id="image5"> 29 </th> 30 <th> 31 <input type="image" src="" id="image7"> 32 </th> 33 <th> 34 <input type="image" src="" id="image9"> 35 </th> 36 </tr> 37 <tr bgcolor="#ffa32f"> 38 <th>自分</th> 39 <th> 40 <input type="image" src="" id="image2"> 41 </th> 42 <th> 43 <input type="image" src="" id="image4"> 44 </th> 45 <th> 46 <input type="image" src="" id="image6"> 47 </th> 48 <th> 49 <input type="image" src="" id="image8"> 50 </th> 51 <th> 52 <input type="image" src="" id="image10"> 53 </th> 54 </tr> 55 </table> 56 </div> 57</body> 58<script type="text/javascript"> 59<!-- 60var P=1; 61var Origin = []; 62var Deck = []; 63var MyCard = []; 64var YouCard = []; 65 66function game_start() { 67 j = 1; 68 k = 1; 69 70 for (i = 101; i <= 113; i++, j++) { //スペード 71 Origin[j] = i; 72 } 73 for (i = 201; i <= 213; i++, j++) { //ハート 74 Origin[j] = i; 75 } 76 for (i = 301; i <= 313; i++, j++) { //ダイヤ 77 Origin[j] = i; 78 } 79 for (i = 401; i <= 413; i++, j++) { //クローバー 80 Origin[j] = i; 81 } 82 for (j = 1; j <= 52; j++) { 83 var M = (Math.floor(Math.random() * (53 - 1) + 1)); //ここで範囲内の値でランダムをとる-配列数 84 if (Origin[M] != 0) { //オリジナル配列の中身がある場合 85 Deck[j] = Origin[M]; //山札の上から順に入れていく 86 Origin[M] = 0; //使ったオリジナル配列の中身は消去 87 } else { //一度使ったMに当たった場合 88 while (1) { //breakするまで処理 89 var N = (Math.floor(Math.random() * (53 - 1) + 1)); //再度ランダム 90 if (Origin[N] != 0) { //ランダムNが消去されたオリジナル配列以外に当たったら 91 Deck[j] = Origin[N]; //山札の上からいれていく 92 break; 93 } 94 } 95 Origin[N] = 0; //オリジナル配列消去 96 97 } 98 //document.write("<BR>"+j+":::"+Deck[j]);1-52の並び順チェック 99 } 100 for (j = 1, k = 1; j <= 52; j++, k++) { 101 document.getElementById("image" + j).src = Deck[j] + ".png"; 102 if (j % 2 == 1) { 103 YouCard[k] = Deck[j]; 104 Deck[j]=0; 105 } else { 106 MyCard[k] = Deck[j]; 107 Deck[j]=0; 108 } 109 } 110} 111 112function TEHUDA1() { 113 document.getElementById("image"+2).src = Deck[11] + ".png"; 114 return false; 115} 116function TEHUDA2() { 117 document.getElementById("image"+4).src = Deck[12] + ".png"; 118 return false; 119} 120function TEHUDA3() { 121 document.getElementById("image"+6).src = Deck[13] + ".png"; 122 return false; 123} 124function TEHUDA4() { 125 document.getElementById("image"+8).src = Deck[14] + ".png"; 126 return false; 127} 128function TEHUDA5() { 129 document.getElementById("image"+10).src = Deck[15] + ".png"; 130 return false; 131} 132 133 134 135 136// --> 137</script> 138
回答1件
あなたの回答
tips
プレビュー