javascriptで○×ゲームを作っているのですが、以下のことがわからなくて困っています。
1.勝敗が決定したときアラートでリセットをしてくれるようにしたい。
2.ボタンの大きさは縦横ともに100px、マージンは5px。
○×のフォントサイズは50px。
○の色は白、背景はピンク。×の色は白、背景は緑。ボタンが押されていな
い場合は黒色。
リセットボタンのサイズは20px。
プログラムは以下の通りになります。
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>○×ゲーム</title> </head> <h4>○×ゲーム</h4> <script language="JavaScript"> try{ document.addEventListener ('click',function(e){myfunc(e)},true); }catch(e){ document.attachEvent('onclick',function(e){myfunc(e)}); } var cnt=0; var endflg=false; function myfunc(e){ var t = (e.srcElement || e.target); if(t.nodeName=="INPUT" && t.type=="button" && !endflg){ if(t.value==""){ cnt++; if(cnt%2==1){ t.value="○"; t.className="maru"; } else { t.value="×"; t.className="batu"; } checkFunc(t); if(cnt>=9 && !endflg){ alert("GAMEOVER!(OKでリセットします)"); resetFunc(t); cnt=0; } } else if (cnt > 2) { alert("そのマスはすでに選ばれています。"); } } if(t.nodeName=="INPUT" && t.type=="reset"){ cnt=0; resetFunc(t); } } function checkFunc(t){ var f=t.form; var a=new Array(); var j=0; for(var i=0;i<f.length;i++){ if(f[i].type=="button"){ a[j]=f[i].value; j++; } } if( (a[0]!=="" && a[0]==a[1] && a[0]==a[2])|| (a[0]!=="" && a[0]==a[3] && a[0]==a[6])|| (a[0]!=="" && a[0]==a[4] && a[0]==a[8])|| (a[1]!=="" && a[1]==a[4] && a[1]==a[7])|| (a[2]!=="" && a[2]==a[5] && a[2]==a[8])|| (a[2]!=="" && a[2]==a[4] && a[2]==a[6])|| (a[3]!=="" && a[3]==a[4] && a[3]==a[5])|| (a[6]!=="" && a[6]==a[7] && a[6]==a[8])){ var val=cnt%2==1?"○":"×"; alert(val+"の勝ち"); endflg=true; } } function resetFunc(t){ var f=t.form; for(var i=0;i<f.length;i++){ if(f[i].type=="button"){ f[i].value=""; f[i].className=""; } } endflg=false; } </script> <form name="tick"> <table> <tr> <td><input type="button"></td> <td><input type="button"></td> <td><input type="button"></td> </tr> <tr> <td><input type="button"></td> <td><input type="button"></td> <td><input type="button"></td> </tr> <tr> <td><input type="button"></td> <td><input type="button"></td> <td><input type="button"></td> </tr> </table> <input type="reset" value="リセット"> </form> </body> </html>よろしくお願いします。
回答2件
あなたの回答
tips
プレビュー