X-HACK

【17日目】オセロ③

javascript, tutorials1 min read

課題の解説: 石を置けるかの判定ロジックを追加しよう

置けない場所に石を配置した際は警告を出します

まずは前回のコードの復習です! 下記のコードで読めない箇所があったら遠慮なく質問して下さい!

1var canvas = document.getElementById("reversi")
2var ctx = canvas.getContext("2d")
3var playBoard = [
4 [0,0,0,0,0,0,0,0],
5 [0,0,0,0,0,0,0,0],
6 [0,0,0,0,0,0,0,0],
7 [0,0,0,0,0,0,0,0],
8 [0,0,0,0,0,0,0,0],
9 [0,0,0,0,0,0,0,0],
10 [0,0,0,0,0,0,0,0],
11 [0,0,0,0,0,0,0,0],
12]
13 
14ctx.fillStyle = "black"
15 
16// クリックした座標に石を置く
17function onClickPutStone(event){
18 // HTMLの中にCANVASがあるので、CANVASのどの位置をクリックしたか
19 // 調整するために、CANVASとHTMLの位置関係から補正しています
20 var rect = event.target.getBoundingClientRect();
21 x = event.clientX - rect.left;
22 y = event.clientY - rect.top;
23 x = x - x % 40 + 20 // キリが良い箇所に配置されるようにx座標を補正
24 y = y - y % 40 + 20 // キリが良い箇所に配置されるようにy座標を補正
25 
26 // どこに石を置いたか記憶する
27 var posX = (x-20) / 40
28 var posY = (y-20) / 40
29 
30 putStone(posX, posY, "white");
31 console.log(playBoard)
32}
33 
34// 初期配置を行う関数
35function initialize(){
36 putStone(140, 140, "white")
37 putStone(180, 140, "black")
38 putStone(140, 180, "black")
39 putStone(180, 180, "white")
40}
41// 座標を指定しして石を置く
42function putStone(x, y, color){
43 ctx.fillStyle = color;
44 ctx.beginPath();
45 ctx.arc(40*x + 20, 40*y + 20, 16, 0, 2 * Math.PI);
46 ctx.fill();
47 
48 playBoard[x][y] = 1 // 1:white 2:black とする
49}
50// マス目を引く処理
51function drawPlayBoard () {
52 // 縦に線を引く
53 for (let col = 0; col < 8; col++) {
54 ctx.beginPath(); // Start a new path
55 ctx.moveTo(40 * col, 0); // Move the pen to
56 ctx.lineTo(40 * col, 320); // Draw a line to
57 ctx.stroke();
58 }
59 // 横に線を引く
60 for (let row = 0; row < 8; row++) {
61 ctx.beginPath(); // Start a new path
62 ctx.moveTo(0, 40 * row); // Move the pen to
63 ctx.lineTo(320, 40 * row); // Draw a line to
64 ctx.stroke();
65 }
66}
67 
68// 盤面を描く
69drawPlayBoard()
70// 初期配置
71initialize()

課題の回答例:すでに石が置いてある箇所には置けない

さあ、かなりコードがごちゃごちゃになって来ました・・・ このコードは後で読みやすくしますが、まずは無理やり機能が動作するところまで作り切ってしまいましょう

ポイント. 1

盤面を配列の入れ子で表現しています。 [0,0,0,0,0,0,0,0] これが一行分のデータを表現していて、それが8つの計 64 です。そう、これは オセロのマスの数と一緒 ですね!

オセロの盤面を 配列で表現できる というのは、プログラマならすぐに頭に浮かびますが、まだプログラミングに慣れていないうちはこの発想自体が難しいかも知れません。

配列データで表現することで、どの位置に何色の石が置いてあるかをシンプルな「データ」で表現できますよね?

ここが重要なポイントです。

あとは、この配列データを調べることで、どこのマスに石を置いたら、どの石がひっくり返るか分かるという寸法です。

現実世界をデータで表現する癖 を身に付けてください。

ポイント. 2

配列がどういう風になっているかを分かりやすくするために、配列のデータをHTMLに表示できるようにしています

長いですが、丁寧に読み取っていけば一つ一つの処理は難しくないはずです! あとはひっくり返す処理さえできれば、完成は目前です!

追加 課題

白石、黒石の現在の数を数えて、表示するプログラムを書いてみましょう。 配列データに 1, 2 がいくつあるか数えて、DOMを操作してHTMLに表示させればOKですね。