雑記

06-03 キーボード操作

Posted on by minto818 / 0件のコメント

練習問題6-3-2

例題6-3-1 を改造し、上下の矢印キー でも円が動くようにしなさい。左右の動きはそのまま残してください。

let x = 200;
let y = 200;
let speed = 3;

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

function draw() {
  background(234, 244, 255);

  if (keyIsDown(LEFT_ARROW))  x -= speed;
  if (keyIsDown(RIGHT_ARROW)) x += speed;
  if (keyIsDown(UP_ARROW)) y -=speed

  fill(180, 220, 255);
  noStroke();
  circle(x, y, 40);
}
少しややこしいので、気を付けないとすぐに間違えてしまいそうです。

練習問題6-3-3

練習問題6-3-2 のプログラムを改造し、円が 画面の外にはみ出さない ようにしなさい。

let x = 200;
let y = 200;
let speed = 3;
let r = 20

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

function draw() {
  background(234, 244, 255);

  if (keyIsDown(LEFT_ARROW))  x -= speed;
  if (keyIsDown(RIGHT_ARROW)) x += speed;
  if (keyIsDown(UP_ARROW)) y -=speed
  if (keyIsDown(DOWN_ARROW))y +=speed
  
  fill(180, 220, 255);
  noStroke();
  if(x>=width-r){
    x-=speed
  }else if(x<=0+r){
    x+=speed
  }else if(y>=height-r){
    y-=speed
  }else if(y<=0+r){
    y+=speed
  }
  circle(x, y, r*2);
}
めちゃくちゃ大変でした。最初はｘやｙなどにspeedを足したり引いたりしようとして、＋だけつけていたところ、動かなかったので＋＝にすると動きました。ですが理由がわからなかったためAIに聞きました。どうやら＋はその場で数字同士を足し合わせるもので、＋＝は変数にその数字を足すものらしいです。もしかしたら前の説明などであったかもしれませんが、忘れていたので、今回思い出せて結果オーライですね。

練習問題6-3-5

例題6-3-4 を改造し、Enter キー を押すたびに文字サイズが大きくなるようにしなさい。

  • 矢印キーや Enter などは key だけでは判定しづらいので、keyCode を使い、keyCode === ENTER のように判定します。
  • size という変数で文字サイズを覚えておき、Enter が押されたら size を8ずつ増やしなさい。
let size = 24;

function setup() {
  createCanvas(400, 400);
  textSize(size);
  textAlign(CENTER, CENTER);
  background(234, 244, 255);
}

function draw() {
}

function keyPressed() {
  fill(0, 0, 80);
  if(keyCode === ENTER){
    size += 8
  }
  textSize(size);
  let x = random(0, width);
  let y = random(0, height);
  text(key, x, y);
}
ENTERが表示されてもいいのかは分かりませんでしたが、指定されていなかったのでいいかなと思い、そのままにしました。

練習問題6-3-6

練習問題6-3-5 を改造し、Enter キーではなく 確率 で文字サイズが決まるようにしなさい。

let size = 24;

function setup() {
  createCanvas(400, 400);
  textSize(size);
  textAlign(CENTER, CENTER);
  background(234, 244, 255);
}

function draw() {
}

function keyPressed() {
  fill(0, 0, 80);
  let probability =random(0, 100)
  if(probability < 5){
    size=96
  }else if(probability < 15){
    size=64
  }else if(probability < 35){
    size=40
  }else if(probability < 65){
    size=32
  }else{
    size=24
  }
  textSize(size);
  let x = random(0, width);
  let y = random(0, height);
  text(key, x, y);
}
久しぶりに確立を作りましたが、多分あっているのですが、本当にこれで指示通りの確率なのかが心配になります。

コメントする