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

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

こんにちわ。
 

自宅のwifiが比較的弱い、下駄です。
 

ビデオ閲覧が主になってしまったネット環境では、弱いwifiを使い続けることはできませんが、いいwifiルータに出会うことができません。
 

これまで10個ぐらいwifi機器を買い替えてきたんですが、未だにアタリに出会った気がしません。
 

一体アタリの機器って、何を買えば良いんだろう?

本日のIT謎掛け

「wifi」と、かけまして、
 

「無謀な自動車運転」と、ときます。
 

そのココロは・・・
 

どちらも、信号を、とばします。

本日の内容

いよいよ、千秋楽となった三目並べですが、本日は、リプレイ機能を付けて、1ページロードで1回しかできないゲームを、
無限で遊べるようにしてみます。
 

あと、最後なので、気になる箇所を、リファクタリングをしてみたいと思います。

ソースコード

デモ

not canvas

まとめ

前回までのバグも含めて、無駄な繰り返し処理は、計算式にまとめて置きました。
 

座標をマス毎に処理していたのを1計算式にしたので、効率1/9になってますが、処理速度は変わりません・・・orz
 

今回、三目並べを作って思ったことは、ゲームアルゴリズム自体は、AIを求めなければさほど難しくないのですが、canvasでの描画をする場合に、通常のHTMLのDOM操作ではなく、canvas内でイベント処理(hoverやclickなどを)を座標判定しなければいけない点は、非常に作業がもどかしく感じました。
 

unityなどのライブラリを使えば、さほど考えなくても処理できるかもしれませんが、ブラックボックス処理で、速度が犠牲になるのは嫌なので、自分ライブラリを作っておかないとダメだろうと、思考を向かせてくれました。
 

あと、今回はアニメーション処理を全くやっていないのですが、gif画像を貼り付けて、webサイト内で随時動いてくれる処理なども、canvasを使うと自分でsetIntervalで行わなければいけないという事が分かり、これはもはや、webページを作っている感覚とはえらいかけ離れている感覚を覚えました。
 

ゲームプラットフォームの開発をやっていた感覚を思い出しますね。
 

でも、改めてcanvasは、guiディスプレイとして、今ではスマートフォンから、PCブラウザ、他の端末でのブラウザでも採用していないケースのほうが少ないようなので、これをメインフレームとして、使うという事は、魅力的かもしれませんね。
 

もっと精進したいと思います。

Leave a Reply

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