sketch.js

let maruX = 300;
let maruY = 300;
let speedX = 1;
let speedY = 1;
let tensuu = 0; //図形をクリックで増える
let Mode = 1;
let maruColor;

let shikakuX = 300;
let shikakuY = 300;

function setup() {
  createCanvas(600, 600); //ウィンドウサイズの指定
  background(0, 0, 0); //背景色を指定して1回だけ塗る。
  speedX = random(-10, 10);
  speedY = random(-10, 10);
  shikakuX = random(0, 600);
  shikakuY = random(0, 600);
  maruColor = color(255, 255, 255);
}

function draw() {
  background(255, 130, 0); //背景色を指定して1回だけ塗る。

  noStroke();
  fill(255, 0, 0);
  rect(shikakuX, shikakuY, 100, 100);

  noStroke();
  fill(maruColor);
  circle(maruX, maruY, 100);

  //円の移動
  maruX = maruX + speedX;
  maruY = maruY + speedY;

  //点数を直線としてかく
  noFill();
  stroke(0, 255, 0);
  line(0, 500, tensuu * 10, 500);

  //円の跳ね返り
  if (maruX < 0 || maruX > width) {
    speedX = speedX * -1;
  }
  if (maruY < 0 || maruY > height) {
    speedY = speedY * -1;
  }
}

function mousePressed() {
  //マウスのボタンが押し下げられた時の処理
  maruColor = color(random(255), random(255), random(255));
  let kyori = dist(maruX, maruY, mouseX, mouseY);
  if (kyori < 50) {
    tensuu = tensuu + 1; //点数を1増やす
    speedX = random(-10, 10);
    speedY = random(-10, 10);
  }
  //四角形をクリックしたら、点数を１増やす
  if (
    shikakuX < mouseX &&
    mouseX < shikakuX + 100 &&
    shikakuY < mouseY &&
    mouseY < shikakuY + 100
  ) {
    tensuu = tensuu + 1;
    shikakuX = random(0, 600);
    shikakuY = random(0, 600);
  }
}

function mouseReleased() {
  //マウスのボタンが離された時の処理
}

function keyPressed() {
  if (key == "s") {
    saveCanvas();
  }
}