teratail
回答率
85.47%
質問するログイン新規登録
トップcanvasに関する質問javascript 迷路

編集履歴

回答編集履歴

11

テキスト修正

2019/09/23 19:38

投稿

jun68ykt
jun68ykt

スコア9058

test CHANGED
@@ -24,19 +24,19 @@
24
24
 
25
25
 
26
26
 
27
- 上記のサンプルでは、 以下のようにしています。
27
+ このサンプルでは、
28
28
 
29
29
 
30
30
 
31
- - 即時関数だった関数を `renderMaze` という変数に入れて、`renderMaze(col, row)` で呼べるようにした。
31
+ - 即時関数だった関数を `renderMaze` という変数に入れて、`renderMaze(col, row)` で呼べるように修正し、
32
32
 
33
- - `let col = 21;` および　`let row = 21;`をコメントアウト
33
+ - `let col = 21;` および　`let row = 21;`をコメントアウトして、
34
34
 
35
- - クリックされたボタンのレベル値に10を掛けて1を加えた値を `n` として、これを `col` と `row` の値として、`renderMaze(n, n)` を実行
35
+ - クリックされたボタンのレベル値に10を掛けて1を加えた値を `n` として、これを `col` と `row` の値として、`renderMaze(n, n)` を実行する
36
36
 
37
37
 
38
38
 
39
- 以上、参考になれば幸いです。
39
+ ようにしました。
40
40
 
41
41
 
42
42
 
@@ -73,3 +73,9 @@
73
73
 
74
74
 
75
75
  - **動作確認用CodePen:** [https://codepen.io/jun68ykt/pen/ExYryZr?editors=1111](https://codepen.io/jun68ykt/pen/ExYryZr?editors=1111)
76
+
77
+
78
+
79
+
80
+
81
+ 以上、参考になれば幸いです。

10

テキスト修正

2019/09/23 19:38

投稿

jun68ykt
jun68ykt

スコア9058

test CHANGED
@@ -32,7 +32,7 @@
32
32
 
33
33
  - `let col = 21;` および　`let row = 21;`をコメントアウト
34
34
 
35
- - クリックされたボタンのレベル値に10を掛けて1を加えた値を `col` と `row` の値として、`renderMaze(col, row)` を実行
35
+ - クリックされたボタンのレベル値に10を掛けて1を加えた値を `n` として、これを `col` と `row` の値として、`renderMaze(n, n)` を実行
36
36
 
37
37
 
38
38
 

9

テキスト修正

2019/09/23 19:29

投稿

jun68ykt
jun68ykt

スコア9058

test CHANGED
@@ -24,7 +24,7 @@
24
24
 
25
25
 
26
26
 
27
- 上記のサンプルでは、
27
+ 上記のサンプルでは、 以下のようにしています。
28
28
 
29
29
 
30
30
 

8

テキスト修正

2019/09/23 18:18

投稿

jun68ykt
jun68ykt

スコア9058

test CHANGED
@@ -56,7 +56,9 @@
56
56
 
57
57
  ```
58
58
 
59
- のようなHTMLですが、これがクリックされたときのレベル値を得るには、 `"レベル1"` または `"level1"` という文字列から、末尾の数字である `1` を取り出さなければならず、上記の回答ではそのために `.replace(/[^0-9]/g,'')` としていますが、このような文字列処理は若干、面倒です。そこで [data-* 属性](https://developer.mozilla.org/ja/docs/Web/HTML/Global_attributes/data-*)を追加して
59
+ のようなHTMLですが、これがクリックされたときのレベル値を得るには、 `"レベル1"` または `"level1"` という文字列から、末尾の数字である `1` を取り出さなければならず、上記の回答ではそのために `.replace(/[^0-9]/g,'')` としていますが、このような文字列処理は若干、面倒です。
60
+
61
+ そこで [data-* 属性](https://developer.mozilla.org/ja/docs/Web/HTML/Global_attributes/data-*)を使って、例えば`data-level` という属性にレベル値を入れることにして、
60
62
 
61
63
  ```html
62
64
 

7

テキスト修正

2019/09/23 18:14

投稿

jun68ykt
jun68ykt

スコア9058

test CHANGED
@@ -66,7 +66,7 @@
66
66
 
67
67
 
68
68
 
69
- としておけば、`.data('level')` でレベル値の `1` を (しかも、文字列ではなく数値で)取り出せます。以下は、これを使ったコードです。
69
+ としておけば、`.data('level')` でレベル値の `1` を (文字列ではなく数値で)取り出せます。以下は、これを使ったコードです。
70
70
 
71
71
 
72
72
 

6

テキスト修正

2019/09/23 18:11

投稿

jun68ykt
jun68ykt

スコア9058

test CHANGED
@@ -66,7 +66,7 @@
66
66
 
67
67
 
68
68
 
69
- としておけば、`.data('level')` でレベル値の `1` を取り出せます。以下は、これを使ったコードです。
69
+ としておけば、`.data('level')` でレベル値の `1` を (しかも、文字列ではなく数値で)取り出せます。以下は、これを使ったコードです。
70
70
 
71
71
 
72
72
 

5

テキスト修正

2019/09/23 18:10

投稿

jun68ykt
jun68ykt

スコア9058

test CHANGED
@@ -56,7 +56,7 @@
56
56
 
57
57
  ```
58
58
 
59
- のようなHTMLですが、これがクリックされたときのレベル値を得るには、 `"レベル1"` または `"level1"` という文字列から、末尾の数字である `1` を取り出さなければならず、上記の回答ではそのために `.replace(/[^0-9]/g,'')` としていますが、この文字列処理は若干、面倒かと思います。そこで [data-* 属性](https://developer.mozilla.org/ja/docs/Web/HTML/Global_attributes/data-*)を追加して
59
+ のようなHTMLですが、これがクリックされたときのレベル値を得るには、 `"レベル1"` または `"level1"` という文字列から、末尾の数字である `1` を取り出さなければならず、上記の回答ではそのために `.replace(/[^0-9]/g,'')` としていますが、このような文字列処理は若干、面倒です。そこで [data-* 属性](https://developer.mozilla.org/ja/docs/Web/HTML/Global_attributes/data-*)を追加して
60
60
 
61
61
  ```html
62
62
 
@@ -66,7 +66,7 @@
66
66
 
67
67
 
68
68
 
69
- としておけば、`.data('level')` でレベル値を取り出せます。以下は、これを使ったコードです。
69
+ としておけば、`.data('level')` でレベル値の `1` を取り出せます。以下は、これを使ったコードです。
70
70
 
71
71
 
72
72
 

4

テキスト修正

2019/09/23 18:07

投稿

jun68ykt
jun68ykt

スコア9058

test CHANGED
@@ -48,7 +48,7 @@
48
48
 
49
49
 
50
50
 
51
- 各ボタンが
51
+ 各ボタンは以下
52
52
 
53
53
  ```html
54
54
 
@@ -56,7 +56,7 @@
56
56
 
57
57
  ```
58
58
 
59
- というHTMLであると、これがクリックされたときのレベル値を、 `"レベル1"` または `"level1"` という文字列から、`1` を取り出さなければならず、上記の回答ではそのために `.replace(/[^0-9]/g,'')` としていますが、これは若干、面倒かと思います。そこで `data-*` 属性を追加して
59
+ のようなHTMLですが、これがクリックされたときのレベル値を得るには、 `"レベル1"` または `"level1"` という文字列から、末尾の数字である `1` を取り出さなければならず、上記の回答ではそのために `.replace(/[^0-9]/g,'')` としていますが、この文字列処理は若干、面倒かと思います。そこで [data-* 属性](https://developer.mozilla.org/ja/docs/Web/HTML/Global_attributes/data-*)を追加して
60
60
 
61
61
  ```html
62
62
 

3

テキスト修正

2019/09/23 18:04

投稿

jun68ykt
jun68ykt

スコア9058

test CHANGED
@@ -33,10 +33,6 @@
33
33
  - `let col = 21;` および　`let row = 21;`をコメントアウト
34
34
 
35
35
  - クリックされたボタンのレベル値に10を掛けて1を加えた値を `col` と `row` の値として、`renderMaze(col, row)` を実行
36
-
37
- - 上記に加えて、ボタンがクリックされたら、canvas内をクリアする処理を追加
38
-
39
-
40
36
 
41
37
 
42
38
 

2

テキスト修正

2019/09/23 17:45

投稿

jun68ykt
jun68ykt

スコア9058

test CHANGED
@@ -41,3 +41,37 @@
41
41
 
42
42
 
43
43
  以上、参考になれば幸いです。
44
+
45
+
46
+
47
+ ### 追記
48
+
49
+
50
+
51
+ ちょっとしたリファクタ案を追記します。
52
+
53
+
54
+
55
+ 各ボタンが
56
+
57
+ ```html
58
+
59
+ <button class="btn" id="level1">レベル1</button>
60
+
61
+ ```
62
+
63
+ というHTMLであると、これがクリックされたときのレベル値を、 `"レベル1"` または `"level1"` という文字列から、`1` を取り出さなければならず、上記の回答ではそのために `.replace(/[^0-9]/g,'')` としていますが、これは若干、面倒かと思います。そこで `data-*` 属性を追加して
64
+
65
+ ```html
66
+
67
+ <button class="btn" id="level1" data-level="1">レベル1</button>
68
+
69
+ ```
70
+
71
+
72
+
73
+ としておけば、`.data('level')` でレベル値を取り出せます。以下は、これを使ったコードです。
74
+
75
+
76
+
77
+ - **動作確認用CodePen:** [https://codepen.io/jun68ykt/pen/ExYryZr?editors=1111](https://codepen.io/jun68ykt/pen/ExYryZr?editors=1111)

1

テキスト修正

2019/09/23 17:35

投稿

jun68ykt
jun68ykt

スコア9058

test CHANGED
@@ -18,7 +18,7 @@
18
18
 
19
19
 
20
20
 
21
- - **動作確認用CodePen:** [https://codepen.io/jun68ykt/pen/rNBPxXj?editors=1111](https://codepen.io/jun68ykt/pen/rNBPxXj?editors=1111)
21
+ - **動作確認用CodePen:** [https://codepen.io/jun68ykt/pen/gOYqrNa?editors=1111](https://codepen.io/jun68ykt/pen/gOYqrNa?editors=1111)
22
22
 
23
23
 
24
24
 
@@ -32,29 +32,9 @@
32
32
 
33
33
  - `let col = 21;` および　`let row = 21;`をコメントアウト
34
34
 
35
- - クリックされたボタンのレベル値に11をかけて、これを `col` と `row` の値として、`renderMaze(col, row)` を実行
35
+ - クリックされたボタンのレベル値に10を掛けて1を加えた値を `col` と `row` の値として、`renderMaze(col, row)` を実行
36
36
 
37
37
  - 上記に加えて、ボタンがクリックされたら、canvas内をクリアする処理を追加
38
-
39
-
40
-
41
- また、ご質問の本題ではありませんが、以下の問題がありました。
42
-
43
-
44
-
45
- - レベル1, レベル3 ・・・　のレベルが奇数の場合は迷路が描画されましたが、レベルが偶数のボタンがクリックされたときに、迷路が描画されませんでした。どうやら以下のループ
46
-
47
- ```javascript
48
-
49
- for (let x = 1; x < col; x += 2) {
50
-
51
- ・・・
52
-
53
- }
54
-
55
- ```
56
-
57
- が意図通りに動かないようです。この問題はご質問の本題ではないので、そのままにしています。
58
38
 
59
39
 
60
40