sketch.js

let maruX = 300;
let maruY = 300;
let speedX = 1;
let speedY = 1;

let tensuu = 0; //点数（図形をクリックで増える）

let shikakuX = 300;
let shikakuY = 300;
let speedA = 6;
let speedB = 6;

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

function draw() {
  background(0, 0, 0);

  noStroke();
  fill(0, 0, 255);
  circle(maruX, maruY, 50);

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

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

  // 円の移動
  maruX = maruX + speedX;
  maruY = maruY + speedY;
  shikakuX = shikakuX + speedA;
  shikakuY = shikakuY + speedB;
  //円の跳ね返り
  if (maruX < 0 || maruX > width) {
    speedX = speedX * -1;
  }
  if (maruY < 0 || maruY > height) {
    speedY = speedY * -1;
  }

  if (shikakuX < 0 || shikakuX > width) {
    speedA = speedA * -1;
  }
  if (shikakuY < 0 || shikakuY > height) {
    speedB = speedB * -1;
  }

  // background(0, 0, 0); //背景色を指定して1回だけ塗る。
}

function mousePressed() {
  let kyori = dist(maruX, maruY, mouseX, mouseY);
  if (kyori < 25) {
    tensuu = tensuu + 5;
    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, width);
    shikakuY = random(0, height);
  }
  //マウスのボタンが押し下げられた時の処理
}

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

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