[お題にTRY] Canvas三目並べ #2日目

Pocket
LINEで送る
GREE にシェア
LinkedIn にシェア

こんにちわ。
 

プログラミングを勉強している人が、最も面白みを感じるのは、GUIの操作だと感じた、下駄です。
 

一昔前のCUIだけのプログラミングは、文字を入力して、文字が返ってくるか、デバイスに何かしらの処理をさせるだけだったんですが、少なくとも、ゲームをプログラミングするときには、その結果をグラフィカルに表示しないといけません。
 

webアプリの場合は、インターネットブラウザがその役割を担ってくれるので、便利なのですが、プログラム言語によっては、webブラウザに結果表示するのもしんどいものもあります。
 

それぞれの言語でGUIライブラリなどがあるものもあれば、自分でイチから作らないと行けないものも有り、こうした点で、有利なプログラム言語と、不利な言語があります。
 

この点で言えば、javascriptは、webブラウザに限定されてしまいますが、GUIの初期操作を省ける点が便利ですね。
 

そんなjavascriptでのcanvasを使った、三目並べの2日目、今回は操作イベントをセットしてみます。

本日のIT謎掛け

「クリックイベント」と、かけまして、
 

「今どきの犬の動詞系」と、ときます。
 

そのココロは・・・
 

ポチる。

Eventセット前準備

プレイヤーは、○からスタートする仕様で進めようと思います。
 

あとで、開始前に先攻と後攻を選択するモードを付ける予定ですが、とりあえず、ゲーム部分の作り込みを先に行っておきます。
 

三目並べに必要なイベントは、9つのマスに、クリック(またはタッチ)することで、そのイチに「○」または「×」の記号を設置していきます。
 

canvasでのクリックイベントは、座標を取得して、判定すればいいのでしょうか?
 

とりあえず、クリックイベントでの情報取得をして判定してみたいと思います。

クリックイベントのセット

 

 

※今回は、index.htmlは前回と同じで変更は、ありません。

カンタン解説

イベントのセットと、○印を表示する処理を追加しました。
 

効率を考えない、プログラムですが、リファクタリングは、完成後に行うことにしたいと思います。
 

今回のポイントは、canvasタグにクリックイベントをセットして、そのクリックされたcanvas内の座標を取得するという点です。
 

 

この箇所ですが、マウス座標を取得した際に、canvasタグの座標を差し引いてあげなければ、マウス座標は、document.bodyの0起点からになるので、誤差が発生してしまいます。
 

慣れればなんてことない処理ですが、知らないと、結構パニクります。
 

そして、記号描画のところでは、基盤をいちどクリアしてから、再描画する手順になります。
 

単純に追記するような処理でもいいんですが、canvasアニメーションなどをしようとすると、この手順を標準化しておいたほうがよさそうです。
 

そういえばという問題点

スマホ表示がまだできていません。
 

viewportの設定とtouchイベントを追加しないといけないんですが、これも後回しにすることにします。
 

そして次回はいよいよ、コンピュータの指し手を反映する処理になります。
 

お楽しみに。

Leave a Reply

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です