2018 ソフトウェア設計及び演習用の班Wiki
gr10::モジュールごとの制作、仕様書の作成
盤面・得点・ターン表示モジュール(岡野, 福士 遼）の仕様書
- HTMLで読み込んだ白、黒、緑色のマスを表示させる。
- 置けるマスを見やすいように色を変えて表示。
- 画面遷移はノードの要素を消して新たな要素を貼り付けることで行う。
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--
①ターン表示、得点表示モジュールを呼び出し、表示。
② bordのdivタグのノードを取得し"b"に格納 "b"の最初の子ノードが０以外である間、"b"の最初の子ノードを削除
③boardの各配列について変数cellを宣言、マスの状態によって色を変える。（stoneを参照)
④cellを盤面のどの位置に表示するかを確定後に中身をbに張りつける形で表示。
⑤PLEACEABLEの時はそのcellを.onclickに登録(cell.onclickについては下の※を参照)。
⑥PLEACEABLE以外の時は、フォーループを抜け、パスのチェック。
⑦パスなら、endcheckを+1し、再びshowBoardを呼び出す。
⑧endcheck==2なら盤面を非表示にしてend()を呼び出し、ゲーム終了。リザルト画面へ。
※cell.onclickについて(showboardを再帰的に呼び出す複雑な動きをします。)
- .onclickはコールバック関数なので特定のcellがクリックされた時呼び出される。この場合はPLACEABLEなcellが呼び出される。
- クリックされたら、そのマスの状態によりトラップの処理か通常のひっくり返しか判断し実行。
- プレイヤーターンの入れ替えを行う。黒ターン：１、白ターン：２で分けそれぞれの値を"player"に格納しplayerの情報を取得。プレイヤーは "player = 3 - player" で移行 。
- PLEACEABLEのマスをリセット(そのまま残ってしまうと、次ターンのプレイヤーがPLEACEABLEでない場合もPLEACEABLEで表示されてしまうから。)
- showBoardを呼び出す。
--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)
引数 newboard 現在の盤面
x 石をおいたx座標
y 石をおいたy座標
plyer 石をおいたプレイヤー（１ or ２）
check.canの返り値 1 ここには石が置ける
0 ここには石が置けない
check.turnの返り値 newboard ひっくり返したあとの盤面（あとは表示するだけ）
スタートモジュール、エンドモジュール(千葉)
--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
- エンド画面をボタンとして動くように変更
- エンド画面がクリックされたらエンド画面の要素を削除
- スタートを呼び起こす
トラップモジュール（大嶋、玉川）
--set_trap--
- 指定した座標にトラップを設置する
- 配置するトラップの種類はランダム
- 罠を置いた時にtrapnumに１〜３のうちのどれかが入り、トラップ１〜３に対応している
- 黒番と白番でそれぞれ罠を設置するために２種類用意・どちらが罠を設置する番かを文章で明記
---trap-- 罠の内容（３種類）
- トラップ１（スキップ）,２（無力化） , 3 (置いた周りのコマがすべて相手の色)
罠発動時の効果音
htmlファイル
<audio id="sound-file" preload="auto">
<source src="trap1.mp3" type="audio/mp3"> <!-- ~.mp3の音楽ファイルを読み込む -->
</audio>
jsファイル
document.getElementById( 'sound-file' ).play(); //音楽ファイル再生
通信モジュール＋シーン切り替えモジュール（田代）
- 通信が必要なこと ・プレイヤーの入室、退室
・盤面の状況
・コマの数
・ターン状況
・罠の状態
・勝敗判定
・ゲーム進行状態
- 通信の流れ
- サーバー側(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の順にそれぞれのモジュールにサーバーに通信を行い
データや通信が送り返されてきたら次のモジュールへシーンを変える。
最終更新日：2022/02/09 11:56:27
