.png)
感想
を使ったリバーシゲームをを動画を見ながら作成しました
１日目
今回、「
【プログラミング】オセロを1時間で作ってみた【実況解説】」という動画を参考に、リバーシゲームを作成しました。
参考動画を見ながら、リバーシゲームのマスや石の描画をHTMLとCSSのみで行う実装に挑戦しました。
簡素なコードで構造を作り、見た目を再現する過程で、HTML要素の入れ子構造やCSSのスタイル指定について理解を深められました。
参考にした動画では、HTML・CSS・JavaScriptだけを使って実装されており、メモ帳などの簡単なツールで作成できる点に魅力を感じました。
<!-- 緑マス -->
<div id="cell"style="position:relative;width:33px;height:33px;background-color:#000">
<div id="cell"style="position:relative;top:1px;left:1px;width:31px;height:31px;background-color:#0e0">
</div>
</div>
緑マスをベースに、ペイントツールで作成した「white.png」と「black.png」を使って、白石・黒石の表示を実装しました。
<!-- 緑セル -->
<div id="cell" style="position:relative; width:33px; height:33px; background-color:#000;">
<div style="position:relative; top:1px; left:1px; width:31px; height:31px; background-color:#0e0;"></div>
</div>
<!-- 白い石 -->
<div id="white" style="position:relative; width:33px; height:33px; background-color:#000;">
<img src="white.png" style="display:block; position:relative; top:1px; left:1px; width:31px; height:31px;">
</div>
<!-- 黒い石 -->
<div id="black" style="position:relative; width:33px; height:33px; background-color:#000;">
<img src="black.png" style="display:block; position:relative; top:1px; left:1px; width:31px; height:31px;">
</div>piece
CSSの style="position:relative;" を style="position:absolute;"
に変更し、JavaScriptのループ文を活用して8×8のボードを自動生成しました。
各セルは cloneNode により複製され、ループ変数に応じて left と top
を計算し、正しい位置に配置しています。
これにより、HTMLとCSSだけでは難しい柔軟な盤面の生成や今後のゲームロジックの拡張も容易になります。
<script>
(function(){
var piece;
var showBoard = function(){
var b =document.getElementById("board");
while(b.firstChild){
b.removeChild(b.firstChild);
}
for(var y = 1; y <= 8; y++){
for(var x = 1; x <= 8; x++){
var c = piece[board[x][y]].cloneNode(true);
c.style.left = ((x - 1) * 32) + "px";
c.style.top = ((y - 1) * 32) + "px";
b.appendChild(c);
}
}
};
var board = [];
onload = function(){
piece = [document.getElementById("cell")];
for(var i = 0;i < 10; i++){
board[i]=[];
for(var j = 0;j < 10; j++){
board[i][j] = 0;
}
}
showBoard();
};
})()
</script>
2日目
この日は、リバーシ盤面に「黒石」「白石」を初期配置する処理に加え、ユーザーが空いているマスをクリックして黒石を置けるようにしました。
・盤面の初期表示を実装
以下のコードにより、盤面の中央に黒（1）と白（2）の駒をあらかじめ表示できるようになりました。配列 board に値をセットし、該当位置に駒が描画されます。
piece = [
document.getElementById("cell"),
document.getElementById("black"),
document.getElementById("white")
];
board[4][5] = 1;
board[5][4] = 1;
board[4][4] = 2;
board[5][5] = 2;
さらに、盤面の表示位置を制御するため、以下のような <div> 要素を追加しています。
<div style="position:relative" id="board"></div>
このように、初期化された盤面において駒が正しい位置に描画され、重ならずに整然と表示されるようになりました。
・クリックで駒を置ける処理を追加
さらに、空いているマス（値が 0 のマス）をクリックすると、そこに黒石（1）を置ける処理を追加しました。
if (board[x][y] == 0) {
(function () {
var _x = x, _y = y;
c.onclick = function () {
board[_x][_y] = 1;
showBoard();
};
})();
}
即時関数を使うことで、ループ内の変数 x・y のスコープを固定し、それぞれのマスに正しくクリックイベントが割り当てられます。