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

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

新規登録して質問してみよう
ただいま回答率
85.50%
Node.js

Node.jsとはGoogleのV8 JavaScriptエンジンを使用しているサーバーサイドのイベント駆動型プログラムです。

Socket.IO

Socket.IOはNode.js上で動くライブラリであり、すべてのブラウザとモバイルデバイスでリアルタイムのアプリを作動させる事を目的としています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

2回答

2785閲覧

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

Rosetta0703

総合スコア8

Node.js

Node.jsとはGoogleのV8 JavaScriptエンジンを使用しているサーバーサイドのイベント駆動型プログラムです。

Socket.IO

Socket.IOはNode.js上で動くライブラリであり、すべてのブラウザとモバイルデバイスでリアルタイムのアプリを作動させる事を目的としています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

0クリップ

投稿2017/02/07 17:17

編集2022/01/12 10:55

###前提・実現したいこと
タイトルの通り、更新を押すことなく2つのクライアントでリアルタイムで反映されるようなオセロゲームを目指して作っています。
最初に入室した人に黒が渡され、次の人に白という風にしています。
座標で認識しているためコンソールでチャットという仕様になっています。
###発生している問題・エラーメッセージ
肝心の反転処理ができていません、いろいろ模索したのですが

###該当のソースコード

html

1<!DOCTYPE html> 2<html> 3<head> 4 <title>othello</title> 5 <link rel="stylesheet" type="text/css"> 6<meta charset="utf-8"> 7 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 8<SCRIPT language="JavaScript" 9 src="/socket.io/socket.io.js"></SCRIPT> 10</head> 11<style> 12img { 13 vertical-align:bottom 14} 15</style> 16<body onclick="sa();"> 17 18 <div class="container"> 19 <h1>おせろ</h1> 20 <form class="form-inline"> 21 <div class="form-group"> 22 online:<span id="online">0</span> 23 <label class="roomLabel" for="rooms">部屋:</label> 24 <select class="form-control" id="rooms"> 25 <option value="room01">部屋01</option> 26 27 </select> 28 <label class="nameLabel" for="msgForm">名前:</label> 29 <input type="text" class="form-control" id="msgForm"> 30 </div> 31 <button type="submit" class="btn btn-primary" id="sendButton">入室</button> 32 </form> 33 <!--<div id="chatLogs"></div>--> 34 </div> 35 <script type="text/javascript"> 36 37 var socket = io.connect(); 38 var isEnter = false; 39 var name = ''; 40 var MyPeace; 41 var turn=0; 42 43 44 45 46 socket.on("turnCount", function(data){ 47 if(data.value == 0 && turn == 1){ 48 MyPeace = B; 49 console.log("あなたは黒です"); 50 socket.emit("turnSendServer",{value:MyPeace}); 51 turn++; 52 }else if(data.value == 1 && turn == 1){ 53 MyPeace = W; 54 console.log("あなたは白です"); 55 socket.emit("turnSendServer",{value:MyPeace}); 56 } 57 }); 58 59 //socket.emit("turnSendServer",{value:MyPeace}); 60 61 62 63socket.on("onlineNum",function(data){ 64 var resData = data.online; 65 $("#online").text(resData); 66 }) 67 68 69 70 71 socket.on("server_to_client", function(data){appendMsg(data.value)}); 72 function appendMsg(text) { 73 $("#chatLogs").append("<div>" + text + "</div>"); 74 console.log(text); 75 } 76 77 $("form").submit(function(e) { 78 var message = $("#msgForm").val(); 79 var selectRoom = $("#rooms").val(); 80 $("#msgForm").val(''); 81 if (isEnter) { 82 message = name + "さん: " + message; 83 84 socket.emit("client_to_server", {value : message}); 85 } else { 86 name = message; 87 var entryMessage = name + "さんが入室しました。"; 88 turn++; 89 socket.emit("client_to_server_join", {value : selectRoom}); 90 91 socket.emit("client_to_server_broadcast", {value : entryMessage}); 92 93 socket.emit("client_to_server_personal", {value : name}); 94 changeLabel(); 95 } 96 e.preventDefault(); 97 }); 98 99 function changeLabel() { 100 $(".nameLabel").text("メッセージ:"); 101 $("#rooms").prop("disabled", true); 102 $("button").text("送信"); 103 isEnter = true; 104 } 105 106 107var EnemyPeace; 108var Nowpeace; 109var a=0; 110var b=0; 111 112var 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">' 113var B='<img src=https://jooto-app.s3.amazonaws.com/attachments/data/000/142/621/original/black.jpeg?1484099021 border="3" width=57 height=57">'; 114var 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()">'; 115 116var checkD = false; 117var bored = //黒が0、白が1、2は置いていない。 118[ 119 [N,N,N,N,N,N,N,N], 120 [N,N,N,N,N,N,N,N], 121 [N,N,N,N,N,N,N,N], 122 [N,N,N,W,B,N,N,N], 123 [N,N,N,B,W,N,N,N], 124 [N,N,N,N,N,N,N,N], 125 [N,N,N,N,N,N,N,N], 126 [N,N,N,N,N,N,N,N] 127 128]; 129 130document.write('<table id="cba">'); 131 for(var a=0;a<=7;a++){ 132 document.write("<tr>"); 133 for(var b=0;b<=7;b++){ 134 document.write("<td>"+bored[a][b]+"</td>"); 135 }; 136 document.write("</tr>"); 137 }; 138 document.write('</table>'); 139var t = document.getElementById("cba"); 140var check =false; 141function abc(){ 142 for(var i=0;i<=7;i++){ 143 for(var j=0;j<=7;j++){ 144 var I=i+1; 145 var J=j+1; 146 var jj=j-1; 147 148 if(J==8&&jj<0){ 149 break; 150 } 151 152 if(bored[i][j]==MyPeace && bored[i][J]!=MyPeace&& bored[i][J]!=N){ //横判定 153 check =true; 154 while(J<=7){ 155 if(bored[i][J]==MyPeace){ 156 while(j!=J){ 157 bored[i][J] = MyPeace; 158 J--; 159 }; 160 }; 161 J++; 162 }; 163 }; 164 165 if(bored[i][j]==MyPeace && bored[I][j]!=MyPeace&& bored[I][j]!=N){ //縦判定 166 check =true; 167 while(I<=7){ 168 if(bored[I][j]==MyPeace){ 169 while(i!=I){ 170 console.log(I+"A"); 171 bored[I][j] = MyPeace; 172 I--; 173 }; 174 }; 175 I++; 176 }; 177 }; 178 I=i+1; 179 if(bored[i][j]==MyPeace && bored[I][J]!=MyPeace&& bored[I][J]!=N){ //"\"判定 180 check =true; 181 while(I<=7||J<=7){ 182 if(bored[I][J]==MyPeace){ 183 while(i!=I){ 184 bored[I][j] = MyPeace; 185 I--; 186 J--; 187 }; 188 } 189 I++; 190 J++; 191 }; 192 }; 193 J=j+1; 194 jj=j-1; 195 console.log(j); 196 //console.log(jj); 197 if(bored[i][j]==MyPeace && bored[I][jj]!=MyPeace&& bored[I][jj]!=N){ //"/"判定 198 check =true; 199 while(I<=7||jj>=0){ 200 if(bored[I][jj]==MyPeace){ 201 202 bored[I][j] = MyPeace; 203 I++; 204 jj--; 205 206 }; 207 I++; 208 J--; 209 }; 210 }; 211 212 } 213 } 214} 215 216function sa(){ 217 if(event.clientY >= 120 && event.clientY <= 177 &&bored[0][0]==N){ 218 var c = t.rows[0].cells[0]; 219 c.innerHTML = MyPeace; 220 abc(); 221 }else if(event.clientY >= 183 && event.clientY <= 240){ 222 bored[1][0]; 223 }else if //以下略 224} 225 226 227</script> 228 229</body> 230</html> 231

JavaScript

1 2var http = require('http'); 3var socketio = require('socket.io'); 4var fs = require('fs'); 5 6var server = http.createServer(function(req, res) { 7 res.writeHead(200, {'Content-Type' : 'text/html'}); 8 res.end(fs.readFileSync(__dirname + '/http.html', 'utf-8')); 9}).listen(3000); 10 11 var online = 0; 12 var count = 0; 13 14 15var io = socketio.listen(server); 16 17 18io.sockets.on('connection', function(socket) { 19 var room = ''; 20 var name = ''; 21 22 ++online; 23 io.sockets.emit('onlineNum', {online: online}); 24 25 socket.on('disconnect', function(){ 26 --online; 27 io.sockets.emit('onlineNum',{online: online}); 28 }); 29 30 31 32 socket.on('client_to_server_join', function(data) { 33 room = data.value; 34 socket.join(room); 35 }); 36 37 socket.on('client_to_server', function(data) { 38 39 io.to(room).emit('server_to_client', {value : data.value}); 40 }); 41 42 socket.on('client_to_server_broadcast', function(data) { 43 socket.broadcast.to(room).emit('server_to_client', {value : data.value}); 44 }); 45 46 socket.on('client_to_server_personal', function(data) { 47 var id = socket.id; 48 name = data.value; 49 var personalMessage = "あなたは、" + name + "さんとして入室しました。"; 50 io.to(id).emit('server_to_client', {value : personalMessage}); 51 console.log(count+"人目"); 52 io.sockets.emit("turnCount", {value:count}); 53 count++; 54 55 }); 56 57 socket.on('disconnect', function() { 58 if (name == '') { 59 console.log("未入室のまま、どこかへ去っていきました。"); 60 } else { 61 var endMessage = name + "さんが退出しました。" 62 io.to(room).emit('server_to_client', {value : endMessage}); 63 console.log(count+"人目"); 64 io.sockets.emit("turnCount", {value:count}); 65 count--; 66 } 67 }); 68}); 69

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

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

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

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

投稿2017/02/08 00:04

Zuishin

総合スコア28656

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

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

投稿2017/02/08 08:09

turbgraphics200

総合スコア4267

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問