気合い避けゲーを作る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);
}
気合い避けゲームの完成です。(やりました!!)
今回のサンプルコードは、気合い避けゲー(マウス)から確認する事が出来ますので、よろしければご覧くださいませ。
次回はキーボード操作についてのお話です。