okoze/03.Episode/05.implement2
をテンプレートにして作成
[
Front page
] [
New
|
Page list
|
Search
|
Recent changes
|
Help
]
Start:
前回までは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はok...
htmlには複数のcanvasがあるかもしれません。canvasとokozeを...
```index.html
<canvas id="okoze" width="400" height="300"></canvas>
```
```main.js
const canvas = document.getElementById("okoze");
```
** 🟧1B3 9x9のマス目を描く [#v6583284]
ナンプレの画像をCanvasに貼り付けることができたので、今日...
また9x9のマス目をナンプレ画像の枠に一致させる様にマス目を...
その前にCanvasを使って何ができるか、概要を把握しておきま...
"Canvas javascript チュートリアル" で検索してヒットした次...
[[キャンバスのチュートリアル:https://developer.mozilla.or...
思った以上にそこそこのことができそうです。頼もしいです。
** 🔴イメージを貼り付けたらに正方形を描く(一辺の長...
まず座標系を決める必要があります。この手のパズルは左上が...
スプレッドシートの座標系と同じです。Canvasの座標系も同じ...
実装する
** 🔴左上角をグラブしてドラッグして位置を変更する ...
マウスで正方形を変形する機能を実装します。
一般的には変形する図形をクリックするとハンドル(小さな四角...
それをマウスでグラブして(掴んで)、ドラッグすることでハン...
これをちゃんと作ると時間がかかるので、最初は簡単なIFにし...
簡単なIFだからと言って操作が難しくなるのは避けましょう。
さっきのハンドル表示するIFよりもっと簡単な操作にします。
画面の左半分でマウスボタンを押すと正方形の右上の角をグラ...
そしてマウスをドラッグするとそれに追従して正方形の右上の...
マウスをボタンを話すと右上の角が決まります。
実装
** 🔴右下角をグラブしてドラッグして位置を変更する ...
今度は右下角を変形する機能を実装しましょう。内容は先ほど...
- canvas に右半分でマウスボタンを押すと正方形の右下角をグ...
- マウスをドラッグすると正方形の右下の座標が変わる
実装
** refactoring [#h1bc64ec]
共通部分を関数にする
** 🔴9x9のグリッドを描く [#va0e3a0b]
正方形の中に9x9のグリッドを描きます
** Linkes [#i702d2e7]
code, live demo
** 次回 [#u8cbf18d]
次回は今回作成したマス目の中に数字を入れたり、変更したり...
End:
前回までは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はok...
htmlには複数のcanvasがあるかもしれません。canvasとokozeを...
```index.html
<canvas id="okoze" width="400" height="300"></canvas>
```
```main.js
const canvas = document.getElementById("okoze");
```
** 🟧1B3 9x9のマス目を描く [#v6583284]
ナンプレの画像をCanvasに貼り付けることができたので、今日...
また9x9のマス目をナンプレ画像の枠に一致させる様にマス目を...
その前にCanvasを使って何ができるか、概要を把握しておきま...
"Canvas javascript チュートリアル" で検索してヒットした次...
[[キャンバスのチュートリアル:https://developer.mozilla.or...
思った以上にそこそこのことができそうです。頼もしいです。
** 🔴イメージを貼り付けたらに正方形を描く(一辺の長...
まず座標系を決める必要があります。この手のパズルは左上が...
スプレッドシートの座標系と同じです。Canvasの座標系も同じ...
実装する
** 🔴左上角をグラブしてドラッグして位置を変更する ...
マウスで正方形を変形する機能を実装します。
一般的には変形する図形をクリックするとハンドル(小さな四角...
それをマウスでグラブして(掴んで)、ドラッグすることでハン...
これをちゃんと作ると時間がかかるので、最初は簡単なIFにし...
簡単なIFだからと言って操作が難しくなるのは避けましょう。
さっきのハンドル表示するIFよりもっと簡単な操作にします。
画面の左半分でマウスボタンを押すと正方形の右上の角をグラ...
そしてマウスをドラッグするとそれに追従して正方形の右上の...
マウスをボタンを話すと右上の角が決まります。
実装
** 🔴右下角をグラブしてドラッグして位置を変更する ...
今度は右下角を変形する機能を実装しましょう。内容は先ほど...
- canvas に右半分でマウスボタンを押すと正方形の右下角をグ...
- マウスをドラッグすると正方形の右下の座標が変わる
実装
** refactoring [#h1bc64ec]
共通部分を関数にする
** 🔴9x9のグリッドを描く [#va0e3a0b]
正方形の中に9x9のグリッドを描きます
** Linkes [#i702d2e7]
code, live demo
** 次回 [#u8cbf18d]
次回は今回作成したマス目の中に数字を入れたり、変更したり...
Page:
![[PukiWiki]](image/pukiwiki.png "[PukiWiki]")
