JavaScriptでFNF音ゲー制作

Question

実現したいこと

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

前提

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

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

・試しにクラスノーツで、描画と移動をrequestAnimationFrameで動かそうとしたが、描画されはするが微動だにしない。
コンソールログでposyを確認してみたが、posy = 2で変化がない。

該当のソースコード

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);

	

//判定枠
class notes_lane extends Notes{
	constructor(x,y,VelX,VelY,width,height,time){
		super(x,y,VelX,VelY,width,height,time);
	}
	laneupdate(){
	
	}
	
	lanedisplay(){
	
	}
	lanedraw(){
	    laneupdate();
	    lanedisplay(); 
	}
}
//ノーツの種類(上から通常・半透明・ダメージノーツ・即死ノーツ)
class Notes_Elements{
	constructor(){
		this.normal = 'normal';
		this.invisible = 'invisible';
		this.reverse = 'damage';
		this.death = 'death';
	}
}





//グローバル定数を作れるらしいので、やってみる。
function define(name,value){
	Object.defineProperty(window,name,{
		get: function(){return value;},
		set: function(){throw(name+ "は既に定義済みです！");},
	});
}
define("PERFECT",32);
define("GOOD",70);
define("BAD",110);
define("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();

//判定枠
const move=(key_send)=>{
    if(key_send.up_push){
    	const judgetime = totaltime.progress();
    	
    	
    	if((judgetime <= PERFECT) && (judgetime >= 0)){
    		console.log(`Perfect: ${judgetime}ms`);
    	}
    	
    	if(judgetime <= GOOD && judgetime > PERFECT){
    		console.log(`GOOD: ${judgetime}ms`);
    	}
    	
    	if(judgetime <= BAD && judgetime > GOOD){
    		console.log(`BAD: ${judgetime}ms`);
    	}
    	
    }
    
    if(key_send.down_push){
    	const judgetime = totaltime.progress();
    	
    	
    	if((judgetime <= PERFECT) && (judgetime >= 0)){
    		console.log(`Perfect: ${judgetime}ms`);
    	}
    	
    	if(judgetime <= GOOD && judgetime > PERFECT){
    		console.log(`GOOD: ${judgetime}ms`);
    	}
    	
    	if(judgetime <= BAD && judgetime > GOOD){
    		console.log(`BAD: ${judgetime}ms`);
    	}
    }
    
    if(key_send.left_push){
    	const judgetime = totaltime.progress();
    	
    	
    	if((judgetime <= PERFECT) && (judgetime >= 0)){
    		console.log(`Perfect: ${judgetime}ms`);
    	}
    	
    	if(judgetime <= GOOD && judgetime > PERFECT){
    		console.log(`GOOD: ${judgetime}ms`);
    	}
    	
    	if(judgetime <= BAD && judgetime > GOOD){
    		console.log(`BAD: ${judgetime}ms`);
    	}
    }
         
    if(key_send.right_push){
    	const judgetime = totaltime.progress();
    	
    	
    	if((judgetime <= PERFECT) && (judgetime >= 0)){
    		console.log(`Perfect: ${judgetime}ms`);
    	}
    	
    	if(judgetime <= GOOD && judgetime > PERFECT){
    		console.log(`GOOD: ${judgetime}ms`);
    	}
    	
    	if(judgetime <= BAD && judgetime > GOOD){
    		console.log(`BAD: ${judgetime}ms`);
    	}
    } 
};	

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;
    }
    console.log(`keydown: ${totaltime.s_time}ms`);
    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;
    }
    console.log(`keyup: ${totaltime.s_time}ms`);
});

試したこと

・performance.now()を使い、keydownとkeyupで、キーが押されたタイミングで変数に保存し、その差を計算した。
・ノーツクラスにnotesdrawingとnotesmovingメソッドを追加して、requestAnimationFrameで描画しながら移動するように試みた。

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

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

Answer 1

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

これは1つ前の質問で回答しているので省略。

・試しにクラスノーツで、描画と移動をrequestAnimationFrameで動かそうとしたが、描画されはするが微動だにしない。コンソールログでposyを確認してみたが、posy = 2で変化がない。

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

window.requestAnimationFrame(loop);

loop() が一度しか呼ばれていません。requestAnimationFrame() は繰り返し呼ぶ必要があります。

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

window.requestAnimationFrame(loop);

それから、posy は notesdrawing() で毎回初期化されているので移動しません。this.y などを参照したいのではないでしょうか。

note_sprite はグローバル変数にして、その load イベントが発行されてからゲーム開始にしないと最初の描画でもたつくと思います。

Answer 2

描画については自己解決しましたのでご報告いたします。
しかし、次は当たり判定と音楽の再生時間の取得方法についてがまだわかっていないので、そちらのほうを優先したいと思います

let canvas = document.querySelector(".fnfcanvas")
let ctx = canvas.getContext("2d");
let g_width = canvas.width = 1080;
let g_height = canvas.height = 680;
let posy = 0;
let sprite = 0;
let note_sprite = new Image();


//ノーツそのものの制御(座標・加速度・画像の大きさ・各秒数)
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;
	}

	async notesdrawing(x,y,VelX,VelY,width,height,time){
		//ここに描画処理を書く。
		ctx.clearRect(0,0,width,height);
		ctx.translate(width/2,height/2);
		note_sprite.src = "arrow_down_empty.png";
		ctx.fillRect(-(width/2), -(height/2), width, height);
		note_sprite.addEventListener("load",(event)=>{
			ctx.clearRect(0,0,g_width,g_height);
			ctx.drawImage(note_sprite,(sprite * 220),0,158,157,110,0+posy,158,157); 
		});
		
		if (posy > g_height) {
    			const newStartPos = -((g_height/2) + 120);
    			posy = Math.ceil(newStartPos);
  		} else {
    			posy += 4; //ここの部分は
  		}
	}
	
	async notesmoving(x,y,VelX,VelY,width,height,time){
		//ここにVelYの挙動およびVelXなどの挙動を書く。
		if(this.y + this.height >= g_height ){
			this.VelY = -(this.VelY);
		}
		if((this.y - this.height) <= 0){
			this.VelY = -(this.velY);
		}
		this.y += this.VelY;
		
	}
}

//const notes_LEGENDALY = [];
//const notes_LASO = [];
//const notes_SLASO = [];
const test = new Notes(110,-100,1,4,110,110,34.5);
async function loop(){
	test.notesdrawing();
	test.notesmoving();
	window.requestAnimationFrame(loop);
}
window.requestAnimationFrame(loop);

Answer 3

この回答はGPT-4による自動生成回答です

		check.up_push = true;
		move(check);
		break;
	case 'ArrowDown':
		totaltime.s_time = performance.now();
		check.down_push = true;
		move(check);
		break;
	case 'ArrowLeft':
		totaltime.s_time = performance.now();
		check.left_push = true;
		move(check);
		break;
	case 'ArrowRight':
		totaltime.s_time = performance.now();
		check.right_push = true;
		move(check);
		break;
	case 'Enter':
		const audio = new Audio('sample_music.mp3');
		audio.play();
		break;
	default:
		break;
}

});

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