【JavaScript】四角い図形を無限に跳ね返るようにして、配列で制御した図形の数は間を空けて出るようにしたい。

前提・実現したいこと

タイトルにもあるように、四角い図形を無限に跳ね返るようにして、配列で制御した図形の数は間を空けて出るようにしたくて、先生がヒントのソースコードを書いてくれましたが、ここからどうすればいいのかわかりません！ちなみに、いじる必要があるファイルはgama.jsです。

該当のソースコード

game.html

HTML
1
2<!DOCTYPE html>
3<html>
4<head>
5<meta charset="UTF-8">
6<title>JS GAME Study1</title>
7<script src="main.js"></script>
8<script src="game.js"></script>
9<style>
10canvas {
11	user-select: none;
12	position:	absolute;
13	border:solid #999999 1px;
14	-webkit-user-select: none;
15	-ms-user-select: none;
16	-moz-user-select: none;
17}
18canvas#bg{	z-index:	0;}
19canvas#main{	z-index:	1;}
20</style>
21</head>
22
23<body>
24<canvas id="bg" width="800px" height="600px"></canvas>
25<canvas id="main" width="800px" height="600px"></canvas>
26</body>
27</html>
28

main.js

JavaScript
1/*
2*/
3window.onload = init;
4
5// Canvas
6let cvBg;
7let cvMain;
8let ctBg;
9let ctMain;
10
11let FPTIME = 20;	// 1frame 20ms
12let FPTIMESEC = 50;
13
14// 画面サイズ
15let scr_w = 800;
16let scr_h = 600;
17
18let nowTime;
19let oldTime;
20let main_loop;		// メインループタイマー
21let main_mode;
22
23// 画像データ格納用
24let gd = new Array(16);
25let gd_flag;
26let gd_load;
27let draw_flag;
28
29// マウス操作用
30let mouseDown;
31let mouseX;
32let mouseY;
33
34// マウスボタンが押されているかどうかを調べる変数を宣言
35
36function init() {
37	// キャンバスの取得
38	cvBg = document.getElementById("bg");
39	// コンテキストの取得
40	ctBg = cvBg.getContext("2d");
41	cvBg.style.backgroundColor = "#000";	// 黒色
42
43	cvMain = document.getElementById("main");
44	ctMain = cvMain.getContext("2d");
45
46	// マウス操作のための処理
47	mouseDown = false;
48	document.onmousedown = function(e){
49		mouseDown = true;
50		e.preventDefault();
51	}
52	document.onmouseup = function(e){
53		mouseDown = false;
54	}
55	document.onmousemove = function(e){
56		let rect = e.target.getBoundingClientRect();
57		mouseX = e.clientX - rect.left;
58		mouseY = e.clientY - rect.top;
59		e.preventDefault();
60	}
61
62	// 画像データ読み込み
63	load_cg();
64
65	main_mode = 0;
66	nowTime = new Date();
67	oldTime = nowTime.getTime();
68	main_loop = setTimeout('Main()',FPTIME);	//メインループプロセス(XXms毎処理される)
69}
70
71
72/*
73	ゲームに必要な画像を配列データにして
74	そのリスト全部のファイルを image として作成する
75*/
76function load_cg() {
77	let cgd = [
78		"donuts.png"
79	];
80	let i;
81
82	gd_flag = 0;
83	gd_load = 0;
84
85	for(i=0; i<cgd.length; i++)
86	{
87		if(cgd[i] == 0) continue;
88		gd[i] = new Image();
89		gd[i].src = "images/" +cgd[i]+ "?" + new Date().getTime();
90		gd_flag++;
91
92		gd[i].onload = function() {
93			gd_load++;
94		}
95	}
96	draw_flag = 0;
97}
98
99function Main() {
100	if(main_mode == 0){
101		// 初期化
102		// 画像が全部読み込まれるまで待つ
103		if(gd_flag == gd_load){
104			main_mode++;
105			// プレイに必要な変数の初期化
106			GameInit();
107			draw_flag |= 1;
108		}
109	}else
110	if(main_mode == 1){
111		// プレイ中
112		GameMain()
113		GameDraw();
114	}
115
116	nowTime = new Date();
117	let time = nowTime.getTime()-oldTime;	// 処理時間
118	oldTime = nowTime.getTime();
119	time = FPTIME - time;
120	if(time > 1){
121		setTimeout('Main()',time);	//メインループプロセス(XXms毎処理される)
122		//break;
123	}else{
124		setTimeout('Main()',1);		//メインループプロセス(1ms後処理される)
125	}
126}
127
128

game.js

JavaScript
1/*
2	ゲームルーチン
3*/
4
5// 必要な変数を宣言
6
7// 画面に出す図形の数と大きさを定義
8const OBJ_SZ = 80;
9const GMAX = 20;		// 図形の個数
10
11let bw, bh;
12let bx = new Array(GMAX);
13let by = new Array(GMAX);
14let dx = new Array(GMAX);
15let dy = new Array(GMAX);
16let ix = 0;
17let timer = 0;//タイマー
18let step = 0;//動いていい番号
19
20
21// 初期設定
22function GameInit() {
23	let i;
24	for(i = 0; i < GMAX; i++){
25		bx[i] = 100;
26		by[i] = 200;
27        bw = bh = OBJ_SZ;
28        dx[i] = 6;
29        dy[i] = 6;
30        //dy[0] = 90;
31	}
32}
33
34// メインの処理
35function GameMain() {
36    for (ix = 0; ix < GMAX; ix++) {
37        if (ix >= step) continue;
38        bx[ix] += dx[ix];
39        if (bx[ix] >= 800 - OBJ_SZ || bx[ix] <= 0) {
40            dx[ix] = -dx[ix];
41        }
42        by[ix] += dy[ix];
43        if (by[ix] >= 600 - OBJ_SZ || by[ix] <= 0) {
44            dy[ix] = -dy[ix];
45        }
46    }
47    /* ～Part1～
48    timer--;
49    if (timer <= 0) {
50        step++;//番号をUP
51        timer = 10;//一次の時間
52    }
53    for (ix = 0; ix < GMAX; ix++) {
54        if (ix > step)
55            continue;
56        bx[ix] += dx[ix];
57        if (bx[ix] >= 800 - OBJ_SZ || bx[ix] <= 0) {
58            dx[ix] = -dx[ix];
59            by[ix] += 80;
60            if (by[ix] >= 600) {
61                bx[ix] = by[ix] = 0;
62                dx[ix] = 15;
63            }
64        }
65}
66*/
67}
68
69
70// 描画処理
71function GameDraw() {
72	// canvasをクリア
73	ctMain.clearRect(0,0, scr_w, scr_h);
74
75	// 塗りつぶし色の設定
76	ctMain.fillStyle = "red";
77	// 四角形（塗りつぶし）の描画
78
79	let i;
80	for(i = 0; i<GMAX; i++){
81		ctMain.fillRect(bx[i],by[i],bw,bh);
82	}
83}
84
85

試したこと

ifのtimerを加えたりしました。

補足情報（FW/ツールのバージョンなど）

Microsoft Visual Studio 2017
Chrome

stdio

2019/04/25 01:44

「配列で制御した図形の数は間を空けて出る」この部分の意味が分かりません。何がしたいの？先生に聞けばいいのでは？それか友人にでも訪ねましょう。

DarkShuper

2019/04/25 03:07

ごめんなさい、説明が難しすぎて。。。一応イメージとしてこういう感じです。。。 https://www.dropbox.com/s/d45zg9oc302u18a/%E3%82%A4%E3%83%A1%E3%83%BC%E3%82%B83.png?dl=0 先生が今日いなくて聞けないのです。しかも週一しかその先生が来ないので・・・友人で理解している人がおらず、できる人がいません。

行動規範の内容に同意します

回答1件

ベストアンサー

仕様を完璧に理解できている自信はありませんが、

ix >= stepをix > stepに変更する。またはこのif文とcontinueを削除しその上のfor文の継続条件ix < GMAXをix <= stepに変更する(step <= ix <= GMAXの時のループは無駄なので)。
コメントアウトされているtimer--とその下のif文を有効にする。
描画処理のfor文の継続条件i<GMAXをi <= stepに変更する。