Javascriptでオセロをつくる第1回

オセロ盤と石をつくる

まずオセロ盤と石をHTMLとCSSでつくります。オセロ盤はtableで、石は角を丸めたdivでつくってみます。

othello1.htmlのソース

<!DOCTYPE html>
<html>
<head>
<style type='text/css'><!--
    table#board {
        background-color: black;
    }

    table#board td {
        width: 30px;
        height: 30px;
        background-color: green;
        padding: 5px;
    }

    div.black {
        background-color: black;
        width: 30px;
        height: 30px;
        border-radius: 50%;
    }

    div.white {
        background-color: white;
        width: 30px;
        height: 30px;
        border-radius: 50%;
    }
--></style>
</head>
<body>
<table id='board'>
<tr>
    <td><div></div></td>
    <td><div></div></td>
</tr>
<tr>
    <td><div class='black'></div></td>
    <td><div class='white'></div></td>
</tr>
</table>
<div id='status'></div>
</body>
</html>

othello1.htmlの実行結果

下に表示されないときはここをクリック(別ウィンドウが開きます)

8×8に拡張

オセロ盤は8×8で、これを全部書くのは面倒なので、Javascriptでマス目も書くようにします。HTMLの要素を楽に扱うためにjquery.jsを導入します。

othello2.htmlのソース

<!DOCTYPE html>
<html>
<head>
<style type='text/css'><!--
    table#board {
        background-color: black;
    }

    table#board td {
        width: 30px;
        height: 30px;
        background-color: green;
        padding: 5px;
    }

    div.black {
        background-color: black;
        width: 30px;
        height: 30px;
        border-radius: 50%;
    }

    div.white {
        background-color: white;
        width: 30px;
        height: 30px;
        border-radius: 50%;
    }
--></style>
<!-- 追加 ここから -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script type='text/javascript'><!--
jQuery(function (){
    for(var r = 0 ; r < 8 ; r ++){
        var tr = $("<tr>");  // tr要素をつくる
        for(var c = 0 ; c < 8 ; c ++){
            tr.append($('<td><div class="none"></div></td>'));  // td要素をつくってtr要素に追加する
        }
        $('table#board').append(tr);  // tr要素をtableに追加する
    }
});
--></script>
<!-- 追加 ここまで -->
</head>
<body>
<table id='board'>
</table>
<div id='status'></div>
</body>
</html>

othello2.htmlの実行結果

下に表示されないときはここをクリック(別ウィンドウが開きます)

石を置く、ひっくり返す

オセロ盤をクリックすることで、白黒の石をおいたりひっくり返したりできるようにします。
まだ石が置かれていないマスをクリックすると、石が置かれます。置いたあとで、挟んだ石をクリックしてひっくり返します。全てひっくり返したあとで次の手を置きます。
ちゃんと操作方法を理解していれば遊べますが、間違えたときに戻せないので慎重に遊ぶ必要があります。

othello3.htmlのソース

<!DOCTYPE html>
<html>
<head>
<style type='text/css'><!--
    table#board {
        background-color: black;
    }

    table#board td {
        width: 30px;
        height: 30px;
        background-color: green;
        padding: 5px;
    }

    div.black {
        background-color: black;
        width: 30px;
        height: 30px;
        border-radius: 50%;
    }

    div.white {
        background-color: white;
        width: 30px;
        height: 30px;
        border-radius: 50%;
    }
--></style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script type='text/javascript'><!--
var turn = 1;  // 石の白黒

jQuery(function (){
    for(var r = 0 ; r < 8 ; r ++){
        var tr = $("<tr>");
        for(var c = 0 ; c < 8 ; c ++){
            tr.append($('<td><div class="none"></div></td>')
                .click(function (e){  // tdがクリックされたときの動作
                    var disc = $('div', this);  // クラスを変更するdiv要素を取得
                    if(disc.hasClass('none')){  // 石が置かれていないとき
                        disc.removeClass('none');
                        disc.addClass(turn == 1 ? 'black' : 'white');
                        turn *= -1;  // 白黒を逆にする
                        $('div#status').html((turn == 1 ? '黒' : '白') + 'の番');

                    // 挟んだ石をひっくり返す
                    }else{
                        disc.removeClass(turn == 1 ? 'black' : 'white');
                        disc.addClass(turn == 1 ? 'white' : 'black');
                    }
                })
            );
        }
        $('table#board').append(tr);
    }

    // 初期配置
    $('table#board').find('tr').eq(3).find('td').eq(3).click();  // trの3番目のtdの3番目をクリック
    $('table#board').find('tr').eq(3).find('td').eq(4).click();
    $('table#board').find('tr').eq(4).find('td').eq(4).click();
    $('table#board').find('tr').eq(4).find('td').eq(3).click();
});
--></script>

</head>
<body>
<table id='board'>
</table>
<div id='status'></div>
</body>
</html>

othello3.htmlの実行結果

下に表示されないときはここをクリック(別ウィンドウが開きます)

自動的に石を返す

次回に続く。

2024年2月20日