Chapter 08

気合い避けゲーを作る1(マウス操作)

かじるプログラミング
かじるプログラミング
2022.09.30に更新

気合い避けゲーを作る1(マウス操作)

今回は、これまでの知識を生かして簡単なゲームを作っていきます。
(意外とあっさり作る事ができますよ)

ここからは、次のコードをベースにしてお話を進めていきますね。

let marisaGroup;// グループ
let reimu;// スプライト

function preload(){

	// アニメーション
	loadAni("r_good", "./assets/reimu_good_01.png", 3);
	loadAni("m_good", "./assets/marisa_good_01.png", 3);

	// グループ
	marisaGroup = new Group();
}

function setup(){
	createCanvas(windowWidth, windowHeight);
	angleMode(DEGREES);
	frameRate(32);
	noSmooth();
	noStroke();

	// スプライト(霊夢)
	reimu = new Sprite(width/2, height/2, 45);
	reimu.shapeColor = color("white");
	reimu.ani = "r_good";
	reimu.scale = 2;
}

function draw(){
	background(33);

	// マウス座標に追随する
	reimu.moveTowards(mouse.x, mouse.y, 0.2);

	// 全てのスプライトを調べる
	for(let sprite of allSprites){
		// キャンバスの外に出たら反対側へ移動させる(4方向)
		if(width < sprite.x) sprite.x = 0; // 右から出たら
		if(sprite.x < 0) sprite.x = width; // 左から出たら
		if(height < sprite.y) sprite.y = 0;// 下から出たら
		if(sprite.y < 0) sprite.y = height;// 上から出たら
	}

	// Debug
	allSprites.debug = mouse.pressing();
}

function showScore(){
	fill(255);
	textAlign(CENTER, TOP);
	textSize(40);
	text(marisaGroup.length, width/2, 20);
}

ここから始めます。(まだ何も起こりません)

スコアの表示

魔理沙の数をそのままスコアとして表示します。
テキストを表示する処理が記述してある"showScore関数"を用意し、"draw関数"から実行します。
(1, 2の順で追いかけてみてください)

// 省略

function draw(){
	background(33);

	showScore();// 1, スコア表示

	// マウス座標に追随する
	reimu.moveTowards(mouse.x, mouse.y, 0.2);

	// 省略
}

// 2, スコアを表示する関数
function showScore(){
	fill(255);
	textAlign(CENTER, TOP);
	textSize(40);
	text(marisaGroup.length, width/2, 20);
}

思わせぶりな数字が。。。

定期実行で魔理沙を生成

魔理沙を生成する"createMarisa関数"を用意し、
"setup関数"に定期実行をさせる処理を実装します。
(1, 2の順で追いかけてみてください)

// 省略

function setup(){
	createCanvas(windowWidth, windowHeight);
	angleMode(DEGREES);
	frameRate(32);
	noSmooth();
	noStroke();

	// スプライト(霊夢)
	reimu = new Sprite(width/2, height/2, 45);
	reimu.shapeColor = color("white");
	reimu.ani = "r_good";
	reimu.scale = 2;

	// 1, 定期実行
	setInterval(createMarisa, 1000);
}

// 省略

// 2, 魔理沙を生成する関数
function createMarisa(){
	let marisa = new marisaGroup.Sprite(0, 0, 45);
	marisa.shapeColor = color("white");
	marisa.ani = "m_good";
	marisa.scale = 2;
	marisa.speed = random(2, 4);// 速度はランダム
	marisa.direction = random(360);// 角度もランダム
}

魔理沙が1000ミリ秒(1秒)間隔で生成されています。

魔理沙との衝突判定

最後に、"collide関数"を使って衝突判定を行います。
衝突したらゲームオーバーです。(今回の完成コードです)

let marisaGroup;// グループ
let reimu;// スプライト

function preload(){

	// アニメーション
	loadAni("r_good", "./assets/reimu_good_01.png", 3);
	loadAni("m_good", "./assets/marisa_good_01.png", 3);

	// グループ
	marisaGroup = new Group();
}

function setup(){
	createCanvas(windowWidth, windowHeight);
	angleMode(DEGREES);
	frameRate(32);
	noSmooth();
	noStroke();

	// スプライト(霊夢)
	reimu = new Sprite(width/2, height/2, 45);
	reimu.shapeColor = color("white");
	reimu.ani = "r_good";
	reimu.scale = 2;

	// 定期実行
	setInterval(createMarisa, 1000);

	// 1, スプライト同士の衝突
	marisaGroup.collide(reimu, (a, b)=>{
		noLoop();// 2, ゲームを停止
	});
}

function draw(){
	background(33);

	showScore();// スコア表示

	// マウス座標に追随する
	reimu.moveTowards(mouse.x, mouse.y, 0.2);

	// 全てのスプライトを調べる
	for(let sprite of allSprites){
		// キャンバスの外に出たら反対側へ移動させる(4方向)
		if(width < sprite.x) sprite.x = 0; // 右から出たら
		if(sprite.x < 0) sprite.x = width; // 左から出たら
		if(height < sprite.y) sprite.y = 0;// 下から出たら
		if(sprite.y < 0) sprite.y = height;// 上から出たら
	}

	// Debug
	allSprites.debug = mouse.pressing();
}

function showScore(){
	fill(255);
	textAlign(CENTER, TOP);
	textSize(40);
	text(marisaGroup.length, width/2, 20);
}

function createMarisa(){
	let marisa = new marisaGroup.Sprite(0, 0, 45);
	marisa.shapeColor = color("white");
	marisa.ani = "m_good";
	marisa.scale = 2;
	marisa.speed = random(2, 4);
	marisa.direction = random(360);
}

気合い避けゲームの完成です。(やりました!!)

今回のサンプルコードは、気合い避けゲー(マウス)から確認する事が出来ますので、よろしければご覧くださいませ。

次回はキーボード操作についてのお話です。