今回はサンプルの動作です。サンプルを見ながら本セクションの描画処理を確かめます。

index-304-score.html をブラウザで開きます。こちらが開いたところです。

これまでの描画に加えて「YOU00」「COM00」というスコアの表示が増えています。まだリバーシゲームと連動せず描画のみを行っていますので、ここは00という数字になっています。ゲームが完成した際には、自分の石、コンピューターの石のそれぞれの合計数がこちらに表示されるようになります。

リバーシはマスの数が8×8で64あります。そのためこの数字は0から64まで変化する可能性があります。この数字の桁数が変わった場合に文字の幅が変化しないように、数字が0や一桁の場合は先頭に0を埋めて、数字を表示するようにしています。今回はサンプルの動作を確認しました。