質問編集履歴

3

2022/01/12 07:50

投稿

oil
oil

スコア11

test CHANGED
File without changes
test CHANGED
@@ -1,121 +1,262 @@
1
1
  # スマホで遊べるように、キーボードイベントをマウスオーバーイベントに変更しようと色々と試してみて、左右には動くように出来たのですが、ジャンプを追加すると動かなくなってしまいます。書き方を教えて下さい。よろしくお願いします。
2
2
 
3
-
4
-
5
3
  ### <span>タグでボタンの代わりを用意して、onmouseoverで動かそうとしてます。
6
4
 
7
-
8
-
9
5
  #### Uncaught TypeError: Cannot read properties of null (reading 'addEventListener')
10
-
11
6
  #### Play_A.addEventListener("mouseover", () => {
12
-
13
7
  #### この部分にエラーが出ます。
14
8
 
15
-
16
-
17
9
  ```HTML
18
-
19
10
  <div class="play_touch" ontouchstart="">
20
-
21
- <br><span id="Play_Left" onmouseover="keyb.Left" onmouseout="keyb.Left" value="0"></span>
11
+ <br><span id="Play_Left" onmouseover="" onmouseout=""></span>
22
-
23
- <br><span id="Play_Right" onmouseover="keyb.Right" onmouseout="keyb.Right" value="1"></span>
12
+ <br><span id="Play_Right" onmouseover="" onmouseout=""></span>
24
-
25
- <br><span id="play_B" onmouseover="" onmouseout="" value="2"></span>
13
+ <br><span id="play_B" onmouseover="" onmouseout=""></span>
26
-
27
- <br><span id="Play_A" onmouseover="keyb.ABUTTON" onmouseout="keyb.ABUTTON" value="3"></span>
14
+ <br><span id="Play_A" onmouseover="" onmouseout=""></span>
28
-
29
15
  </div>
30
-
31
16
  ```
32
-
33
17
  ```JavaScript
34
-
35
18
  // キーボードが押された時に呼ばれる
36
-
37
19
  document.body.addEventListener("keydown", (event) => {
38
-
39
20
  if (event.key === "ArrowLeft") keyb.Left = true;
40
-
41
21
  if (event.key === "ArrowRight") keyb.Right = true;
42
-
43
22
  if (event.key === "z") keyb.BBUTTON = true;
44
-
45
23
  if (event.key === "x") keyb.ABUTTON = true;
46
-
47
- });
24
+ });
48
-
49
-
50
25
 
51
26
  // キーボードが離された時に呼ばれる
52
-
53
27
  document.body.addEventListener("keyup", (event) => {
54
-
55
28
  if (event.key === "ArrowLeft") keyb.Left = false;
56
-
57
29
  if (event.key === "ArrowRight") keyb.Right = false;
58
-
59
30
  if (event.key === "z") keyb.BBUTTON = false;
60
-
61
31
  if (event.key === "x") keyb.ABUTTON = false;
62
-
63
- });
32
+ });
64
-
65
-
66
33
 
67
34
  // マウスオーバーイベント
68
-
69
35
  const Play_A = document.getElementById("play_A");
70
-
71
36
  const Play_Left = document.getElementById("Play_Left");
72
-
73
37
  const Play_Right = document.getElementById("Play_Right");
74
38
 
75
-
76
-
77
39
  //keyb.ABUTTON、 ジャンプボタン、これが上手く出来ません。
78
-
79
40
  Play_A.addEventListener("mouseover", () => {
80
-
81
41
  keyb.ABUTTON = true;
82
-
83
- });
42
+ });
84
-
85
43
  Play_A.addEventListener("mouseout", () => {
86
-
87
44
  keyb.ABUTTON = false;
88
-
89
- });
45
+ });
90
-
91
-
92
46
 
93
47
  //keyb.Left、keyb.Right、 左右に動かせます。
94
-
95
48
  Play_Left.addEventListener("mouseover", () => {
96
-
97
49
  keyb.Left = true;
98
-
99
- });
50
+ });
100
-
101
51
  Play_Left.addEventListener("mouseout", () => {
102
-
103
52
  keyb.Left = false;
104
-
105
- });
53
+ });
106
-
107
-
108
54
 
109
55
  Play_Right.addEventListener("mouseover", () => {
110
-
111
56
  keyb.Right = true;
112
-
113
- });
57
+ });
114
-
115
58
  Play_Right.addEventListener("mouseout", () => {
116
-
117
59
  keyb.Right = false;
118
-
119
- });
60
+ });
120
-
121
61
  ```
62
+
63
+ ```javaScript
64
+ //
65
+ // おじさんクラス
66
+ //
67
+
68
+ const ANIME_STAND = 1;
69
+ const ANIME_WALK = 2;
70
+ const ANIME_BRAKE = 4;
71
+ const ANIME_JUMP = 8;
72
+ const GRAVITY = 4;
73
+ const MAX_SPEED = 32;
74
+
75
+ class Ojisan {
76
+ constructor(x, y) {
77
+ this.x = x << 4;
78
+ this.y = y << 4;
79
+ this.vx = 0;
80
+ this.vy = 0;
81
+ this.anim = 0;
82
+ this.snum = 0;
83
+ this.acou = 0;
84
+ this.dirc = 0;
85
+ this.jump = 0;
86
+ }
87
+
88
+ // 床の判定
89
+ checkFloor() {
90
+ if (this.vy <= 0) return;
91
+ let lx = (this.x + this.vx) >> 4;
92
+ let ly = (this.y + this.vy) >> 4;
93
+
94
+ if (field.isBlock(lx + 1, ly + 31) || field.isBlock(lx + 14, ly + 31)) {
95
+ if (this.anim == ANIME_JUMP) this.anim = ANIME_WALK;
96
+ this.jump = 0;
97
+ this.vy = 0;
98
+ this.y = ((((ly + 31) >> 4) << 4) - 32) << 4;
99
+ }
100
+ }
101
+
102
+ // 天井の判定
103
+ checkCeil() {
104
+ if (this.vy >= 0) return;
105
+
106
+ let lx = (this.x + this.vx) >> 4;
107
+ let ly = (this.y + this.vy) >> 4;
108
+
109
+ let bl;
110
+ if ((bl = field.isBlock(lx + 8, ly + 5))) {
111
+ this.jump = 15;
112
+ this.vy = 0;
113
+
114
+ blook.push(new Blook(bl, (lx + 8) >> 4, (ly + 5) >> 4));
115
+ }
116
+ }
117
+
118
+ // 横の壁の判定
119
+ checkWall() {
120
+ let lx = (this.x + this.vx) >> 4;
121
+ let ly = (this.y + this.vy) >> 4;
122
+
123
+ // 右側のチェック
124
+ if (
125
+ field.isBlock(lx + 15, ly + 9) ||
126
+ field.isBlock(lx + 15, ly + 15) ||
127
+ field.isBlock(lx + 15, ly + 24)
128
+ ) {
129
+ this.vx = 0;
130
+ this.x -= 8;
131
+ }
132
+ // 左側のチェック
133
+ else if (
134
+ field.isBlock(lx, ly + 9) ||
135
+ field.isBlock(lx, ly + 15) ||
136
+ field.isBlock(lx, ly + 24)
137
+ ) {
138
+ this.vx = 0;
139
+ this.x += 8;
140
+ }
141
+ }
142
+
143
+ //ジャンプ処理
144
+ updateJump() {
145
+ //ジャンプ
146
+ if (keyb.ABUTTON) {
147
+ if (this.jump == 0) {
148
+ this.anim = ANIME_JUMP;
149
+ this.jump = 1;
150
+ }
151
+ if (this.jump < 15) this.vy = -(64 - this.jump);
152
+ }
153
+ if (this.jump) this.jump++;
154
+ }
155
+
156
+ //横方向の移動
157
+ updateWalkSub(dir) {
158
+ //最高速まで加速
159
+ if (dir == 0 && this.vx < MAX_SPEED) this.vx++;
160
+ if (dir == 1 && this.vx > -MAX_SPEED) this.vx--;
161
+
162
+ //ジャンプしてない時
163
+ if (!this.jump) {
164
+ //立ちポーズだった時はカウンタリセット
165
+ if (this.anim == ANIME_STAND) this.acou = 0;
166
+ //アニメを歩きアニメ
167
+ this.anim = ANIME_WALK;
168
+ //方向を設定
169
+ this.dirc = dir;
170
+ //逆方向の時はブレーキをかける
171
+ if (dir == 0 && this.vx < 0) this.vx++;
172
+ if (dir == 1 && this.vx > 0) this.vx--;
173
+ //逆に強い加速の時はブレーキアニメ
174
+ if ((dir == 1 && this.vx > 8) || (dir == 0 && this.vx < -8))
175
+ this.anim = ANIME_BRAKE;
176
+ }
177
+ }
178
+
179
+ //歩く処理
180
+ updateWalk() {
181
+ //横移動
182
+ if (keyb.Left) {
183
+ this.updateWalkSub(1);
184
+ } else if (keyb.Right) {
185
+ this.updateWalkSub(0);
186
+ } else {
187
+ if (!this.jump) {
188
+ if (this.vx > 0) this.vx -= 1;
189
+ if (this.vx < 0) this.vx += 1;
190
+ if (!this.vx) this.anim = ANIME_STAND;
191
+ }
192
+ }
193
+ }
194
+
195
+ //スプライトを変える処理
196
+ updateAnim() {
197
+ //スプライトの決定
198
+ switch (this.anim) {
199
+ case ANIME_STAND:
200
+ this.snum = 0;
201
+ break;
202
+ case ANIME_WALK:
203
+ this.snum = 2 + ((this.acou / 6) % 3);
204
+ break;
205
+ case ANIME_JUMP:
206
+ this.snum = 6;
207
+ break;
208
+ case ANIME_BRAKE:
209
+ this.snum = 5;
210
+ break;
211
+ }
212
+ //左向きの時は+48を使う
213
+ if (this.dirc) this.snum += 48;
214
+ }
215
+
216
+ //毎フレーム毎の更新処理
217
+ update() {
218
+ //アニメ用のカウンタ
219
+ this.acou++;
220
+ if (Math.abs(this.vx) == MAX_SPEED) this.acou++;
221
+
222
+ this.updateJump();
223
+ this.updateWalk();
224
+ this.updateAnim();
225
+
226
+ //重力
227
+ if (this.vy < 64) this.vy += GRAVITY;
228
+
229
+ // 横の壁のチェック
230
+ this.checkWall();
231
+
232
+ // 床のチェック
233
+ this.checkFloor();
234
+
235
+ // 天井のチェック
236
+ this.checkCeil();
237
+
238
+ //実際に座標を変えてる
239
+ this.x += this.vx;
240
+ this.y += this.vy;
241
+
242
+ /*
243
+ //床にぶつかる
244
+ if( this.y > 160<<4 )
245
+ {
246
+ if(this.anim==ANIME_JUMP)this.anim=ANIME_WALK;
247
+ this.jump = 0;
248
+ this.vy = 0;
249
+ this.y = 160<<4;
250
+ }
251
+ */
252
+ }
253
+
254
+ //毎フレーム毎の描画処理
255
+ draw() {
256
+ let px = (this.x >> 4) - field.scx;
257
+ let py = (this.y >> 4) - field.scy;
258
+ drawSprite(this.snum, px, py);
259
+ }
260
+ }
261
+
262
+ ```

2

訂正

2021/12/29 12:22

投稿

oil
oil

スコア11

test CHANGED
File without changes
test CHANGED
@@ -119,405 +119,3 @@
119
119
  });
120
120
 
121
121
  ```
122
-
123
-
124
-
125
- ```javaScript
126
-
127
- //
128
-
129
- // おじさんクラス
130
-
131
- //
132
-
133
-
134
-
135
- const ANIME_STAND = 1;
136
-
137
- const ANIME_WALK = 2;
138
-
139
- const ANIME_BRAKE = 4;
140
-
141
- const ANIME_JUMP = 8;
142
-
143
- const GRAVITY = 4;
144
-
145
- const MAX_SPEED = 32;
146
-
147
-
148
-
149
- class Ojisan {
150
-
151
- constructor(x, y) {
152
-
153
- this.x = x << 4;
154
-
155
- this.y = y << 4;
156
-
157
- this.vx = 0;
158
-
159
- this.vy = 0;
160
-
161
- this.anim = 0;
162
-
163
- this.snum = 0;
164
-
165
- this.acou = 0;
166
-
167
- this.dirc = 0;
168
-
169
- this.jump = 0;
170
-
171
- }
172
-
173
-
174
-
175
- // 床の判定
176
-
177
- checkFloor() {
178
-
179
- if (this.vy <= 0) return;
180
-
181
- let lx = (this.x + this.vx) >> 4;
182
-
183
- let ly = (this.y + this.vy) >> 4;
184
-
185
-
186
-
187
- if (field.isBlock(lx + 1, ly + 31) || field.isBlock(lx + 14, ly + 31)) {
188
-
189
- if (this.anim == ANIME_JUMP) this.anim = ANIME_WALK;
190
-
191
- this.jump = 0;
192
-
193
- this.vy = 0;
194
-
195
- this.y = ((((ly + 31) >> 4) << 4) - 32) << 4;
196
-
197
- }
198
-
199
- }
200
-
201
-
202
-
203
- // 天井の判定
204
-
205
- checkCeil() {
206
-
207
- if (this.vy >= 0) return;
208
-
209
-
210
-
211
- let lx = (this.x + this.vx) >> 4;
212
-
213
- let ly = (this.y + this.vy) >> 4;
214
-
215
-
216
-
217
- let bl;
218
-
219
- if ((bl = field.isBlock(lx + 8, ly + 5))) {
220
-
221
- this.jump = 15;
222
-
223
- this.vy = 0;
224
-
225
-
226
-
227
- blook.push(new Blook(bl, (lx + 8) >> 4, (ly + 5) >> 4));
228
-
229
- }
230
-
231
- }
232
-
233
-
234
-
235
- // 横の壁の判定
236
-
237
- checkWall() {
238
-
239
- let lx = (this.x + this.vx) >> 4;
240
-
241
- let ly = (this.y + this.vy) >> 4;
242
-
243
-
244
-
245
- // 右側のチェック
246
-
247
- if (
248
-
249
- field.isBlock(lx + 15, ly + 9) ||
250
-
251
- field.isBlock(lx + 15, ly + 15) ||
252
-
253
- field.isBlock(lx + 15, ly + 24)
254
-
255
- ) {
256
-
257
- this.vx = 0;
258
-
259
- this.x -= 8;
260
-
261
- }
262
-
263
- // 左側のチェック
264
-
265
- else if (
266
-
267
- field.isBlock(lx, ly + 9) ||
268
-
269
- field.isBlock(lx, ly + 15) ||
270
-
271
- field.isBlock(lx, ly + 24)
272
-
273
- ) {
274
-
275
- this.vx = 0;
276
-
277
- this.x += 8;
278
-
279
- }
280
-
281
- }
282
-
283
-
284
-
285
- //ジャンプ処理
286
-
287
- updateJump() {
288
-
289
- //ジャンプ
290
-
291
- if (keyb.ABUTTON) {
292
-
293
- if (this.jump == 0) {
294
-
295
- this.anim = ANIME_JUMP;
296
-
297
- this.jump = 1;
298
-
299
- }
300
-
301
- if (this.jump < 15) this.vy = -(64 - this.jump);
302
-
303
- }
304
-
305
- if (this.jump) this.jump++;
306
-
307
- }
308
-
309
-
310
-
311
- //横方向の移動
312
-
313
- updateWalkSub(dir) {
314
-
315
- //最高速まで加速
316
-
317
- if (dir == 0 && this.vx < MAX_SPEED) this.vx++;
318
-
319
- if (dir == 1 && this.vx > -MAX_SPEED) this.vx--;
320
-
321
-
322
-
323
- //ジャンプしてない時
324
-
325
- if (!this.jump) {
326
-
327
- //立ちポーズだった時はカウンタリセット
328
-
329
- if (this.anim == ANIME_STAND) this.acou = 0;
330
-
331
- //アニメを歩きアニメ
332
-
333
- this.anim = ANIME_WALK;
334
-
335
- //方向を設定
336
-
337
- this.dirc = dir;
338
-
339
- //逆方向の時はブレーキをかける
340
-
341
- if (dir == 0 && this.vx < 0) this.vx++;
342
-
343
- if (dir == 1 && this.vx > 0) this.vx--;
344
-
345
- //逆に強い加速の時はブレーキアニメ
346
-
347
- if ((dir == 1 && this.vx > 8) || (dir == 0 && this.vx < -8))
348
-
349
- this.anim = ANIME_BRAKE;
350
-
351
- }
352
-
353
- }
354
-
355
-
356
-
357
- //歩く処理
358
-
359
- updateWalk() {
360
-
361
- //横移動
362
-
363
- if (keyb.Left) {
364
-
365
- this.updateWalkSub(1);
366
-
367
- } else if (keyb.Right) {
368
-
369
- this.updateWalkSub(0);
370
-
371
- } else {
372
-
373
- if (!this.jump) {
374
-
375
- if (this.vx > 0) this.vx -= 1;
376
-
377
- if (this.vx < 0) this.vx += 1;
378
-
379
- if (!this.vx) this.anim = ANIME_STAND;
380
-
381
- }
382
-
383
- }
384
-
385
- }
386
-
387
-
388
-
389
- //スプライトを変える処理
390
-
391
- updateAnim() {
392
-
393
- //スプライトの決定
394
-
395
- switch (this.anim) {
396
-
397
- case ANIME_STAND:
398
-
399
- this.snum = 0;
400
-
401
- break;
402
-
403
- case ANIME_WALK:
404
-
405
- this.snum = 2 + ((this.acou / 6) % 3);
406
-
407
- break;
408
-
409
- case ANIME_JUMP:
410
-
411
- this.snum = 6;
412
-
413
- break;
414
-
415
- case ANIME_BRAKE:
416
-
417
- this.snum = 5;
418
-
419
- break;
420
-
421
- }
422
-
423
- //左向きの時は+48を使う
424
-
425
- if (this.dirc) this.snum += 48;
426
-
427
- }
428
-
429
-
430
-
431
- //毎フレーム毎の更新処理
432
-
433
- update() {
434
-
435
- //アニメ用のカウンタ
436
-
437
- this.acou++;
438
-
439
- if (Math.abs(this.vx) == MAX_SPEED) this.acou++;
440
-
441
-
442
-
443
- this.updateJump();
444
-
445
- this.updateWalk();
446
-
447
- this.updateAnim();
448
-
449
-
450
-
451
- //重力
452
-
453
- if (this.vy < 64) this.vy += GRAVITY;
454
-
455
-
456
-
457
- // 横の壁のチェック
458
-
459
- this.checkWall();
460
-
461
-
462
-
463
- // 床のチェック
464
-
465
- this.checkFloor();
466
-
467
-
468
-
469
- // 天井のチェック
470
-
471
- this.checkCeil();
472
-
473
-
474
-
475
- //実際に座標を変えてる
476
-
477
- this.x += this.vx;
478
-
479
- this.y += this.vy;
480
-
481
-
482
-
483
- /*
484
-
485
- //床にぶつかる
486
-
487
- if( this.y > 160<<4 )
488
-
489
- {
490
-
491
- if(this.anim==ANIME_JUMP)this.anim=ANIME_WALK;
492
-
493
- this.jump = 0;
494
-
495
- this.vy = 0;
496
-
497
- this.y = 160<<4;
498
-
499
- }
500
-
501
- */
502
-
503
- }
504
-
505
-
506
-
507
- //毎フレーム毎の描画処理
508
-
509
- draw() {
510
-
511
- let px = (this.x >> 4) - field.scx;
512
-
513
- let py = (this.y >> 4) - field.scy;
514
-
515
- drawSprite(this.snum, px, py);
516
-
517
- }
518
-
519
- }
520
-
521
-
522
-
523
- ```

1

エラー箇所の追加

2021/12/29 12:22

投稿

oil
oil

スコア11

test CHANGED
File without changes
test CHANGED
@@ -6,6 +6,14 @@
6
6
 
7
7
 
8
8
 
9
+ #### Uncaught TypeError: Cannot read properties of null (reading 'addEventListener')
10
+
11
+ #### Play_A.addEventListener("mouseover", () => {
12
+
13
+ #### この部分にエラーが出ます。
14
+
15
+
16
+
9
17
  ```HTML
10
18
 
11
19
  <div class="play_touch" ontouchstart="">