— javascript, tutorials — 1 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) / 4028 var posY = (y-20) / 4029 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 path55 ctx.moveTo(40 * col, 0); // Move the pen to56 ctx.lineTo(40 * col, 320); // Draw a line to57 ctx.stroke();58 }59 // 横に線を引く60 for (let row = 0; row < 8; row++) {61 ctx.beginPath(); // Start a new path62 ctx.moveTo(0, 40 * row); // Move the pen to63 ctx.lineTo(320, 40 * row); // Draw a line to64 ctx.stroke();65 }66}67 68// 盤面を描く69drawPlayBoard()70// 初期配置71initialize()
さあ、かなりコードがごちゃごちゃになって来ました・・・ このコードは後で読みやすくしますが、まずは無理やり機能が動作するところまで作り切ってしまいましょう
盤面を配列の入れ子で表現しています。 [0,0,0,0,0,0,0,0]
これが一行分のデータを表現していて、それが8つの計 64 です。そう、これは オセロのマスの数と一緒 ですね!
オセロの盤面を 配列で表現できる というのは、プログラマならすぐに頭に浮かびますが、まだプログラミングに慣れていないうちはこの発想自体が難しいかも知れません。
配列データで表現することで、どの位置に何色の石が置いてあるかをシンプルな「データ」で表現できますよね?
ここが重要なポイントです。
あとは、この配列データを調べることで、どこのマスに石を置いたら、どの石がひっくり返るか分かるという寸法です。
現実世界をデータで表現する癖
を身に付けてください。
配列がどういう風になっているかを分かりやすくするために、配列のデータをHTMLに表示できるようにしています
長いですが、丁寧に読み取っていけば一つ一つの処理は難しくないはずです! あとはひっくり返す処理さえできれば、完成は目前です!
白石、黒石の現在の数を数えて、表示するプログラムを書いてみましょう。 配列データに 1, 2 がいくつあるか数えて、DOMを操作してHTMLに表示させればOKですね。