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

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

ただいまの
回答率

90.12%

リアルタイムで進行するオセロの反転処理

受付中

回答 2

投稿 編集

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

Rosetta0703

score 6

前提・実現したいこと

タイトルの通り、更新を押すことなく2つのクライアントでリアルタイムで反映されるようなオセロゲームを目指して作っています。
最初に入室した人に黒が渡され、次の人に白という風にしています。
座標で認識しているためコンソールでチャットという仕様になっています。

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

肝心の反転処理ができていません、いろいろ模索したのですが

該当のソースコード

<!DOCTYPE html>
<html>
<head>
  <title>othello</title>
  <link rel="stylesheet" type="text/css">
<meta charset="utf-8">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<SCRIPT language="JavaScript"
 src="/socket.io/socket.io.js"></SCRIPT>
</head>
<style>
img {
   vertical-align:bottom
}
</style>
<body onclick="sa();">

  <div class="container">
      <h1>おせろ</h1>
      <form class="form-inline">
          <div class="form-group">
      online:<span id="online">0</span>
              <label class="roomLabel" for="rooms">部屋:</label>
              <select class="form-control" id="rooms">
                  <option value="room01">部屋01</option>

              </select>
              <label class="nameLabel" for="msgForm">名前:</label>
              <input type="text" class="form-control" id="msgForm">
          </div>
          <button type="submit" class="btn btn-primary" id="sendButton">入室</button>
      </form>
      <!--<div id="chatLogs"></div>-->
  </div>
    <script type="text/javascript">

    var socket = io.connect(); 
    var isEnter = false;
    var name = '';
    var MyPeace;
    var turn=0;




    socket.on("turnCount", function(data){
      if(data.value == 0 && turn == 1){
        MyPeace = B;
        console.log("あなたは黒です");
        socket.emit("turnSendServer",{value:MyPeace});
        turn++;
      }else if(data.value == 1 && turn == 1){
        MyPeace = W;
        console.log("あなたは白です");
        socket.emit("turnSendServer",{value:MyPeace});
      }
    });

    //socket.emit("turnSendServer",{value:MyPeace});



socket.on("onlineNum",function(data){
            var resData = data.online;
            $("#online").text(resData);
    })




    socket.on("server_to_client", function(data){appendMsg(data.value)});
    function appendMsg(text) {
        $("#chatLogs").append("<div>" + text + "</div>");
        console.log(text);
    }

    $("form").submit(function(e) {
        var message = $("#msgForm").val();
        var selectRoom = $("#rooms").val();
        $("#msgForm").val('');
        if (isEnter) {
          message = name + "さん: " + message;

            socket.emit("client_to_server", {value : message});
        } else {
            name = message;
            var entryMessage = name + "さんが入室しました。";
            turn++;
            socket.emit("client_to_server_join", {value : selectRoom});

            socket.emit("client_to_server_broadcast", {value : entryMessage});

            socket.emit("client_to_server_personal", {value : name});
            changeLabel();
        }
        e.preventDefault();
    });

    function changeLabel() {
        $(".nameLabel").text("メッセージ:");
        $("#rooms").prop("disabled", true);
        $("button").text("送信");
        isEnter = true;
    }


var EnemyPeace;
var Nowpeace;
var a=0;
var b=0;

var W='<img src=https://jooto-app.s3.amazonaws.com/attachments/data/000/142/623/original/white.jpeg?1484099021 border="3" border-color="black"  width=57 height=57">'
var B='<img src=https://jooto-app.s3.amazonaws.com/attachments/data/000/142/621/original/black.jpeg?1484099021  border="3" width=57 height=57">';
var N='<img src=https://jooto-app.s3.amazonaws.com/attachments/data/000/142/888/original/background.jpeg?1484118869  border="3" width=57 height=57 onclick="sa()">';

var checkD = false;
var    bored =    //黒が0、白が1、2は置いていない。
[
    [N,N,N,N,N,N,N,N],
    [N,N,N,N,N,N,N,N],
    [N,N,N,N,N,N,N,N],
    [N,N,N,W,B,N,N,N],
    [N,N,N,B,W,N,N,N],
    [N,N,N,N,N,N,N,N],
    [N,N,N,N,N,N,N,N],
    [N,N,N,N,N,N,N,N]

];

document.write('<table id="cba">');
    for(var a=0;a<=7;a++){
        document.write("<tr>");
        for(var b=0;b<=7;b++){
            document.write("<td>"+bored[a][b]+"</td>");
        };
        document.write("</tr>");
    };
    document.write('</table>');
var t = document.getElementById("cba");
var check =false;
function abc(){
    for(var i=0;i<=7;i++){
        for(var j=0;j<=7;j++){
            var I=i+1;
            var J=j+1;
            var jj=j-1;

            if(J==8&&jj<0){
                break;
             }

            if(bored[i][j]==MyPeace && bored[i][J]!=MyPeace&& bored[i][J]!=N){ //横判定
             check =true;
                while(J<=7){
                    if(bored[i][J]==MyPeace){
                        while(j!=J){
                            bored[i][J] = MyPeace;
                            J--;
                        };
                    };
                    J++;
                };
            };

            if(bored[i][j]==MyPeace && bored[I][j]!=MyPeace&& bored[I][j]!=N){ //縦判定
                check =true;
                while(I<=7){
                    if(bored[I][j]==MyPeace){
                        while(i!=I){
                        console.log(I+"A");
                            bored[I][j] = MyPeace;
                            I--;
                        };
                    };
                    I++;
                };
            };
            I=i+1;
            if(bored[i][j]==MyPeace && bored[I][J]!=MyPeace&& bored[I][J]!=N){ //"\"判定
                check =true;
                while(I<=7||J<=7){
                    if(bored[I][J]==MyPeace){
                        while(i!=I){
                            bored[I][j] = MyPeace;
                            I--;
                            J--;
                        };
                    }
                    I++;
                    J++;
                };
            };
            J=j+1;
            jj=j-1;
      console.log(j);
      //console.log(jj);
            if(bored[i][j]==MyPeace && bored[I][jj]!=MyPeace&& bored[I][jj]!=N){ //"/"判定
                check =true;
                while(I<=7||jj>=0){
                    if(bored[I][jj]==MyPeace){

                            bored[I][j] = MyPeace;
                            I++;
                            jj--;

                    };
                    I++;
                    J--;
                };
            };

        }
    }
}

function sa(){
 if(event.clientY >= 120 && event.clientY <= 177 &&bored[0][0]==N){
        var c = t.rows[0].cells[0];
                c.innerHTML = MyPeace;
                abc();
            }else if(event.clientY >= 183 && event.clientY <= 240){
                bored[1][0];
            }else if //以下略
}


</script>

</body>
</html>
var http = require('http');
var socketio = require('socket.io');
var fs = require('fs');

var server = http.createServer(function(req, res) {
    res.writeHead(200, {'Content-Type' : 'text/html'});
    res.end(fs.readFileSync(__dirname + '/http.html', 'utf-8'));
}).listen(3000);  

 var online = 0;
 var count = 0;


var io = socketio.listen(server);


io.sockets.on('connection', function(socket) {
    var room = '';
    var name = '';

    ++online;
    io.sockets.emit('onlineNum', {online: online});

      socket.on('disconnect', function(){
                --online;
                io.sockets.emit('onlineNum',{online: online});
        });



    socket.on('client_to_server_join', function(data) {
        room = data.value;
        socket.join(room);
    });

    socket.on('client_to_server', function(data) {

        io.to(room).emit('server_to_client', {value : data.value});
    });

    socket.on('client_to_server_broadcast', function(data) {
        socket.broadcast.to(room).emit('server_to_client', {value : data.value});
    });

    socket.on('client_to_server_personal', function(data) {
        var id = socket.id;
        name = data.value;
        var personalMessage = "あなたは、" + name + "さんとして入室しました。";
        io.to(id).emit('server_to_client', {value : personalMessage});
        console.log(count+"人目");
        io.sockets.emit("turnCount", {value:count});
        count++;

    });

    socket.on('disconnect', function() {
        if (name == '') {
            console.log("未入室のまま、どこかへ去っていきました。");
        } else {
            var endMessage = name + "さんが退出しました。"
            io.to(room).emit('server_to_client', {value : endMessage});
            console.log(count+"人目");
            io.sockets.emit("turnCount", {value:count});
              count--;
        }
    });
});

補足情報

画像に対してのクリック判定にしたかったのですがうまくいかず、座標から判定をとるという形にしています。
動作確認のため判定用のabc()関数は1つしか入っていません。
超初心者の為お見苦しいコードですがご指摘どうぞよろしくお願いいたします。

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

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

回答 2

+1

ボードを最初に描画した後、再描画してないんじゃないですか?
bored 配列は書き換えられているようですが、それをどこで描画しているのかわかりません。

あと、bored(退屈した)が気になります。board では?

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

0

送信するメッセージは、おいた場所だけにして、反転処理は各クライアントで行えばいいのではないでしょうか。
サンプル

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

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

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