![[PukiWiki]](image/pukiwiki.png "[PukiWiki]")
#author("2026-09-06T16:46:48+09:00","","") #author("2026-09-06T16:53:37+09:00","","") 前回まではCanvasを配置して、ナンプレの画像をCanvasに貼り付けるところまで実装しました。 少し使ってみると、足りない機能に気づきました。 現在はCanvasに画像を何枚でも貼り付けることができます。 新しい画像を貼り付ける場合は、元の画像をクリアしないといけません。 また、古い画像を使って作業中であれば、クリアしてよいか確認する必要があります。 この機能が必要なので、機能一覧に項目を追加しておきます。 🟧1B7 新規ゲーム作成機能 内容をどうするかは、まだ決まっていません。 今はまだ実装しません。忘れないように機能一覧に追加しておきます。 ** okozeとcanvasの分離 [#zb8108ba] 前回はindex.html、style.css、main.jsの三つのファイルを作りました。 このうちmain.jsがokoze本体です。 index.htmlとstyle.cssは、okozeをWebページに貼り付けて使うためのサンプルです。 okozeは特定のHTMLページに依存するものではなく、Canvasを使って動くものにしたいと思っています。 HTMLには複数のCanvasがあるかもしれません。 そこで、Canvasとokozeを結びつけるため、Canvasにid="okoze"を付けることにします。 ```html <canvas id="okoze" width="400" height="300"></canvas> ``` これで、HTML側のCanvasとokoze本体を分離できます。 前回まではCanvas を配置して、ナンプレの画像をCanvasに貼り付けるところまで実装しました。 少し使ってみると足りない機能に気づきました。Canvasに画像が何枚でも貼り付けることができます。 新しい画像を貼り付ける場合は、元の画像をクリアしないといけません。 また古い画像が作業中であれば、クリアして良いか確認しないといけません。 その機能が必要なので機能一覧に項目を追加しておきます。 🟧1B7 新規ゲーム作成機能 内容はどうするか、まだ未定です。今はまだ実装しません。忘れない様に機能一覧に追加しておきます。 ** okozeとcanvasの分離 [#zb8108ba] 前回はindex.html, style.css, main.js の三つのファイルを作りました。 このうちmain.jsがokoze本体です。index.html, style.cssはokozeをWEBページに貼り付けるためのサンプルです。 htmlには複数のcanvasがあるかもしれません。canvasとokozeを結びつけるためcanvas にid="okoze"をつけることにします。 ```index.html <canvas id="canvas" width="400" height="300"></canvas> <canvas id="okoze" width="400" height="300"></canvas> ``` ```main.js <canvas id="canvas" width="400" height="300"></canvas> const canvas = document.getElementById("okoze"); ``` ** 🟧1B3 9x9のマス目を描く [#v6583284] ナンプレの画像をCanvasに貼り付けることができたので、今日は9x9のマス目を描きます。 また9x9のマス目をナンプレ画像の枠に一致させる様にマス目を移動する機能を実装します。 その前にCanvasを使って何ができるか、概要を把握しておきましょう。 "Canvas javascript チュートリアル" で検索してヒットした次の資料に目を通しておきます。 [[キャンバスのチュートリアル:https://developer.mozilla.org/ja/docs/Web/API/Canvas_API/Tutorial]] 思った以上にそこそこのことができそうです。頼もしいです。 ** 🔴イメージを貼り付けたらに正方形を描く(一辺の長さは画像縦横短辺の8割でセンタリング) [#m3796c75] まず座標系を決める必要があります。この手のパズルは左上が原点で、X軸は右方向、Y軸はした方向です。 スプレッドシートの座標系と同じです。Canvasの座標系も同じなので、とりあえずそのまま使うことにします。 実装する ** 🔴左上角をグラブしてドラッグして位置を変更する [#da39b9a8] マウスで正方形を変形する機能を実装します。 一般的には変形する図形をクリックするとハンドル(小さな四角)を変形ポイントに表示し、 それをマウスでグラブして(掴んで)、ドラッグすることでハンドルがマウスに追従して動き、ハンドルの動きに合わせて元の図形が変形します。 これをちゃんと作ると時間がかかるので、最初は簡単なIFにします。 簡単なIFだからと言って操作が難しくなるのは避けましょう。 さっきのハンドル表示するIFよりもっと簡単な操作にします。 画面の左半分でマウスボタンを押すと正方形の右上の角をグラブしたことにします。 そしてマウスをドラッグするとそれに追従して正方形の右上の角が動きます。 マウスをボタンを話すと右上の角が決まります。 実装 ** 🔴右下角をグラブしてドラッグして位置を変更する [#ub7da04d] 今度は右下角を変形する機能を実装しましょう。内容は先ほどとほぼ一緒です。違いは - canvas に右半分でマウスボタンを押すと正方形の右下角をグラブする - マウスをドラッグすると正方形の右下の座標が変わる 実装 ** refactoring [#h1bc64ec] 共通部分を関数にする ** 🔴9x9のグリッドを描く [#va0e3a0b] 正方形の中に9x9のグリッドを描きます ** Linkes [#i702d2e7] code, live demo ** 次回 [#u8cbf18d] 次回は今回作成したマス目の中に数字を入れたり、変更したり、消したりする機能を作りましょう。
