JavaScriptでFNF音ゲー制作(ノーツの動作及びシーンについて)

Question

実現したいこと

• 秒数に応じて、落ちてくるノーツの移動速度を一定に保ちたい
• シーン切り替え用のクラス作成
• 音声及び画像すべてが読み込まれた際に、いつでも描画・音声を実行できるようにしたい

前提

・複数画像を描画することには成功(約2000個あったとしても)したが、読み込みに重い部分がある。
・シーンの切り替えクラスを実装したいが、そもそもどのように実装すればよいのか見当がついていない

発生している問題・エラーメッセージ

1:イメージとしては、ノーツ・判定枠の各画像座標を元に、上から下からでも、また判定枠自体が動いていたとしても、秒数で重なるようにノーツを一定量移動させたい。(常にrequestAnimationFrameが60FPS動作するという保証がないため)
しかし、クラスNotesの落ちてくる秒数が飾りになってしまっている。

2:シーン切り替え用のクラスを作成したいが、は以下のようなものを実装したい。
●タイトル画面(Enterキーのみでメニュー画面に行く)
●メニュー画面(コンフィグ、曲選択の二種類のオプションがある、操作は矢印キーのみ、ESCキーでタイトル画面に戻れる)
●ポーズ画面(ブラウザが非アクティブになったら、ゲーム実行時のみ強制的に呼び出す)
●コンフィグ画面(今現在は上下左右キーの割り当てキー・FPSの調整ができればよい)
●曲選択画面(本家FNFのストーリーモードのみ、フリープレイはなし)
https://www.newgrounds.com/portal/view/770371
●ゲーム実行画面
●ゲームオーバー画面

3:実行してみるとわかるが、若干遅延がかかってから画像が描画されているため、まだ処理が重いと思われる。
DOMコンテンツ読み込み完了時に音声と画像が読み込まれた状態にしたい。

該当のソースコード

const canvas = document.getElementById("fnfcanvas")
const ctx = canvas.getContext("2d");
let g_width = canvas.width = 1020;
let g_height = canvas.height = 680;
let sprite = 0;
let flags = false;
const audio = new Audio("loop006.mp3");
let images = []; //画像データURL群。ただし要素指定の必要あり。
let audios = []; //音声データURL群。ただし要素番号指定の必要あり。
let imagesindex = 0;

let nextDataindex = 0;
let visibleNotes=[];
window.addEventListener("click",(event)=>{
	if(!flags){
		audio.volume = 0.01;
		audio.loop = false;
		audio.play();
		flags = true;
	}

});
function playingtime(event){
	if(flags){
		let plytime = audio.currentTime;
		if(param.start){
			param.totaltime=Math.abs(param.end-param.start-plytime);
		}
		requestAnimationFrame(playingtime,event);
	}
}
audio.addEventListener("timeupdate",(event)=>{
	if(flags){
		param.end = event.timeStamp / 1000;
		requestAnimationFrame(playingtime,(param.end));
	} else {
		cancelAnimationFrame(playingtime)
	}
});
const param={
	totaltime: 0,
	start: 0,
	end: 0,
	bench_start: 0,
	bench_end: 0
}
const multiway={
	UP: 440,
	DOWN: 660,
	LEFT: 220,
	RIGHT: 880
}
function Min2MaxRand(max,min){	
	const double_max = max.toString().split('.');
	const double_min = min.toString().split('.');
	if(double_max[1] > 0 || double_min[1] > 0){
		const calc = Math.random() * (max-min+1)+min;
		return calc;
	} else {
		const calc = Math.random() * (max-min+1)+min;
    	return Math.floor(calc);
    }
}
//ノーツそのものの制御(座標・加速度・画像の大きさ・落ちてくる秒数)
class Notes{
	constructor(x,y,VelX,VelY,width,height,time,image,ways){
		this.x = x;
		this.y = y;
		this.VelX = VelX;
		this.VelY = VelY;
		this.width = width;
		this.height = height;
		this.time = time;
		this.image = image;
		this.ways = ways;
	}
	notesdrawing(x,y,VelX,VelY,width,height,time,image,ways){
		ctx.clearRect(0,0,g_width,g_height);
	}
	notesmoving(x,y,VelX,VelY,width,height,time,image,ways){
		//ここにVelYの挙動およびVelXなどの挙動を書く。
		this.y += this.VelY;
		if(this.y < -this.height){
			this.y = window.innerHeight;
		}
		ctx.clearRect(0,0,g_height,g_width);	
		for(let i = 0; i < notes_LEGENDALY.length;i++){
			ctx.drawImage(notes_LEGENDALY[i].img,(sprite*220),0,220,220,notes_LEGENDALY[i].x,notes_LEGENDALY[i].y,notes_LEGENDALY[i].width,notes_LEGENDALY[i].height);
		}
	}
}
let notes_LEGENDALY = [];
//const notes_LASO = [];
//const notes_SLASO = [];
//譜面データの読み込み
for(let i = 0; i < 200;i++){
	const test = new Notes((Min2MaxRand(620,0)),(Min2MaxRand(0,g_height)),1,1,110,110,(0.1+i),"arrow_down_left.png","left");
	notes_LEGENDALY.push(test);
}

for(let i = 0; i < notes_LEGENDALY.length;i++){
	notes_LEGENDALY[i].img = new Image();
	notes_LEGENDALY[i].img.src = notes_LEGENDALY[i].image;
	let y = notes_LEGENDALY[i].y
	notes_LEGENDALY[i].img.addEventListener("load",(event)=>{
		//ctx.clearRect(0,0,g_width,g_height);
		ctx.drawImage(notes_LEGENDALY[i].img,(sprite*220),0,220,220,notes_LEGENDALY[i].x,y,notes_LEGENDALY[i].width,notes_LEGENDALY[i].height);
	});
}
function loop(){
		if(param.end){
			while(nextDataindex < (notes_LEGENDALY.length-1)){
				if(notes_LEGENDALY[nextDataindex].time <= Math.abs(param.end-10)){
					/*今は空白*/
				} else if(notes_LEGENDALY[nextDataindex].time > Math.abs(param.end - 10)){
					break;
				}
				nextDataindex++;
			}
			for(let i = 0;i < visibleNotes.length;i++){
				if(visibleNotes[i].time < param.end){
					visibleNotes.splice(i,1);
				}
			}
		}
		ctx.clearRect(0,0,g_width,g_height);
		for(let i = 0; i < notes_LEGENDALY.length;i++){
			notes_LEGENDALY[i].y -= notes_LEGENDALY[i].VelY;
			if(notes_LEGENDALY[i].y  < -notes_LEGENDALY[i].height){
				notes_LEGENDALY[i].y = g_height;
			}		
			ctx.drawImage(notes_LEGENDALY[i].img,(sprite*220),0,220,220,notes_LEGENDALY[i].x,notes_LEGENDALY[i].y,notes_LEGENDALY[i].width,notes_LEGENDALY[i].height);
		}
		requestAnimationFrame(loop);
}
requestAnimationFrame(loop);
//判定枠
class notes_lane extends Notes{
	constructor(x,y,VelX,VelY,width,height,time,image){
		super(x,y,VelX,VelY,width,height,time,image);
		this.lanecollision(x,y,VelX,VelY,width,height,time);
	}
	lanecollision(x,y,VelX,VelY,width,height,time){
		
	}
	lanedrawing(){
		ctx.clearRect(0,0,width,height);
	}
}
//ノーツの種類(上から通常・半透明・ダメージノーツ・即死ノーツ)
class Notes_Elements{
	constructor(){
		this.normal = 'normal';
		this.invisible = 'invisible';
		this.reverse = 'damage';
		this.death = 'death';
	}
}
const Judge={
	PERFECT: 0.032,
	GOOD: 0.07,
	BAD: 1.1,
	MISS: 1.5
};


class Pushing{
	constructor(up_push,down_push,left_push,right_push){
		this.up_push = false;
		this,down_push = false;
		this.left_push = false;
		this.right_push = false;
	}	
}
class Pushing_continue extends Pushing{
	constructor(up_pushing,down_pushing,left_pushing,right_pushing){
		super(up_pushing,down_pushing,left_pushing,right_pushing);
	}

}
const NotesJudge= function(key_send,start,fin){
	const judgetime = Math.abs(10-Math.abs(start-fin));
    if(key_send.up_push){
    	if((judgetime <= Judge.PERFECT) && (judgetime >= 0)){
    		console.log(`Perfect: ${judgetime}ms`);
    		flags = false;
    		audio.pause();
    		audio.currentTime = 0;
    	}
    	
    	if(judgetime <= Judge.GOOD && judgetime > Judge.PERFECT){
    		console.log(`GOOD: ${judgetime}ms`);
    		flags = false;
    		audio.pause();
    		audio.currentTime = 0;
    	}
    	
    	if(judgetime <= Judge.BAD && judgetime > Judge.GOOD){
    		console.log(`BAD: ${judgetime}ms`);
    		flags = false;
    		audio.pause();
    		audio.currentTime = 0;
    	}
    	if(judgetime <= Judge.MISS && judgetime > Judge.BAD){
    		console.log(`MISS: ${judgetime}ms`);
    		flags = false;
    		audio.pause();
    		audio.currentTime = 0;
    	}
    	console.log("UPPUSHED");
    }
    
    if(key_send.down_push){
    	if(judgetime <= Judge.PERFECT && judgetime >= 0){
    		console.log(`DPerfect: ${judgetime}ms`);
    	}
    	
    	if(judgetime <= Judge.GOOD && judgetime > Judge.PERFECT){
    		console.log(`DGOOD: ${judgetime}ms`);
    	}
    	
    	if(judgetime <= Judge.BAD && judgetime > Judge.GOOD){
    		console.log(`DBAD: ${judgetime}ms`);
    	}
    	if(judgetime <= Judge.MISS && judgetime > Judge.BAD){
    		console.log(`DMISS: ${judgetime}ms`);
    	}
    	console.log("DOWNPUSHED");
    }
    
    if(key_send.left_push){
    	if(judgetime <= Judge.PERFECT && judgetime >= 0){
    		console.log(`Perfect: ${judgetime}ms`);
    	}
    	
    	if(judgetime <= Judge.GOOD && judgetime > Judge.PERFECT){
    		console.log(`GOOD: ${judgetime}ms`);
    	}
    	
    	if(judgetime <= Judge.BAD && judgetime > Judge.GOOD){
    		console.log(`BAD: ${judgetime}ms`);
    	}
    	if(judgetime <= Judge.MISS && judgetime > Judge.BAD){
    		console.log(`MISS: ${judgetime}ms`);
    	}
    	console.log("LEFTPUSHED");
    }
         
    if(key_send.right_push){
    	if(judgetime <= Judge.PERFECT && judgetime >= 0){
    		console.log(`Perfect: ${judgetime}ms`);
    	}
    	
    	if(judgetime <= Judge.GOOD && judgetime > Judge.PERFECT){
    		console.log(`GOOD: ${judgetime}ms`);
    	}
    	
    	if(judgetime <= Judge.BAD && judgetime > Judge.GOOD){
    		console.log(`BAD: ${judgetime}ms`);
    	}
    	if(judgetime <= Judge.MISS && judgetime > Judge.BAD){
    		console.log(`MISS: ${judgetime}ms`);
    	}
    	console.log("RIGHTPUSHED");
    } 
};	
const check = new Pushing();
document.addEventListener('keydown',(event)=>{
	switch (event.key){
    	case 'ArrowUp':
    		if(flags){
    			check.up_push = true;
    			param.start = event.timeStamp / 1000;
    			NotesJudge(check,param.start,param.totaltime);
    		}
    		break;
    	case 'ArrowDown': 
    		if(flags){
    			check.down_push = true;
    			param.start = event.timeStamp / 1000;
    			NotesJudge(check,param.start,param.totaltime);
    		}
    		break;
    	case 'ArrowLeft':
    		if(flags){
    			check.left_push = true;
    			param.start = event.timeStamp;
    			NotesJudge(check,param.start,param.totaltime);
    		}
    		break;
    	case 'ArrowRight':
    		if(flags){
    			check.right_push = true;
    			param.start = event.timeStamp;
    			NotesJudge(check,param.start,param.totaltime);
    		}
    		break;
    }
    	console.log(`keydown: ${param.start}ms`);
});


document.addEventListener('keyup', (event) => {
	const check = new Pushing();
    switch (event.key){
    	case 'ArrowUp':
    		check.up_push = false;
    		break;
    	case 'ArrowDown': 
    		param.end = event.timeStamp / 1000;
    		check.down_push = false;
    		break;
    	case 'ArrowLeft':
    		param.end = event.timeStamp / 1000;
    		check.left_push = false;
    		break;
    	case 'ArrowRight':
    		param.end = event.timeStamp / 1000;
    		check.right_push = false;
    		break;
    }
    	console.log(`keyup: ${param.end}ms`);
});

試したこと

・こちらのURLを参考に、drawImageで複数描画することには成功した。
https://stackoverflow.com/questions/54060731/how-can-i-animate-multiple-instances-of-drawimage-on-a-canvas

・こちらのURLを参考にしてシーン作成のイメージを固めたが、自分が作っているものとの対比がうまくいかなかった。
https://sbfl.net/blog/2016/05/18/javascript-danmaku-stg-1/

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

ブラウザ:Chrome 114.0.5735.134
PCのスペック: CPU: i7-12700 2.10 GHz
メモリ: 32GB
Windows11 Home 22H2

Answer 1

秒数に応じて移動速度を一定に保つ部分については自己解決しました。
到達したい座標 / 目標秒数 * deltaTIme / 1000とすることで実装できました。
deltaTimeはrequestAnimationFrameでコールバックした際のDOMHighResTimeStampで取得したものを使っています。

let lasttime = 0;
function loop(timestamp){
		if(!lastTime){lastTime = timestamp;}
		let deltaTime = timestamp - lastTime; 
		lastTime = timestamp;
		ctxs[2].clearRect(0,0,g_width,g_height);
		for(let i = 0; i < n_L.length;i++){
			let deltaY = g_height / n_L[i].time *deltaTime / 1000;
			n_L[i].y -= deltaY;
			if(n_L[i].y  < -n_L[i].height){
				n_L[i].y = g_height;
			}
			//ctxs[2].save();
			//ctxs[2].translate(n_L[i].x+n_L[i].width/4,n_L[i].y+n_L[i].height/4);
			//ctxs[2].rotate(Angle * RadtoDeg);
			//ctxs[2].translate(-(n_L[i].x+n_L[i].width/4),-(n_L[i].y+n_L[i].height/4));
			ctxs[2].drawImage(n_L[i].img,(sprite*110),0,220,220,n_L[i].x,n_L[i].y,n_L[i].width/2,n_L[i].height/2);
			//ctxs[2].restore();
			
		}
		Angle += 30 * deltaTime / 1000;
		requestAnimationFrame(loop);
}
requestAnimationFrame(loop);