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

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

ただいまの
回答率

88.92%

オセロのプログラムを初めて作ってみたのですがうまくいきません

解決済

回答 2

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 1,551

hamesurodorige

score 11

前提・実現したいこと

ここに質問したいことを詳細に書いてください
オセロプログラムの添削をお願いします。
aiも作りたいのですがどのようにやればできますか
置く場所のアシスト機能も付けたいです。

発生している問題・エラーメッセージ

どこでエラーが起きて表示できないのかわかりません。

該当のソースコード

<html lang="ja">
<head>
<meta charset="utf-8">
<title>othello</title>
<script>

//盤面を生成(8×8)する処理
(function(){
  var Piece;
  var showboard=function(){
    var b=document.getElementById("board");
    while(b.firstChild){
      b.removeChild(b.firstChild);
    }
    for(var y=1;y<=8;y++){//番兵があるから1から
    for(var x=1;x<=8;x++){//番兵があるから1から
//32ピクセルずつ作っていく
    var c=Piece[board[x][y]].cloneNode(true);
    c.style.left=((x-1)*32)+"px";
    c.style.top=((y-1)*32)+"px";
    b.appendChild(c);
    if(board[x][y]==0){
      (function(){
        var t=x;
        var m=y;
      c.onclick=function(){
        if((Direction conversion)t,m,true){
      skip();
//手番交代
        Change=3-Change;
              }
            };
          })();
        }
      }
    }
  };
//スペースの確保する処理
  var board = [];
  onload=fanction(){
    Change=2;
    Piece=[document.getElementById("cell")];
    for(var i=0;i<10;i++){
        board[i]=[];
          for(var j=0;j<10;j++){
            board[i][j]=0;
          }
        }
//初期配置
        board[4][5]=1;//黒
        board[5][4]=1;//黒
        board[4][4]=2;//白
        board[5][5]=2;//白
        showboard();
      };
var Change;

var skip=function(){
var kuro=0;
var siro=0;
Change=3-Change;
var message=((turn==1)?"黒":"白");
//選択した箇所の周囲8箇所に石が置けるかどうか判別する
for(var x=1;x<=8;x++){
for(var y=1;y<=8;y++){
if( board[x][y]==0&&Direction conversion(x,y,false)){
document.getElementById("message").innerHTML=message+"の番だよ^^";
showboard();
return;
}
}
}
Change=3-Change;
message+="pass<br>"+((turn==1)?"黒":"白")+"の番だよ^^";
for(x=1;x<=8;x++){
for(y=1;y<=8;y++){
if( board[x][y]==0&&Direction conversion(x,y,false)){
document.getElementById("message").innerHTML=message;
showBoard();
return;
}else{
if(board[x][y]==1){kuro++;}
if(board[x][y]==2){siro++;}
}
}
}
message="黒:"+kuro+"白"+siro+"<br>";
if(kuro==siro){
message+="同点かよ"
alert("終了");
}
else{
message+=((kuro>siro)?"黒":"白")+"の勝ちやで";
alert("終了");
}
document.getElementById("massage").innerHTML=message;
showboard();
};


var Direction conversion=function(x,y,Inside out){
//周囲8箇所が壁,自分の石,空白の場合以降の処理を行わない
for(var fx=-1;fx<=1;fx++){
for(var fy=-1;fy<=1;fy++){
if(dx==0&&dy==0){continue;}
var s=x+dx;
var z=y+dy;
var l=0;
//相手の石を挟んで自分の石がある場合、間の相手の石をひっくり返す
while(board[s][z]==3-Change)[l++;s+=dx;z+=dy;]
if(n>0&&board[s][z]==Change){
return+=l;
if(Inside out){
s=x+dx;
z=y+dy;
while(board[s][z]==3-Change){
board[s][z]=Change;
s+=dx;
z+=dy;
}
bord[x][y]=Change;
}
}
}
}
};
})();

```

</script>
</head>
<body>
<div style="display:none">
<div id="cell" style="position:absolute;width:33px;height:33px;background-color:#000">
<div style="position:relative;top1px;left:1px;width:31px;height:31px;background-color:#00ee00">
</div>
</div>
<div id="white" style="position:absolute;width:33px;height:33px;background-color:#000">
<img style="display:block;position:relative;top:1px;left:1px;width:31px;height:31px" src="white.png">
</div>
<div id="black" style="position:absolute;width:33px;height:33px;background-color:#000">
<img style="display:block;position:relative;top:1px;left:1px;width:31px;height:31px" src="black.png">
</div>
</div>
<div id ="board" style="position:absolute;width250px;height:250px;"></div>
</body>
</html>

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

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

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

  • kei344

    2016/12/05 11:24

    質問文のコードはコードブロックで囲んでいただけませんか? ```(バッククオート3つ)で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。

    キャンセル

  • kei344

    2016/12/05 14:20 編集

    「------------------------------」ではなく「```」(バッククオート3つ)でお願いします。(追記:)コードブロックに入れるのはHTMLを含めコード全体でお願いします。

    キャンセル

  • naomi3

    2016/12/06 00:17

    「return+=l;」は何をしたいのか教えてください。

    キャンセル

  • hamesurodorige

    2016/12/06 18:15

    inside outがtrueだったらひっくり返すためのもの

    キャンセル

回答 2

checkベストアンサー

0

まずは、わかりやすく、そして若干の修正をしました。
これを参考に直してみてしてください。

//盤面を生成(8×8)する処理
(function()
{
    // 定数
    var NO_STONE = 0; //なし
    var KURO = 1; //黒
    var SIRO = 2; //白
    var KURO_SIRO = KURO + SIRO;

    var moveInGame;

    var cells;
    var showBoard = function()
    {
        var boardElement = document.getElementById("board");

        while (boardElement.firstChild)
        {
            boardElement.removeChild(boardElement.firstChild);
        }

        for (var y = 1; y <= 8; y++)
        {//番兵があるから1から
            for (var x = 1; x <= 8; x++)
            {//番兵があるから1から
                //32ピクセルずつ作っていく
                var cloneOfCells = cells[board[x][y]].cloneNode(true);

                cloneOfCells.style.left = ((x - 1) * 32) + "px";
                cloneOfCells.style.top  = ((y - 1) * 32) + "px";
                boardElement.appendChild(cloneOfCells);

                if (board[x][y] == 0) {

                    (function(t, m)
                    {
                        cloneOfCells.onclick = function()
                        {
                            if (Direction_conversion(t, m, true))
                            {
                                skip();
                                //手番交代
                                moveInGame = KURO_SIRO - moveInGame;
                            }
                        };
                    })(x, y);
                }
            }
        }
    };


    //スペースの確保する処理
    var board = [];
    onload = function()
    {
        moveInGame = SIRO;
        cells = [document.getElementById("cell")];
        for (var i = 0; i < 10 ; i++)
        {
            board[i] = [];
            for (var j = 0; j < 10; j++)
            {
                board[i][j] = NO_STONE;
            }
        }
        //初期配置
        board[4][5] = KURO; //黒
        board[5][4] = KURO; //黒
        board[4][4] = SIRO; //白
        board[5][5] = SIRO; //白

        showBoard();
    };


    var skip = function()
    {
        var kuroScore = 0;
        var siroScore = 0;
        moveInGame = KURO_SIRO - moveInGame;
        var message = ((turn == KURO) ? "黒" : "白");
        //選択した箇所の周囲8箇所に石が置けるかどうか判別する
        for (var x = 1; x <= 8; x++)
        {
            for (var y = 1; y <= 8; y++)
            {
                if (board[x][y] == 0 && Direction_conversion(x, y, false))
                {
                    document.getElementById("message").innerHTML = message + "の番だよ^^";
                    showBoard();
                    return;
                }
            }
        }
        moveInGame = KURO_SIRO - moveInGame;
        message += "pass<br>" + ((turn == KURO) ? "黒" : "白") + "の番だよ^^";

        for (x = 1 ;x <= 8; x++)
        {
            for (y = 1; y <= 8; y++)
            {
                if (board[x][y] == NO_STONE && Direction_conversion(x, y, false))
                {
                    document.getElementById("message").innerHTML = message;
                    showBoard();
                    return;
                }
                else
                {
                    if (board[x][y] == KURO) { kuroScore++; }
                    if (board[x][y] == SIRO) { siroScore++; }
                }
            }
        }

        message = "黒:" + kuroScore + "白:" + siroScore + "<br>";

        if (kuroScore == siroScore)
        {
            message += "同点かよ";
        }
        else
        {
            message += ((kuroScore > siroScore) ? "黒" : "白") + "の勝ちやで";
        }

        alert("終了");
        document.getElementById("message").innerHTML = message;
        showBoard();
    };


    var Direction_conversion = function(x, y, Inside_out)
    {
        //周囲8箇所が壁,自分の石,空白の場合以降の処理を行わない
        for (var fx = -1; fx <= 1; fx++)
        {
            for (var fy = -1; fy <= 1; fy++)
            {
                if (fx == 0 && fy == 0)
                {
                    continue;
                }
                var s = x + fx;
                var z = y + fy;
                var l = 0;
                //相手の石を挟んで自分の石がある場合、間の相手の石をひっくり返す
                while (board[s][z] == KURO_SIRO - moveInGame)
                {
                    l++;
                    s += fx;
                    z += fy;
                    if (n > 0 && board[s][z] == moveInGame)
                    {
                        Inside_out = ! Inside_out;
                        if (Inside_out)
                        {
                            s = x + fx;
                            z = y + fy;
                            while (board[s][z] == KURO_SIRO - moveInGame)
                            {
                                board[s][z] = moveInGame;
                                s += fx;
                                z += fy;
                            }
                            board[x][y] = moveInGame;
                        }
                    }
                }
            }
        }
    };
});

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

0

どこが、というなら、24行目の if 文がおかしいのですが、そもそも 96行目の function 定義がおかしいのですけれども。

こういう場合、ブラウザの Web 開発支援機能(たいてい F12 で呼び出せる)を使って、エラーメッセージを見て調べていくとよいですね。

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

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

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

関連した質問

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