JavascriptでFNF音ゲー制作をする

Question

実現したいこと

• 音楽の再生時間に応じて、キーボードが押された時点の判定枠を実装したい
• 音声ファイルが読み込まれた時点で再生したいが、ユーザーアクションがないと再生できない問題を解決したい
• 画像読み込み時の設計案が思い浮かばない

前提

JavaScriptでFNFの音ゲーを実装したいです。
画像描画とメモリ管理は後回しで、今現在時点では、「音声ファイルの読み込み・判定秒数の計算方法・画像読み込みの方法と描画」がわかればよしとします。

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

・keydown時のミリ秒が5桁のミリ秒(53467.93791など)になっているのに、クラスでPERFECT～BADの範囲から外れているにも関わらずなぜかPERFECTのみしか出力しないです。

・今はEnterキーを押したら音楽が再生されるようにしていますが、再びEnterキーを押すと二重三重にも再生されてしまうため
その対策をしたいです。

・画像読み込みはcanvasで描画しようと思っています。背景→判定枠は初期段階で読み込むというのはわかります。
問題なのは、いざ曲が開始した際に上から降ってくるノーツの秒数と個数をどうやって管理しつつ描画し続けるのかがよくわかっておりません。

該当のソースコード

class Notes{
	constructor(x,y,VelX,VelY,width,height,time){
		this.x = x;
		this.y = y;
		this.VelX = VelX;
		this.VelY = VelY;
		this.width = width;
		this.height = height;
		this.time = time;
	}
	notesdisplay(){
		
	}
}
class notes_key extends Notes{
	constructor(x,y,VelX,VelY,width,height,time){
		super(x,y,VelX,VelY,width,height,time);
	}
	display(){
	     
	}
}
/*ノーツと判定枠は座標・加速度・画像サイズ・到達時間の値を受け取る。*/

//下記はFNFの
class Notes_Elements{
	constructor(){
		this.normal = 'normal';
		this.invisible = 'invisible';
		this.reverse = 'reverse';
		this.death = 'death';
	}
}

class Notes_Display extends Notes_Elements{
	constructor(normal,invisible,reverse,death){
		super(normal,invisible,reverse,death);
	}
}

class Notes_Judge{
	constructor(){
		this.Perfect=32;
		this.GOOD=70;
		this.BAD=110;
		this.MISS=150;
	}
	//単位はミリ秒に統一
}
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);
	}
}

class passed_time{
	constructor(s_time,e_time){
		this.s_time = s_time;
		this.e_time = e_time;
	}
	progress(){
		if(this.e_time < this.s_time){
			return (this.s_time - this.e_time);
		} else {
			return (this.e_time - this.s_time);
		}
		
	}
}
let totaltime = new passed_time(); 

function move(key_send){
    if(key_send.up_push){
    	const judgetime = totaltime.progress(); //経過時間を計算
    	const judgeup = new Notes_Judge();
    	
    	switch(true){
    		case judgetime <= judgeup.Perfect:
    		case judgetime >=0:
    			console.log("Perfect: " + judgetime + "ms");
    		break;
    		
    		case judgetime <= judgeup.GOOD:
    		case judgetime > judgeup.Perfect:
    			console.log("GOOD: "+ judgetime + "ms");
    		break;
    		
    		case judgetime <= judgeup.BAD:
    		case judgetime > judgeup.GOOD:
    			console.log("BAD: " + judgetime + "ms");
    		break;
    		
    		
    	}
    }
    
    if(key_send.down_push){
    	const judgetime = totaltime.progress();
    	const judgeup = new Notes_Judge();
    	
    	switch(true){
    		case judgetime <= judgeup.Perfect:
    		case judgetime >= judgeup.GOOD:
    			console.log("Perfect: " + judgetime + "ms");
    		break;
    		
    		case judgetime <= judgeup.BAD:
    		case judgetime >= judgeup.GOOD:
    			console.log("GOOD: "+ judgetime + "ms");
    		break;
    		
    		case judgetime <= judgeup.MISS:
    		case judgetime >= judgeup.BAD:
    			console.log("BAD: " + judgetime + "ms");
    		break;
    		
    		
    	}
    }
    
    if(key_send.left_push){
    	const judgetime = Math.abs(totaltime.progress());
    	const judgeup = new Notes_Judge();
    }
         
    if(key_send.right_push){
    	const judgetime = Math.abs(totaltime.progress());
    	const judgeup = new Notes_Judge();
    } 
}	

document.addEventListener('keydown',(event)=>{
	const check = new Pushing();
	switch (event.key){
    	case 'ArrowUp':
    		totaltime.s_time = performance.now();
    		check.up_push = true;
    		break;
    	case 'ArrowDown': 
    		totaltime.s_time = performance.now();
    		check.down_push = true;
    		break;
    	case 'ArrowLeft':
    		totaltime.s_time = performance.now();
    		check.left_push = true;
    		break;
    	case 'ArrowRight':
    		totaltime.s_time = performance.now();
    		check.right_push = true;
    		break;
    }
    
    move(check);
});


document.addEventListener('keyup', (event) => {
	const check = new Pushing();
    switch (event.key){
    	case 'ArrowUp':
    		totaltime.e_time = performance.now();
    		check.up_push = false;
    		break;
    	case 'ArrowDown': 
    		totaltime.e_time = performance.now();
    		check.down_push = false;
    		break;
    	case 'ArrowLeft':
    		totaltime.e_time = performance.now();
    		check.left_push = false;
    		break;
    	case 'ArrowRight':
    		totaltime.e_time = performance.now();
    		check.right_push = false;
    		break;
    }
});

const start = document.addEventListener('keypress',(event)=>{
	if(event.key === 'Enter'){
		const music = new Audio('test.mp3');
		music.load();
		music.pause();
		//const time = music.src;
		//console.log(time);
		music.volume = 0.05;
		music.autoplay = true;
	} 
});

<html>
<head>
<title>FNFもどき</title>
<script src="fnf.js" defer></script>
<script src="include_music.js" defer></script>
</head>
<body>
</body>

</html>

試したこと

・performance.now()を使い、keydownとkeyupで、キーが押されたタイミングで変数に保存し、その差を計算した。
・Event.timeStampでも同様に試したが、結果は同じだった。
・警視庁のポリズム内のソースコードを参考にしてみたが、クラスの定義についてはおおよそ分かった。しかし、肝心の画像描画の処理とノーツの管理などがどのようになっているのかわからなかった。
https://www.keishicho.metro.tokyo.lg.jp/play/rhythm/

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

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

Answer 1

クラスでPERFECT～BADの範囲から外れているにも関わらずなぜかPERFECTのみしか出力しないです。

    	switch(true){
    		case judgetime <= judgeup.Perfect:
    		case judgetime >=0:
    			console.log("Perfect: " + judgetime + "ms");

このコードの挙動を日本語で書くと「judgetimeがjudgeup.Perfect以下、または judgetime が0以上なら Perfect: ... と表示」です。

switch をこのような使い方をするのはやめましょう。読みにくくて仕方がないです。
素直に、if を羅列したほうが遥かに読みやすいです。

if (judgetime <= judgeup.Perfect && judgetime >= 0) {
  console.log(`Perfect: ${judgetime}ms`);
} else if (....

---

・今はEnterキーを押したら音楽が再生されるようにしていますが、再びEnterキーを押すと二重三重にも再生されてしまう

変数 music をグローバル変数にして、Enter が押されたときに変数 music に値が何か入っていたら何もしないようにコードを書きましょう。
「メディアおよびウェブ音声 API の自動再生ガイド」にも目を通しましょう。

---

上から降ってくるノーツの秒数と個数をどうやって管理しつつ描画し続けるのかがよくわかっておりません。

音ゲーということは、おそらくどのタイミングどのキーを押すべきかは曲によって決まっているのですよね。まずはそのデータをJavaScriptでどのように表現するかを考えましょう。
それができたら、その指定タイミングで画面に何かを表示するだけのコードを書いてみましょう。
それができたら、その表示したものを一定時間後に消すにはどうしたらいいかを考えましょう。
それができたら、その指定タイミングの一定時間前に表示するように変えてみましょう。

Comments

[falcon_function]

ありがとうございます。少し進展しましたので、お伝えいたします。
以下のようにノーツクラスに描画と動くメソッドを追加して、loop関数で移動させるようにしました
しかし、描画はされるものの一切動きません。(本来は下に移動するようにしたいです。)
```JavaScript(fnf.js)
let canvas = document.querySelector(".fnfcanvas");
let ctx = canvas.getContext("2d");
let width = canvas.width = 1080;
let height = canvas.height = 640;

//ノーツそのものの制御(座標・加速度・画像の大きさ・各秒数)
class Notes{
constructor(x,y,VelX,VelY,width,height,time){
this.x = x;
this.y = y;
this.VelX = VelX;
this.VelY = VelY;
this.width = width;
this.height = height;
this.time = time;
}
notesmoving(){
//ここにVelYの挙動およびVelXなどの挙動を書く。
if(this.y + this.height >= height ){
this.VelY = -(this.VelY);
}
if((this.y - this.height) <= 0){
this.VelY = -(this.velY);
}
this.y += this.VelY;

}
notesdrawing(){
//ここに描画処理を書く。
ctx.fillRect(0,0,width,height);
ctx.translate(width/2,height/2);
const note_sprite = new Image();
note_sprite.src = "arrow_down_empty.png";

let sprite = 0;
let posy = 0;

note_sprite.addEventListener("load",(event)=>{
ctx.drawImage(note_sprite,(sprite * 158),0,158,157,0,0+posy,74,73.5);
});
ctx.fillRect(-(width/2), -(height/2), width, height);
if (posy > height/2) {
let newStartPos = -((height/2) + 157);
posX = Math.ceil(newStartPos);
console.log(posy);
} else {
posy += 2;
}
}
}
const notes_LEGENDALY = [];
const notes_LASO = [];
const notes_SLASO = [];

function loop(){
const test = new Notes(0,0,1,1,158,157,34.5);
test.notesdrawing();
test.notesmoving();
}

window.requestAnimationFrame(loop);
```

[int32_t]

この質問の初期の状況からはだいぶ進展しているので、この質問は閉じて新たな質問を立ててください。

[falcon_function]

承知しました、ありがとうございます