!!!表示モジュール(岡野、福士）の仕様書
*HTMLで読み込んだ白、黒、緑色のマスを表示させる。
*置けるマスを見やすいように色を変えて表示。
<<{Screenshot from 2018-08-02 16-38-53.png}
!!HTMLファイル
*スタート画面とゲーム終了画面をそれぞれ画像で表示する
**ゲーム終了画面は白の勝ち画面、黒の勝ち画面、引き分けの3パターンで表示
*得点表示とプレイヤーターンの文字を表示
*音楽を再生する。
*ゲーム画面（オセロの盤面）を何もないマス、黒のマス、白のマス、置けるマスのそれぞれを並べて表示する（並べ方はjsファイルで操作)
**それぞれのマスのidを定義（何もないマス:cell, 黒のマス:black, 白のマス:white, 置けるマス:placeable）
**盤面のidを"board", スタート画面を"startgamen"と定義する
*スタート画面→ゲーム画面→終了画面の流れのため、ゲーム画面と終了画面はjavascriptで必要なときに表示されるように style="display:none" とし隠しておく
*othllo.cssでそれぞれの画面の大きさや位置を決定するようにする
*classを定義しcssでそのclassを設定する
**square :何もないマス、白のマス、黒のマス、置けるマス
**cell :何もないマス
**block :黒のコマ,白のコマ
**placeable :置けるマス
**sande :スタート画面、終了画面
**massage :得点表示
**playerturn:ターン表示
!!CSSファイル
*HTMLファイルで定義されたclassを作成し、それぞれのclass内で画像の大きさ配置、色を設定
**square:縦と横の大きさと色を設定
**cell,block,placeable:画像配置の位置と大きさ、色を設定
**sande :縦と横の大きさを設定
**massage,playerturn:文字の配置を設定
!!javascriptファイル
--variable--
*変数を宣言する。
<<{Screenshot from 2018-08-02 17-12-21.png}
--onload--
*関数start()を呼びだす。
--showbord--
*使用する変数
*boardの要素をリセット
*bordのdivタグのノードを取得し"b"に格納
*"b"の最初の子ノードが０以外である間、"b"の最初の子ノードを削除
*"cell"に盤面のマス情報を代入しその情報を盤面のどの位置に表示するかを確定後に中身をbに張りつける形で表示。
*PLEACEABLEの時はそのcellを.onclickに登録。クリックしたら裏返しモジュールへ移行
**盤面の状態（board)、盤面のX座標とY座標（_x,_y）、プレイヤー情報（player)を渡す
*黒ターン：１、白ターン：２で分けそれぞれの値を"player"に格納しplayerの情報を取得
**プレイヤーは "player = 3 - player" で移行
--countpiece--
*盤面上の黒コマと白コマの数を数える
*それぞれのコマの数を盤面とともに表示
--displayturn--
*どちらのターンかをターンを要素ptに表示
--board_init--
*引数なし
*使用する変数 stone, board
*それぞれのマスの画像データを得る
**コマ無しの画像データ"cell"
**黒コマの画像データ"black"
**白コマの画像データ"white"
*8✕8のマスそれぞれのメモリ宣言
**二次元配列(board[x][y])で作成
*コマの初期配置を設定
!!!裏返しモジュール（結城）
*石を置けるかどうかの判定、置いた場合の裏返し動作をするものはほぼ完成。
*石を置けるかどうかの判定
check.can(newboard, x, y, player)
*裏返しの実行
check.turn(newboard, x, y, player)
8<
引数 newboard 現在の盤面
x 石をおいたx座標
y 石をおいたy座標
plyer 石をおいたプレイヤー（１ or ２）
check.canの返り値 1 ここには石が置ける
0 ここには石が置けない
check.turnの返り値 newboard ひっくり返したあとの盤面（あとは表示するだけ）
>8
!!!スタートモジュール、エンドモジュール(千葉)
--start--
*スタート画面が生成される。
*スタート画面をボタンとして動くように変更。
*スタート画面がクリックされたならスタート画面の要素を削除して盤面の初期化
*トラップセット画面へ
--end--
*ターン表示と特典表示を非表示にする。
*画面の表示（スコアによって画像変更）
var ed;
if(scorewhite > scoreblack){
ed = document.getElementById("whitewin");
}//if
else if(scorewhite < scoreblack){
ed=document.getElementById("blackwin");
}//else if
else if(scorewhite == scoreblack){
ed=document.getElementById("draw");
}//else if
*エンド画面をボタンとして動くように変更
*エンド画面がクリックされたらエンド画面の要素を削除
*スタートを呼び起こす
!!!BGMモジュール(千葉)
*タイトル画面と同時にBGMが再生される
*BGMはひとつの曲をループする
!!!トラップモジュール（大嶋、玉川）
--set_trap--
*指定した座標にトラップを設置する
*配置するトラップの種類はランダム
set_trap = function(board, x, y, cell)
引数 board 現在の盤面
x 指定されたx座標
y 指定されたy座標
cell マスの情報取得
返り値 newboard 罠をおいたあとの盤面
*トラップ１（スキップ），２（無力化）完成
効果音
htmlファイル
jsファイル
document.getElementById( 'sound-file' ).play(); //音楽ファイル再生
!!!通信モジュール＋シーン切り替えモジュール（田代）
*通信が必要なこと
・プレイヤーの入室、退室
・盤面の状況
・コマの数
・ターン状況
・罠の状態
・勝敗判定
・ゲーム進行状態
*通信の流れ
<<{dsc250,300.jpg}
*サーバー側(main.js)
//通信確立
io.sockets.on('connection', function(socket){
//ゲーム起動
io.sockets.emit('startm',{value:st});
//スタート画面からトラップへ
socket.on("battle",function(){
io.sockets.emit("gobattle",{value:bt});
});
//トラップから対戦へ
socket.on("battle2",function(){
io.sockets.emit("gobattle2",{value:bt});
});
//データが送られてきたら全員にデータを送り返す
socket.on('board',function(board){
io.sockets.emit('newboard',board);
});
socket.on('player',function(player){
io.sockets.emit('newplayer',player);
});
//対戦からエンドへ
socket.on("end",function(){
io.sockets.emit("goend",{value:bt});
});
});
各モジュールからそれぞれ信号を受け取りそれに対応したデータ、信号を送り返しシーンを切り替える。
*クライアント側
start→set_trap→showBoard→end→startの順にそれぞれのモジュールにサーバーに通信を行い
データや通信が送り返されてきたら次のモジュールへシーンを変える。