teratail
回答率
85.35%
teratail header banner
teratail header banner
質問するログイン新規登録
トップに関する質問画面が全く表示されない

編集履歴

質問編集履歴

2

ご指摘ありがとうございます。先頭のjavascriptを一行下げて貼りなおしました。

2020/10/21 18:53

投稿

aoi68
aoi68

スコア9

test CHANGED
File without changes
test CHANGED
@@ -6,7 +6,9 @@
6
6
 
7
7
 
8
8
 
9
+ ```
10
+
9
- ```javascript
11
+ javascript
10
12
 
11
13
 
12
14
 
@@ -274,4 +276,6 @@
274
276
 
275
277
 
276
278
 
277
- </html>```
279
+ </html>
280
+
281
+ ```

1

ソースコードの全体を貼りました。

2020/10/21 18:53

投稿

aoi68
aoi68

スコア9

test CHANGED
File without changes
test CHANGED
@@ -1,10 +1,176 @@
1
- シンプルなブロック崩しを動画を参考にしながら模写しているのですが、function drawで表示されるはずのボールやブロックが表示されません。ディベロッパーツールを見たところ、４２行に不具合があると出ているのですが、このfor文は間違っていないはずなので、原因がさっぱりわかりません。ご教授お願いします。↓こちらがfunction drawの全てです。
1
+ シンプルなブロック崩しを動画を参考にしながら模写しているのですが、function drawで表示されるはずのボールやブロックが表示されません。ディベロッパーツールを見ても原因がさっぱりわかりませんでした。ご教授お願いします。
2
+
3
+
4
+
5
+ **ソースコードを貼りなおしました。**
2
6
 
3
7
 
4
8
 
5
9
  ```javascript
6
10
 
11
+
12
+
13
+ <!DOCTYPE html>
14
+
15
+ <html lang="en">
16
+
17
+
18
+
19
+ <head>
20
+
21
+ <meta charset="UTF-8">
22
+
23
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
24
+
25
+ <title>ブロック崩し</title>
26
+
27
+ </head>
28
+
29
+
30
+
31
+ <body>
32
+
33
+ <canvas id="myCanvas" width="480" height="320"></canvas>
34
+
35
+ <script>
36
+
37
+ var canvas = document.getElementById("myCanvas");
38
+
39
+ var ctx = canvas.getContext("2d");
40
+
41
+
42
+
43
+ var x = canvas.width / 2;
44
+
45
+ var y = canvas.height - 30;
46
+
47
+
48
+
49
+ var dx = 2;
50
+
51
+ var dy = -2;
52
+
53
+
54
+
55
+ var ballRadius = 10;
56
+
57
+
58
+
59
+ var paddleHeight = 10;
60
+
61
+ var paddleWidth = 75;
62
+
63
+ var paddleX = (canvas.width - paddleWidth) / 2;
64
+
65
+
66
+
67
+ var rightPressed = false;
68
+
69
+ var leftPressed = false;
70
+
71
+
72
+
73
+ var brickRowCount = 3;
74
+
75
+ var brickColumnCount = 5;
76
+
77
+ var brickWidth = 75;
78
+
79
+ var brickHeight = 20;
80
+
81
+ var brickPadding = 10;
82
+
83
+ var brickOffsetTop = 30;
84
+
85
+ var brickOffsetLeft = 30;
86
+
87
+
88
+
89
+ var bricks = [];
90
+
91
+
92
+
93
+ for (var c = 0; c < brickColumnCount; c++) {
94
+
95
+ brick[c] = [];
96
+
97
+ for (var r = 0; r < brickRowCount; r++) {
98
+
99
+ brick[c][r] = { x: 0, y: 0 };
100
+
101
+ }
102
+
103
+ }
104
+
105
+
106
+
107
+ function drawBall() {
108
+
109
+ ctx.beginPath();
110
+
111
+ ctx.act(x, y, ballRadius, 0, Math.PI * 2);
112
+
113
+ ctx.fillStyle = "#0095DD";
114
+
115
+ ctx.fill();
116
+
117
+ ctx.closePath();
118
+
119
+ }
120
+
121
+
122
+
123
+ function drawPaddle() {
124
+
125
+ ctx.beginPath();
126
+
127
+ ctx.rect(paddleX, canvas.height - paddleHeight, paddleWidth, paddleHeight);
128
+
129
+ ctx.fillStyle = "#0095DD";
130
+
131
+ ctx.fill();
132
+
133
+ ctx.closePath();
134
+
135
+ }
136
+
137
+
138
+
139
+ function drawBricks() {
140
+
141
+ for (var c = 0; c < brickColumnCount; c++) {
142
+
143
+ for (var r = 0; r < brickRowCount; r++) {
144
+
145
+ var brickX = (c * (brickWidth + brickPadding)) + brickOffsetLeft;
146
+
147
+ var brickY = (r * (brickHeight + brickPadding)) + brickOffsetTop;
148
+
149
+ bricks[c][r].x = 0;
150
+
151
+ bricks[c][r].y = 0;
152
+
153
+
154
+
155
+ ctx.beginPath();
156
+
157
+ ctx.rect(brickX, brickY, brickWidth, brickHeight);
158
+
159
+ ctx.fillStyle = "#0095DD";
160
+
161
+ ctx.fill();
162
+
163
+ ctx.closePath();
164
+
165
+ }
166
+
167
+ }
168
+
169
+ }
170
+
171
+
172
+
7
- function draw() {
173
+ function draw() {
8
174
 
9
175
  ctx.clearRect(0, 0, canvas.width, canvas.height);
10
176
 
@@ -62,18 +228,50 @@
62
228
 
63
229
 
64
230
 
231
+ document.addEventListener("keydown", keyDownHandler, false);
232
+
233
+ document.addEventListener("keyup", keyUpHandler, false);
234
+
235
+
236
+
65
- ```↓こちらが42行が含まれているfor文です。
237
+ function keyDownHandler(e) {
66
-
67
- ```javascript
238
+
68
-
69
- for (var c = 0; c < brickColumnCount; c++) {
239
+ if (e.key == "Right" || e.key == "ArrowRight") {
70
-
240
+
71
- brick[c] = [];
241
+ rightPressed = true;
72
-
242
+
73
- for (var r = 0; r < brickRowCount; r++) {
243
+ } else if (e.key == "Left" || e.key == "ArrowLeft") {
74
-
244
+
75
- brick[c][r] = { x: 0, y: 0 };
245
+ leftPressed = true;
76
-
246
+
77
- }
247
+ }
78
-
248
+
79
- }```
249
+ }
250
+
251
+
252
+
253
+ function keyUpHandler(e) {
254
+
255
+ if (e.key == "Right" || e.key == "ArrowRight") {
256
+
257
+ rightPressed = false;
258
+
259
+ } else if (e.key == "Left" || e.key == "ArrowLeft") {
260
+
261
+ leftPressed = false;
262
+
263
+ }
264
+
265
+ }
266
+
267
+
268
+
269
+ var interval = setInterval(draw, 10);
270
+
271
+ </script>
272
+
273
+ </body>
274
+
275
+
276
+
277
+ </html>```