質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

87.95%

○×ゲームの勝敗判定

解決済

回答 2

投稿

  • 評価
  • クリップ 0
  • VIEW 3,077

score 41

以下のプログラムで奇数回目(○)か偶数回目(×)が縦、横、斜めのいずれかで三個一列で並んだ時点でアラート文「n(並んだ方の記号)の勝ち!」と表示し、OKボタンを押すと初期状態に戻るようにしたいです。

どのように並んだことを判定させればよいのでしょう?

またどちらも一列に並ばなかった場合も別のアラート文を表示しOKボタンを押すと初期状態になるようにしたいです。

<script>
  try{
  document.addEventListener ('click',function(e){myfunc(e)},true);
  }catch(e){
  document.attachEvent('onclick',function(e){myfunc(e)});
  }
  var cnt=0;
  function myfunc(e){
  var t = (e.srcElement || e.target);
  if(t.nodeName=="INPUT" && t.type=="button"){
    if(t.value==""){
      cnt++;
      t.value=cnt%2==1?"○":"×";
      if(cnt>=9){
        alert("GAMEOVER!(OKでリセットします)");
        resetFunc(t);
        cnt=0;
      }
    }else if( cnt > 2 ){
      alert("そのマスはすでに選ばれています。");
      }
  }
  if(t.nodeName=="INPUT" && t.type=="reset"){
      cnt=0;
      resetFunc(t);
    }
  }
  function resetFunc(t){
    var f=t.form;
    for(var i=0;i<f.length;i++){
      if(f[i].type=="button") f[i].value="";
    }
  }
  </script>
  </head>
  <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="リセット">
  </p>
  </form>
  </body>

よろしくお願いします。

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • 退会済みユーザー

    退会済みユーザー

    2016/06/13 20:37

    As I expected, you asked. You should copy my code.
    https://teratail.com/questions/37829

    キャンセル

  • Alpha

    2016/06/13 20:39

    ??

    キャンセル

  • 退会済みユーザー

    2016/07/25 18:14

    こちらの質問が他のユーザから「やってほしいことだけを記載した丸投げの質問」という指摘を受けました
    「質問を編集する」ボタンから編集を行い、調査したこと・試したことを記入していただくと、回答が得られやすくなります。

回答 2

+2

アルゴリズム的には3パターンあれば実装可能ですね。

  1. 横一行の判定を行数分繰り返す(3回)
  2. 縦一列の判定を列数文繰り返す(3列)
  3. (1) 左上から数えて「x座標」「y座標」をそれぞれ1ずつ減算して照合していく
    (2) 左下から数えて「x座標」「y座標」をそれぞれ1ずつ加算して照合していく

この方法には4x4のマスを作っても対応できる汎用性があります。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

checkベストアンサー

+1

判定のロジックはいろいろ考えられますが、この程度のチェックなら
全通り列記すればよいでしょう

<script>
  try{
  document.addEventListener ('click',function(e){myfunc(e)},true);
  }catch(e){
  document.attachEvent('onclick',function(e){myfunc(e)});
  }
  var cnt=0;
  function myfunc(e){
  var t = (e.srcElement || e.target);
  if(t.nodeName=="INPUT" && t.type=="button"){
    if(t.value==""){
      cnt++;
      t.value=cnt%2==1?"○":"×";
      checkFunc(t);
      if(cnt>=9){
        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+"の勝ち");
  }
}
function resetFunc(t){
    var f=t.form;
    for(var i=0;i<f.length;i++){
      if(f[i].type=="button") f[i].value="";
    }
  }
  </script>
  </head>
  <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="リセット">
  </p>
  </form>
  </body>

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2016/06/17 15:32

    ありがとうございます!
    たしかに図に描くとわかりやすかったですね。

    これを応用して4×4のを作ってみたのですが

    if(cnt>=16){
    alert("GAMEOVER!(OKでリセットします)");
    resetFunc(t);
    cnt=0;
    }


    <td><input type="button"></td>

    あと先ほど質問した部分を修正したのですがうまく動きませんでした。
    他に変えなければならない箇所がある感じでしょうか?

    キャンセル

  • 2016/06/17 17:05

    ○×ゲームで4×4はあまり現実的ではないですが
    一応こんな感じ

    <style>
    .maru{color:white;background-Color:yellow;}
    .batu{color:yellow;background-Color:blue;}
    </style>
    <script>
    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>=16 && !endflg){
    alert("GAMEOVER!(OKでリセットします)");
    resetFunc(t);
    cnt=0;
    }
    }else {
    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++;
    }
    }
    var winflg=false;
    for(var i=0;i<4;i++){
    if(
    (a[i]!=="" && a[i]==a[i+4] && a[i]==a[i+8] && a[i]==a[i+12]) ||
    (a[i*4]!=="" && a[i*4]==a[i*4+1] && a[i*4]==a[i*4+2] && a[i*4]==a[i*4+3])
    ){
    winflg=true;
    break;
    }
    }
    if(
    (a[0]!=="" && a[0]==a[5] && a[0]==a[10] && a[0]==a[15])||
    (a[3]!=="" && a[3]==a[6] && a[3]==a[9] && a[3]==a[12])
    ){
    winflg=true;
    }
    if(winflg){
    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>

    キャンセル

  • 2016/06/18 17:12

    最初の参考にさせていただいたプログラムとだいぶ変わってしまっていてよくわからないのですが。

    最初に参考にさせていただいたプログラムからは修正できないのでしょうか?
    それと色を変える処理はここではいりません。

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 87.95%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る