04-09 マウスイベント

1 例題 4-9-1
- 1.1 コード
2 例題4-9-2
3 練習問題4-9-1
4 練習問題4-9-2
5 ✅ ポイント

マウスがクリックされたとかドラッグされたときのイベント処理を記述できる。

マウスイベントを処理する関数として以下がある。これらの関数内でグローバル変数のmouseXとmouseYを使ってマウス位置を取得することができる。

マウスイベント	機能
mouseClicked	マウスボタンがクリックされたとき
mousePressed	マウスボタンが押されたとき
mouseReleased	マウスボタンが離されたとき
mouseMoved	マウスが移動したとき
mouseDragged	マウスがドラッグされているとき
mouseWheel	マウスのホイールが動かされたとき

例題 4-9-1

マウスドラッグでイメージを移動する。

img-1 ←クリックしてダウンロード

コード

let coin;
let x = 100, y = 100;
function preload() {
    coin = loadImage('img/front.png');
}

function setup() {
  createCanvas(400, 400);
}

function draw() {
  background(255);
  image(coin, x, y,100,100);
}

function mouseDragged() {
  x = mouseX-50;
  y = mouseY-50;  
}

例題4-9-2

コインを押すたびに表裏交互に表示する。

let front, back;
let flag = 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, 400, 400);
  else
    image(back, 0, 0, 400, 400);
}

function mousePressed() {
  if (0 < mouseX && mouseX < 400 && 0 < mouseY && mouseY < 400)
    flag = !flag;
}

練習問題4-9-1

２つのコインをそれぞれ、マウスを押すたびに反転しなさい。

練習問題4-9-2

カードを「裏→表→裏→表…」と、交互に表示させるプログラムを作りましょう。
ただし、「表」を表示させるときには、2種類のカードがあり、そのどちらかがランダムに表示されるようにします。

img-3 ←クリックしてダウンロード

✅ ポイント

イベント関数	タイミング
`mousePressed()`	マウスボタンが押された瞬間
`mouseDragged()`	マウスが押されたまま移動している間
`mouseX / mouseY`	現在のマウスの位置を取得する変数

flag = !flag で真偽値を切り替えられる（トグル処理）
random() を使うと、ランダムな数値で画像を選ぶことができる
画像の当たり判定は if (mouseX < x2 && mouseX > x1) のように範囲で指定