様々な p5.js 関数の使い方をおさらいしながら作例コードを書くことで、自身の知識の定着を図っています。
今回は focused 変数の解説とサンプルコードを書いて、その使い方を学びます。誤りや、勘違いがあるかもしれません。何かあれば、ご指摘をいただけると嬉しいです。
p5.js は、バージョン 1.6.0 を使用しています。
focused 変数の説明と使い方
focused | p5.js 公式リファレンス
説明
スケッチがマウスやキーボードの入力を受け付ける状態かどうか、つまり、ウィンドウがフォーカスされているかどうかを確認する変数です。
フォーカスされていれば true、されていなければ false を返します。
書き方
focused
パラメータ
関数ではなく変数なのでパラメータはありません。
返り値
関数ではないので返り値はありません。変数として true/false の値を持ちます。
true：ウィンドウがフォーカスされている
false：ウィンドウがフォーカスされていない
p5.js 公式リファレンスのコード例の補足
function draw() {
background(200);
noStroke();
fill(0, 200, 0);
ellipse(25, 25, 50, 50);
if (!focused) {
// or "if (focused === false)"
stroke(200, 0, 0);
line(0, 0, 100, 100);
line(100, 0, 0, 100);
}
}
focused が false の場合にバツ印の 2本の線を描画しています。
コメントは、フォーカスされていないことを判定するにはこういう書き方もあるよ、という例です。
focused を使った作例
focused を使ったゲームの作例を作りました。
ランダムに弾丸が打ち込まれる中でいつまで耐えられるかを競うものです。
開始するとカウントダウンが始まります。その間にウィンドウからフォーカスを外してください。打ち込まれる弾丸に耐え切れなくなったらウィンドウにフォーカスを当ててください。耐えた弾の数が点数になります。
打ち込まれる弾丸が自分に当たればゲームオーバー、点数はもらえません。
ゲームオーバーになれば自分の無謀さを責め、生き残れば「もっといけたんじゃないか」と後悔が残る、そんな爽快さのカケラもないゲームです。
/**
* p5.js focused 変数の作例
* いつまでフォーカスを外していられるか我慢ゲーム
*
* @author @deconbatch
* @version 0.1
* @license CC0
* p5.js 1.6.0
* created 2023.05.05
*/
const frmRate = 2;
const waitSec = 3;
let bulletDia;
let score;
function setup() {
createCanvas(480, 320);
frameRate(frmRate);
textSize(30);
textAlign(CENTER, CENTER);
bulletDia = 10; // diameter of the bullet
score = 0;
}
function draw() {
translate(width * 0.5, height * 0.5);
noStroke();
if (frameCount < waitSec * frmRate) {
countDown();
} else {
playTheGame();
}
}
function countDown() {
const counter = waitSec - floor(frameCount / frmRate);
background(240);
fill(0);
text(counter, 0, 0);
}
function playTheGame() {
if (focused) {
// cowardly custard!
background(32, 128, 240);
fill(0);
text("You've got " + score + " points!", 0, 0);
noLoop();
} else {
const x = random(-0.5, 0.5) * width;
const y = random(-0.5, 0.5) * height;
bulletDia += 10;
score++
if (dist(x, y, 0, 0) > bulletDia * 0.5) {
// bite the bullet
background(0);
fill(240);
circle(x, y, bulletDia);
text("😳", 0, 0);
} else {
// game over
background(240, 16, 32);
fill(240);
circle(x, y, bulletDia);
fill(0);
text("💀", 0, 0);
text("You've shot!", 0, 0);
noLoop();
}
}
}
