teratail
回答率
85.35%
teratail header banner
teratail header banner
質問するログイン新規登録
トップに関する質問JavaScript Canvasでのゲーム開発

編集履歴

質問編集履歴

1

詳細の追加

2020/03/23 23:10

投稿

jirosian
jirosian

スコア7

test CHANGED
File without changes
test CHANGED
@@ -54,7 +54,7 @@
54
54
 
55
55
  ```````````````````````````````````````````````````````````````````
56
56
 
57
-
57
+ "use strict";
58
58
 
59
59
  let ctx;
60
60
 
@@ -78,6 +78,398 @@
78
78
 
79
79
 
80
80
 
81
+ function setup() {
82
+
83
+ ctx = document.getElementById("gameCanvas").getContext("2d");
84
+
85
+ sx = 31.25;
86
+
87
+ sy = 31.25;
88
+
89
+ gx = randomNumber();
90
+
91
+ gy = randomNumber();
92
+
93
+ ex = randomNumber();
94
+
95
+ ey = randomNumber();
96
+
97
+ count = 0;
98
+
99
+ //wx = randomNumber();
100
+
101
+ //wy = randomNumber();
102
+
103
+ draw();
104
+
105
+
106
+
107
+ }
108
+
109
+
110
+
111
+ function drawWall(x,y){
112
+
113
+
114
+
115
+ ctx.save();
116
+
117
+ ctx.translate(0,0);
118
+
119
+ ctx.fillStyle = "black";
120
+
121
+ ctx.rect(x,y,125,62.5);
122
+
123
+ ctx.fill();
124
+
125
+ ctx.restore();
126
+
127
+
128
+
129
+ }
130
+
131
+
132
+
133
+ function randomNumber() {
134
+
135
+ let locNum=31.25;
136
+
137
+ let locArray = []
138
+
139
+ for(let i=0;locNum<500;i++) {
140
+
141
+ locArray[i] = locNum;
142
+
143
+ locNum+=62.5;
144
+
145
+ }
146
+
147
+ return locArray[Math.floor(Math.random()*locArray.length)];
148
+
149
+
150
+
151
+ }
152
+
153
+
154
+
155
+ function draw() {
156
+
157
+ ctx.clearRect(0, 0, 500, 500);
158
+
159
+ drawGoal(gx,gy);
160
+
161
+ drawPlayer(sx,sy);
162
+
163
+ drawEnemy(ex,ey);
164
+
165
+ makeGrid();
166
+
167
+ let x=187.5;
168
+
169
+ let y=62.5;
170
+
171
+ //for(let i=0;i<5;i++){
172
+
173
+ //drawWall(x,y);
174
+
175
+ //y+=62.5
176
+
177
+ //}
178
+
179
+
180
+
181
+ }
182
+
183
+
184
+
185
+ function makeGrid() {
186
+
187
+ ctx.save();
188
+
189
+ ctx.translate(0,0);
190
+
191
+
192
+
193
+ let x = 62.5;
194
+
195
+ let y = 0;
196
+
197
+ for (let j = 0;j < 8;j++) {
198
+
199
+ ctx.beginPath();
200
+
201
+ ctx.strokeStyle = "DarkSalmon";
202
+
203
+ ctx.moveTo(x,y);
204
+
205
+ ctx.lineTo(x,y+500);
206
+
207
+ ctx.stroke();
208
+
209
+ x+=62.5;
210
+
211
+ }
212
+
213
+ x = 0;
214
+
215
+ y = 62.5;
216
+
217
+ for (let i =0;i<8;i++) {
218
+
219
+ ctx.beginPath();
220
+
221
+ ctx.strokeStyle = "DarkSalmon";
222
+
223
+ ctx.moveTo(x,y);
224
+
225
+ ctx.lineTo(x+500,y);
226
+
227
+ ctx.stroke();
228
+
229
+ y+=62.5;
230
+
231
+ }
232
+
233
+ ctx.restore();
234
+
235
+ }
236
+
237
+
238
+
239
+ function drawGoal(x,y) {
240
+
241
+ ctx.save();
242
+
243
+ //drawing arms and legs
244
+
245
+ ctx.beginPath();
246
+
247
+ ctx.strokeStyle = "black"
248
+
249
+ ctx.moveTo(x-10,y+10);
250
+
251
+ ctx.lineTo(x-20,y-5);
252
+
253
+ ctx.moveTo(x+10,y+10);
254
+
255
+ ctx.lineTo(x+20,y-5);
256
+
257
+ /*
258
+
259
+ ctx.moveTo(x-10,y+30);
260
+
261
+ ctx.lineTo(x-20,y+35);
262
+
263
+ ctx.moveTo(x+10,y+30);
264
+
265
+ ctx.lineTo(x+20,y+35);
266
+
267
+ */
268
+
269
+ ctx.stroke();
270
+
271
+
272
+
273
+ //face
274
+
275
+ ctx.beginPath();
276
+
277
+ ctx.fillStyle= "yellow";
278
+
279
+ ctx.arc(x,y, 10,0, 2*Math.PI)
280
+
281
+ ctx.fill();
282
+
283
+ //left eye
284
+
285
+ ctx.beginPath();
286
+
287
+ ctx.fillStyle = "black"
288
+
289
+ ctx.arc(x-10,y, 2,0, 2*Math.PI)
290
+
291
+ ctx.fill();
292
+
293
+
294
+
295
+ //right eye
296
+
297
+ ctx.beginPath();
298
+
299
+ ctx.fillStyle = "black"
300
+
301
+ ctx.arc(x+10,y, 2,0, 2*Math.PI)
302
+
303
+ ctx.fill();
304
+
305
+
306
+
307
+ //mouth
308
+
309
+ ctx.beginPath();
310
+
311
+ ctx.fillStyle = "brown"
312
+
313
+ ctx.arc(x,y+8, 6,0, 2*Math.PI)
314
+
315
+ ctx.fill();
316
+
317
+
318
+
319
+ //mouth line
320
+
321
+ ctx.beginPath();
322
+
323
+ ctx.lineTo(x-6,y+8);
324
+
325
+ ctx.lineTo(x+6,y+8);
326
+
327
+ ctx.stroke();
328
+
329
+
330
+
331
+ //body
332
+
333
+ ctx.beginPath();
334
+
335
+ ctx.lineWidth = "20";
336
+
337
+ ctx.strokeStyle = "yellow"
338
+
339
+ ctx.lineTo(x,y+15);
340
+
341
+ ctx.lineTo(x,y+20);
342
+
343
+ ctx.stroke();
344
+
345
+ ctx.restore();
346
+
347
+
348
+
349
+
350
+
351
+ }
352
+
353
+
354
+
355
+ function drawPlayer(x,y) {
356
+
357
+ ctx.save();
358
+
359
+ ctx.beginPath();
360
+
361
+ ctx.fillStyle= "yellow";
362
+
363
+ ctx.arc(x,y, 25,0, 2*Math.PI)
364
+
365
+ ctx.fill();
366
+
367
+
368
+
369
+ ctx.beginPath();
370
+
371
+ ctx.fillStyle = "black"
372
+
373
+ ctx.arc(x-15,y-5, 4,0, 2*Math.PI)
374
+
375
+ ctx.fill();
376
+
377
+
378
+
379
+ ctx.beginPath();
380
+
381
+ ctx.fillStyle = "black"
382
+
383
+ ctx.arc(x+15,y-5, 4,0, 2*Math.PI)
384
+
385
+ ctx.fill();
386
+
387
+
388
+
389
+ ctx.beginPath();
390
+
391
+ ctx.fillStyle = "brown"
392
+
393
+ ctx.arc(x,y+8, 10,0, 2*Math.PI)
394
+
395
+ ctx.fill();
396
+
397
+
398
+
399
+ ctx.beginPath();
400
+
401
+ ctx.moveTo(x-10,y+8);
402
+
403
+ ctx.lineTo(x+10,y+8);
404
+
405
+ ctx.stroke();
406
+
407
+ ctx.restore();
408
+
409
+
410
+
411
+
412
+
413
+ }
414
+
415
+
416
+
417
+ function drawEnemy(x,y) {
418
+
419
+ ctx.save();
420
+
421
+ ctx.translate(x,y);
422
+
423
+
424
+
425
+ //body
426
+
427
+ ctx.beginPath();
428
+
429
+ ctx.fillStyle = "CadetBlue"
430
+
431
+ ctx.rect(-20,-24,40,50);
432
+
433
+ ctx.fill();
434
+
435
+
436
+
437
+ //eyes
438
+
439
+ ctx.beginPath();
440
+
441
+ ctx.fillStyle = "AliceBlue"
442
+
443
+ ctx.rect(-15,-10,9,5);
444
+
445
+ ctx.rect(7,-10,9,5);
446
+
447
+ ctx.fill();
448
+
449
+
450
+
451
+ //mouth
452
+
453
+ ctx.beginPath();
454
+
455
+ ctx.fillStyle = "DarkRed"
456
+
457
+ ctx.arc(0, 3, 20, 0, Math.PI, false);
458
+
459
+ ctx.fill();
460
+
461
+
462
+
463
+ //ctx.strokeText("Mr.Enemy",-20,-15);
464
+
465
+
466
+
467
+ ctx.restore();
468
+
469
+ }
470
+
471
+
472
+
81
473
  addEventListener("keydown",function(event) {
82
474
 
83
475
  if(event.key == "ArrowUp") {
@@ -116,8 +508,6 @@
116
508
 
117
509
  }
118
510
 
119
- 　　　 document.getElementById('scoreOutput').innerHTML = "Rescue: " + count;
120
-
121
511
 
122
512
 
123
513
  draw();
@@ -127,3 +517,55 @@
127
517
 
128
518
 
129
519
  ```````````````````````````````````````````````````````````````````
520
+
521
+ 問題のjsのファンクション
522
+
523
+
524
+
525
+ ```````````````````````````````````````````````````````````````````
526
+
527
+ addEventListener("keydown",function(event) {
528
+
529
+ if(event.key == "ArrowUp") {
530
+
531
+ sy-=62.5;
532
+
533
+ }else if(event.key =="ArrowDown") {
534
+
535
+ sy+=62.5;
536
+
537
+ }else if(event.key == "ArrowLeft") {
538
+
539
+ sx-=62.5;
540
+
541
+ }else if(event.key == "ArrowRight") {
542
+
543
+ sx+=62.5;
544
+
545
+ }
546
+
547
+
548
+
549
+ let count =0;
550
+
551
+ while(sx==gx&&sy==gy) {
552
+
553
+ gx=undefined;
554
+
555
+ gy=undefined;
556
+
557
+ gx=randomNumber();
558
+
559
+ gy=randomNumber();
560
+
561
+ count++;
562
+
563
+ }
564
+
565
+
566
+
567
+ draw();
568
+
569
+ });
570
+
571
+ ```````````````````````````````````````````````````````````````````