!!!表示モジュール(岡野、福士）の仕様書 *得点と盤面の表示モジュールは完成。 *HTMLで読み込んだ白、黒、緑色のマスを表示させる。 *置けるマスを見やすいように色を変えて表示。 *スタートモジュールのあとに盤面と得点を表示させるので、最初はHTMLファイルにおけるboardとmsgには何も表示されず透過されているので今のままの書き方でいい。 *しかし、エンドモジュールに進む前にboard,msgをリセットしないと表示されたままになってしまうので、その問題は統合時に解決する。 !!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-- *変数を宣言する。 --onload-- *関数start()を呼びだす。 --showbord-- *引数なし *使用する変数 *boardの要素をリセット *bordのdivタグのノードを取得し"b"に格納 *"b"の最初の子ノードが０以外である間、"b"の最初の子ノードを削除 *"cell"に盤面のマス情報を代入しその情報を盤面のどの位置に表示するかを確定後に中身を表示 *コマを置けるマスをクリックしたら裏返しモジュールへ移行 **盤面の状態（board)、盤面のX座標とY座標（_x,_y）、プレイヤー情報（player)を渡す *黒ターン：１、白ターン：２で分けそれぞれの値を"player"に格納しplayerの情報を取得 **プレイヤーは "player = 3 - player"　で移行 --countpiece-- *引数なし *使用する変数 *盤面上の黒コマと白コマの数を数える *それぞれのコマの数を盤面とともに表示 --displayturn-- *引数なし *使用する変数 --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 罠をおいたあとの盤面 *トラップ１（スキップ），２（無力化）完成 !!!通信＋ターン切り替えモジュール（田代） *サーバー側 socket.on("client_to_server",function(balck,white,board){ io.sockets.emit("server_to_client",function(balck,white,board){});　});//データが送られてきたら全員ににデータを送ってシーンを変える *クライアント側 var blackScene = function() { var scene = new Scene(); // 新しいシーンを作る (function(){ showBoard() socket.emit("client_to_server",function(black,white,board){});//ここでデータをサーバーに送る }()); socket.on("server_to_client",function(black,white,board){　//サーバーから返信が来たらシーンを切り替える game_.replaceScene(whiteScene()); }); return scene; };