【15日目】15日目オセロ①

01.09.2019 — javascript, tutorials — 1 min read

CANVASにオセロの盤面を描いてみる

今までの知識で問題なくオセロの盤面を生成するコードを書くことができるはずです。どうでしょうか？下記のコードは問題なく読めますか？

moveTo, lineTo などは適宜、MDNで調べてみてください。分からないことがあったら、 とりあえずMDNをみる ように習慣化してください。

1var canvas = document.getElementById("reversi")
2var ctx = canvas.getContext("2d")
3　　
4ctx.fillStyle = "black"
5// 縦の線を引く
6// `線` は 「二点間を結ぶ直線」 でしたね？
7for (let col = 0; col < 8; col++) {
8    ctx.beginPath(); // Start a new path
9    ctx.moveTo(40 * col, 0); // Move the pen to
10    ctx.lineTo(40 * col, 320); // Draw a line to
11    ctx.stroke();
12}
13// 横の線を引く
14for (let row = 0; row < 8; row++) {
15    ctx.beginPath(); // Start a new path
16    ctx.moveTo(0, 40 * row); // Move the pen to
17    ctx.lineTo(320, 40 * row); // Draw a line to
18    ctx.stroke();
19}

盤面を描画するコード

石を配置してみる

課題1 (n, n) 石を配置するコードを書き換えてみよう

オセロの盤面は8x8マスなので putStone(140, 140, "white") の書き方でも石を思った通りの場所に配置出来ますが、

(0, 0)に白
(3, 4)に黒

のような指定の仕方の方が一々頭の中で座標を計算しなくて済むため混乱しません。コードを書き換えてみましょう。

課題2 クリックした位置に石を置いてみよう

ヒント1：onclickイベントをcanvasタグに追加するヒント2：onclickイベントが発生した座標が取れないかMDNを見てみる、Googleで検索してみる

1function putStone(event){
2    var rect = event.target.getBoundingClientRect();
3    x = event.clientX - rect.left;
4    y = event.clientY - rect.top;
5    console.log({x, y})
6    putStone(x, y, "white")
7}