学習日
2025年9月9日
名前
樋口桜大
マウスがクリックされたとかドラッグされたときのイベント処理を記述することができます。
マウスイベントを処理する関数として以下のものがあり、これらの関数内でグローバル変数のmouseXとmouseYを使ってマウス位置を取得することができます。
自分で作った図形（コードと画像）
✅ 練習問題 4-9-1
２つのコインをそれぞれ、マウスを押すたびに反転させよう。
img-1 ←ここから画像をダウンロード
コード
let front, back;
let flag = false;
let flog = false;
let x = 100, y = 100;
function preload() {
front = loadImage('img/front.png');
back = loadImage('img/back.png');
}
function setup() {
createCanvas(400, 400);
}
function draw() {
background(255);
if (flag)
image(front, 0, 0, 150, 150);
else
image(back, 0, 0, 150, 150);
if (flog)
image(back, 200, 0, 150, 150);
else
image(front, 200, 0, 150, 150);
}
function mousePressed() {
if (0 < mouseX && mouseX < 150 && 0 < mouseY && mouseY < 150)
flag = !flag;
if (200 < mouseX && mouseX < 350 && 0 < mouseY && mouseY < 150)
flog = !flog;
}📷 実行結果
✅ 練習問題 4-9-2
カードを「裏→表→裏→表…」と、交互に表示させるプログラムを作ります。
ただし、「表」を表示させるときには、2種類のカードがあり、そのどちらかがランダムに表示されるようにしよう。 表が出ているときにマウスを押すと、必ず裏になるようにしましょう。
img-3 ←ここから画像をダウンロード
コード
let back, front1, front2;
let flag = false;
front1 = 1;
front2 = 2;
let x = 100, y = 100;
function preload() {
back = loadImage('img/cardBack.jpg');
front1 = loadImage('img/cardFront1.jpg');
front2 = loadImage('img/cardFront2.jpg');
}
function setup() {
createCanvas(400, 400);
background(255);
image(back, 0, 0, 200, 280);
}
function draw() {
}
function mousePressed() {
if (0 < mouseX && mouseX < 200 && 0 < mouseY && mouseY < 280)
if (!flag)
image(back, 0, 0, 200, 280);
else {
z = int(random(1, 3));
if (z == 1)
image(front1, 0, 0, 200, 280);
else
image(front2, 0, 0, 200, 280);
}
flag = !flag;
}📷 実行結果
まとめ・感想
・マウスをクリックしたときなどのイベントを行ったときに変化する部分をより明確にして命令するところが大切だと思った。
・４−９−２の問題では、表を出すときに二種類からランダムで画像を出すときに、小数点より下の数が出ないように命令をするようにしていきたいと思った。
・flag = !flagによる変数の変化をいつどこで使えばいいのかをしっかりと考えるようにしていきたい。