ブロック崩しメーカー v3.11

mySketch.js
xxxxxxxxxx
 
/* *
 * 初期値
 * ここを変更すれば値を好きにいじれるが
 * 難易度を調整したいだけの場合はゲーム画面右上の設定ボタンを利用すること
 * */
const SETTING_VALUES = {
  numOfImages: 3,               // ★★使用する画像の枚数を必ず指定すること★★
  numOfItemTypes: 6,            // アイテムの種類
  life: 3,                      // 残機
  ballSpeed: 6,                 // ボールの速度
  penetrateModeLimitCount: 3,   // 貫通モードが持続する反射回数
  barWidth: 100,                // 反射バーの幅
  tileResolution: 30,           // ブロックの密度
  itemAppearanceRate: 20,       // ★アイテムのドロップ率 e.g. 20なら1/20の確率でアイテムがドロップする
  isEnableItem: true,
  drawTileBorder: true
}
​
var canvas = null;
var tiles = null;
var isPaused = false;
var life = SETTING_VALUES.life;
var totalTileCount = 0;
var collapsedTileCount = 0;
var isComplete = false;
var isNext = false;
var items = null;
var lifeIndicator = null;
var settingPanelGraphics = null;
var stageCount = 0;
​
​
var wall = {
  collide: function(ball) {
    if (ball.x - ball.r < 0) ball.reflectX();
    if (ball.x + ball.r >= canvas.width) ball.reflectX();
    if (ball.y - ball.r < 0) ball.reflectY();
    if (ball.y - ball.r >= canvas.height) {
      restart();
    }
    if (life <= 0) { //残機が0以下になった場合初期化関数initGame()を呼び出す
      initGame();
    }
  }
};
​
var ball = {
  locked: true,
  x: null,
  y: null,
  r: 4, // ★ボールの半径
  speed: SETTING_VALUES.ballSpeed, // ★ボールの速さ
  penetrateMode: false, // ★貫通モード true: オン, false: オフ
  penetrateModeLimitCount: SETTING_VALUES.penetrateModeLimitCount,
  dx: 1,
  dy: -1,
  move: function() {
    if (this.locked) {
      ball.x = mouseX;
    } else {
      ball.x += this.dx * this.speed;
      ball.y += this.dy * this.speed;
    }
  },
  release: function() {
    ball.locked = false;
  },
  reflectX: function() {
    this.dx *= -1;
    this.decrementCount();
  },
  reflectBar: function(barX, barW) { //バーにボールが当たった時のバーの中心からの距離によって反射角度(dxの値)を変える。 barXの値の範囲は-50から50まで barWはバーの長さの4/10
    this.dx = (barX / barW);
    this.decrementCount();
  },
  reflectY: function() {
    this.dy *= -1;
    this.decrementCount();
  },
  decrementCount: function() {
    if (this.penetrateModeLimitCount > 0) {
      this.penetrateModeLimitCount--;
    } else {
      this.disablePenetrateMode();
    }
  },
  disablePenetrateMode: function() {
    this.penetrateMode = false;
  },
  enablePenetrateMode: function() {
    this.penetrateModeLimitCount = SETTING_VALUES.penetrateModeLimitCount;
    this.penetrateMode = true;
  },
  speedUp: function() {
    if (this.speed < VALID_VALUES.maxBallSpeed) {
      this.speed++;
    }
  },
  speedDown: function() {
    if (this.speed > 1) {
      this.speed--;
    }
  },
  reflectAngle: function(x, y) {
    this.dx *= x;
    this.dy *= y;
  },
  draw: function() {
    noStroke();
    if (this.penetrateMode) { //貫通モードの場合ボールの色と大きさを変更
      this.r = 6;
      fill(010, 010, 250)
    } else {
      this.r = 4;
      fill(250, 010, 010); // ★ボールの色(RGB)
    }
    circle(this.x, this.y, this.r * 2);
  }
};
​
var bar = {
  w: 100, // ★バーの長さ
  h: 10, // ★バーの高さ
  incrementValue: 20,
  x: function() { return mouseX - this.w / 2; },
  y: null,
  collide: function(ball) {
    if (ball.y + ball.r >= this.y &&
      ball.y - ball.r <= this.y &&
      ball.x + ball.r >= this.x() &&
      ball.x - ball.r <= this.x() + this.w) {
      ball.reflectY();
      ball.reflectBar(ball.x - mouseX, (this.w / 10 * 4));  //バーとボールが当たった時のx方向の跳ね返り
    }
  },
  draw: function() {
    noStroke();
    fill(180, 50, 50); // ★バーの色(RGB)
    rect(
      this.x(),
      this.y,
      this.w,
      this.h,
      this.h / 2,
      this.h / 2,
      this.h / 2,
      this.h / 2,
    );
    stroke(10, 10, 250);
    strokeWeight(2);
    line(
      this.x() + (this.w / 2), this.y + 1,
      this.x() + (this.w / 2), this.y + this.h - 1
    );
  },
  extendsBar() {
    if (this.w < VALID_VALUES.maxBarWidth) {
      this.w += this.incrementValue;
    }
  },
  shrinkBar() {
    if (this.w > VALID_VALUES.minBarWidth) {
      this.w -= this.incrementValue;
    }
  }
};
​
var canvasImages = new Array(SETTING_VALUES.numOfImages);
​
function preload() {
  for(let index = 0 ; index < canvasImages.length ; index++) {
    canvasImages[index] = loadImage(`canvas_image_${index}.png`);
  };
}
​
function setup() {
  if (initialValueValidation()) {
    canvas = createCanvas(
      canvasImages[SETTING_VALUES.numOfImages-1].width,
      canvasImages[SETTING_VALUES.numOfImages-1].height
    );
    settingPanelGraphics = createGraphics(canvas.width-20, canvas.height-20);
​
    stageCount = 0;
    setupTiles();
    initGame();
  } else {
    canvasImages = null;
  }
}
​
function setupTiles() {
  var tileSize = Math.floor(canvas.width / SETTING_VALUES.tileResolution);
  tiles = new Array(Math.floor(canvas.width / tileSize));
  items = new Array(Math.floor(canvas.width / tileSize));
  life = SETTING_VALUES.life;
  lifeIndicator = new LifeIndicator(VALID_VALUES.maxLife, life);
  totalTileCount = 0;
  for (var i = 0; i < tiles.length; i++) {
    tiles[i] = new Array(Math.floor((canvas.height - 60) / tileSize));
    items[i] = new Array(Math.floor((canvas.height - 60) / tileSize));
    for (var j = 0; j < tiles[i].length; j++) {
      tiles[i][j] = new Tile(i * tileSize, j * tileSize, tileSize, tileSize);
      tiles[i][j].isBorder = SETTING_VALUES.drawTileBorder;
      if (
        Math.floor(Math.random() * SETTING_VALUES.itemAppearanceRate) < 1 &&
        SETTING_VALUES.isEnableItem
      ) {
        items[i][j] = new Item(tiles[i][j]);
        items[i][j].setItemType(Math.floor(Math.random() * SETTING_VALUES.numOfItemTypes) + 1);
      }
      if (tiles[i][j].opaque == true) { //不透明なタイルをカウントアップして数える
        totalTileCount++;
      }
    }
  }
}
​
function restart() { //残機が残ってる場合呼び出す関数
  life--;
  lifeIndicator.decrement();
  ball.locked = true;
  ball.x = mouseX;
  ball.y = bar.y - 10;
}
​
function initGame() {
  stageCount = 0;
  setupTiles();
  for (var i = 0; i < tiles.length; i++) {
    for (var j = 0; j < tiles[i].length; j++) {
      tiles[i][j].repair();
    }
  }
  ball.locked = true;
  bar.y = canvas.height - 30;
  bar.w = SETTING_VALUES.barWidth;
  ball.x = canvas.width / 2;
  ball.y = bar.y - 10;
  ball.speed = SETTING_VALUES.ballSpeed;
  life = SETTING_VALUES.life;
  lifeIndicator.reset();
  collapsedTileCount = 0;
  isComplete = false;
  settingPanel.openable = true;
  settingPanel.isOpen = false;
}
​
function nextStage() {
  stageCount++;
  setupTiles();
  for (var i = 0; i < tiles.length; i++) {
    for (var j = 0; j < tiles[i].length; j++) {
      tiles[i][j].repair();
    }
  }
  ball.locked = true;
  bar.y = canvas.height - 30;
  ball.x = canvas.width / 2;
  ball.y = bar.y - 10;
  collapsedTileCount = 0;
  isNext = false;
}
​
function end() {
  for (var i = 0; i < tiles.length; i++) {
    for (var j = 0; j < tiles[i].length; j++) {
      tiles[i][j].clear();
    }
  }
  ball.locked = true;
  bar.y = canvas.height - 30;
  ball.x = canvas.width / 2;
  ball.y = bar.y - 10;
}
​
//初期値のバリデーション
const ERROR_MESSAGE = "invalid initial value";
const VALID_VALUES = {
  maxLife: 10,
  maxPenetrateModeLimitCount: 5,
  maxBallSpeed: 10,
  maxBarWidth: 200,
  minBarWidth: 40,
  maxTileResolution: 50,
  minTileResolution: 30,
  maxItemAppearanceRate: 30,
  minItemAppearanceRate: 15
}
function initialValueValidation() {
  let isValid = true;
  isValid &&= (SETTING_VALUES.life > 0 && SETTING_VALUES.life <= VALID_VALUES.maxLife);
  isValid &&= (
    SETTING_VALUES.penetrateModeLimitCount > 0 &&
    SETTING_VALUES.penetrateModeLimitCount <= VALID_VALUES.maxPenetrateModeLimitCount
  );
  isValid &&= (
    SETTING_VALUES.ballSpeed > 0 &&
    SETTING_VALUES.ballSpeed <= VALID_VALUES.maxBallSpeed
  );
  isValid &&= (
    SETTING_VALUES.barWidth > VALID_VALUES.minBarWidth &&
    SETTING_VALUES.barWidth <= VALID_VALUES.maxBarWidth
  );
  isValid &&= (
    SETTING_VALUES.tileResolution >= VALID_VALUES.minTileResolution &&
    SETTING_VALUES.tileResolution <= VALID_VALUES.maxTileResolution
  );
  isValid &&= (
    SETTING_VALUES.itemAppearanceRate >= VALID_VALUES.minItemAppearanceRate &&
    SETTING_VALUES.itemAppearanceRate <= VALID_VALUES.maxItemAppearanceRate
  );
  if (isValid) return true;
  window.alert(ERROR_MESSAGE);
  return false;
}
​
function draw() {
​
  drawBackground();
​
  if (settingPanel.isOpen && settingPanel.openable) {
    settingPanel.drawSettingPanel();
  } else {
    drawOverTile();
    bar.draw();
    ball.draw();
    lifeIndicator.draw();
​
    ball.move();
    wall.collide(ball);
    bar.collide(ball);
​
    for (var j = 0; j < tiles.length; j++) {
      for (var i = 0; i < tiles[j].length; i++) {
        tiles[j][i].update();
      }
    }
    for (var j = 0; j < items.length; j++) {
      for (var i = 0; i < items[j].length; i++) {
        if (items[j][i] != null) {
          items[j][i].draw();
          items[j][i].move();
          items[j][i].update();
          tiles[j][i].item = items[j][i];
        }
      }
    }
    settingPanel.drawSettingButton();
  }
}
​
function drawBackground() {
  background(255);
  background(canvasImages[SETTING_VALUES.numOfImages - 1]);
  for (let i = SETTING_VALUES.numOfImages - 2 ; i > stageCount ; i--) {
    image(canvasImages[i], 0, 0);
  }
}
​
function drawOverTile() {
  if (!isComplete && !isNext) {
    overTileImage = canvasImages[stageCount].get(
      0,
      canvasImages[stageCount].height - 80,
      canvasImages[stageCount].width,
      80
    );
    image(overTileImage, 0, canvasImages[stageCount].height - 80);
  }
}
​
/* *
 * クリック位置が指定した範囲内にあるか判定
 *
 * x: クリック範囲の左上のx座標
 * y: クリック範囲の左上のy座標
 * width: クリック範囲の幅
 * height: クリック範囲の高さ
 *
 * return boolean
 * */
function withIn(x, y, width, height) {
  return (
    mouseX > x &&
    mouseX < x + width &&
    mouseY > y &&
    mouseY < y + height
  );
}
​
function mousePressed() {
  // 設定パネルを開く
  if (settingPanel.openable &&
      withIn(canvas.width - 30, 10, 20, 20)
    ) {
    settingPanel.toggleOpen();
    return;
  }
  if (settingPanel.isOpen) {
    let isUpdated = false;
    isUpdated ||= settingPanel.drawTileBorderToggleButton.onClick();
    isUpdated ||= settingPanel.enableItemToggleButton.onClick();
    isUpdated ||= settingPanel.lifeSpinButton.increment();
    isUpdated ||= settingPanel.lifeSpinButton.decrement();
    isUpdated ||= settingPanel.ballSpeedSpinButton.increment();
    isUpdated ||= settingPanel.ballSpeedSpinButton.decrement();
    isUpdated ||= settingPanel.barWidthSpinButton.increment();
    isUpdated ||= settingPanel.barWidthSpinButton.decrement();
    isUpdated ||= settingPanel.tileResolutionSpinButton.increment();
    isUpdated ||= settingPanel.tileResolutionSpinButton.decrement();
    isUpdated ||= settingPanel.itemAppearanceRateSpinButton.increment();
    isUpdated ||= settingPanel.itemAppearanceRateSpinButton.decrement();
    isUpdated ||= settingPanel.penetrateModeLimitCountSpinButton.increment();
    isUpdated ||= settingPanel.penetrateModeLimitCountSpinButton.decrement();
    if (isUpdated) {
      updateValue();
    }
  } else {
    settingPanel.openable = false; //設定パネルはゲームスタートしたら開けないようにする
    if (isNext) {
      if (window.confirm(`ステージ${stageCount+2}へ進む？`)) {
        nextStage();
      }
      return;
    }
    if (isComplete) { //クリア済み後のクリックなら初期化する
      if (window.confirm("リセット？")) {
        initGame();
      }
      return;
    }
    if (ball.locked) {
      ball.release();
    } else {
      isPaused = !isPaused;
      if (isPaused) {
        noLoop();
      } else {
        loop();
      }
    }
  }
}
​
function updateValue() {
  SETTING_VALUES.drawTileBorder = settingPanel.drawTileBorderToggleButton.isEnabled;
  SETTING_VALUES.isEnableItem = settingPanel.enableItemToggleButton.isEnabled;
  settingPanel.itemAppearanceRateSpinButton.isEnable =
    settingPanel.enableItemToggleButton.isEnabled;
  settingPanel.penetrateModeLimitCountSpinButton.isEnable =
    settingPanel.enableItemToggleButton.isEnabled;
  SETTING_VALUES.life = settingPanel.lifeSpinButton.value;
  SETTING_VALUES.ballSpeed = settingPanel.ballSpeedSpinButton.value;
  SETTING_VALUES.barWidth = settingPanel.barWidthSpinButton.value;
  SETTING_VALUES.tileResolution = settingPanel.tileResolutionSpinButton.value;
  SETTING_VALUES.itemAppearanceRate = settingPanel.itemAppearanceRateSpinButton.value;
  SETTING_VALUES.penetrateModeLimitCount = settingPanel.penetrateModeLimitCountSpinButton.value;
  bar.w = SETTING_VALUES.barWidth;
  ball.speed = SETTING_VALUES.ballSpeed;
  ball.penetrateModeLimitCount = SETTING_VALUES.penetrateModeLimitCount;
  life = SETTING_VALUES.life;
  totalTileCount = 0;
  setupTiles();
}
​
class Tile {
  constructor(x, y, w, h) {
    this.opaque = true;
    this.alive = true;
    this.x = x;
    this.y = y;
    this.w = w;
    this.h = h;
​
    this.leftX = x - w / 2;
    this.rightX = x + w / 2;
    this.bottomY = y + h / 2;
​
    this.isBorder = false;
    this.cropTile = canvasImages[stageCount].get(this.x, this.y, this.w, this.h);
    this.cropTile.loadPixels();
    let pixelCount = this.cropTile.width * this.cropTile.height * 4;
    var sumAlpha = 0;
    for (let i = 0; i < pixelCount; i += 4) {
      sumAlpha += this.cropTile.pixels[i + 3];
    }
    if (sumAlpha < 1000) {
      this.opaque = false;
    }
    this.item = null;
  }
​
  repair() {
    this.alive = true;
  }
​
  clear() { //全タイルのaliveをfalseにしてクリアする
    this.alive = false;
  }
​
  drawBorder() {
    strokeWeight(0.5);
    stroke(250);
    line(
      this.x,
      this.y,
      this.x + this.w,
      this.y
    );
    stroke(225);
    line(
      this.x,
      this.y,
      this.x,
      this.y + this.h
    );
    stroke(75);
    line(
      this.x + this.w,
      this.y,
      this.x + this.w,
      this.y + this.h
    );
    stroke(50);
    line(
      this.x,
      this.y + this.h,
      this.x + this.w,
      this.y + this.h
    );
    strokeWeight(1);
  }
​
  update() {
    if (this.opaque && this.alive) {
      if (ball.y + ball.r >= this.y &&
        ball.y - ball.r <= this.y + this.h &&
        ball.x + ball.r >= this.x &&
        ball.x - ball.r <= this.x + this.w) {
        if (!ball.penetrateMode) { //貫通モードじゃない場合はブロックに当たったときにボールを反射する
          ball.dy *= (ball.y <= this.y || ball.y >= this.y + this.h) ? -1 : 1;
          ball.dx *= (ball.x <= this.x || ball.x >= this.x + this.w) ? -1 : 1;
        }
        this.clear();
        if (this.item != null) {
          this.item.release();
          this.item.enableDraw();
        }
        collapsedTileCount++; //ブロックを消すたびにカウントアップ
      }
​
      image(this.cropTile, this.x, this.y, this.w, this.h);
      if (this.isBorder) {
        this.drawBorder();
      }
      if (collapsedTileCount >= totalTileCount * 0.85) { //ブロックを85%消したらクリア
        if (stageCount + 2 < SETTING_VALUES.numOfImages) {
          isNext = true;
        } else {
          isComplete = true; //クリア判断用変数
        }
        end(); //クリア処理
      }
    }
  }
}
​
//ブロックを消した時にドロップするアイテム
class Item {
  constructor(tile) {
    this.tile = tile;
    this.locked = true;
    this.alive = true;
    this.opaque = false;
    this.x = tile.x;
    this.y = tile.y;
    this.speed = 3; //アイテムの落下スピード
    this.size = 16; //アイテムのサイズ
    /* itemType: int
     *
     * アイテムの種類
     * 0: none
     * 1: スピードアップ
     * 2: スピードダウン
     * 3: 貫通付与
     * 4: バーの長さアップ
     * 5: バーの長さダウン
     * 6: 残機+1
     *
     */
    this.itemType = 0;
  }
  move() {
    if (!this.locked) {
      this.y += 1 * this.speed;
    }
  }
  release() {
    this.locked = false;
  }
  repair() {
    this.alive = true;
  }
  clear() {
    this.alive = false;
  }
  enableDraw() {
    this.opaque = true;
  }
  disableDraw() {
    this.opaque = false;
  }
  setItemType(num) {
    this.itemType = num;
  }
  draw() {
    if (this.opaque) {
      noStroke();
      //アイテムごとの見た目を記述する
      switch (this.itemType) {
        case 1: //オレンジの上向き矢印
          fill(255, 160, 10);
          triangle(
            this.x, this.y,
            this.x - this.size, this.y + this.size,
            this.x + this.size, this.y + this.size
          );
          triangle(
            this.x, this.y - this.size,
            this.x - this.size, this.y,
            this.x + this.size, this.y
          );
          break;
        case 2: //水色の下向き矢印
          fill(10, 160, 230);
          triangle(
            this.x, this.y + this.size,
            this.x - this.size, this.y,
            this.x + this.size, this.y
          );
          triangle(
            this.x, this.y,
            this.x - this.size, this.y - this.size,
            this.x + this.size, this.y - this.size
          );
          break;
        case 3: //青い丸
          fill(10, 10, 250);
          circle(this.x, this.y, this.size * 2);
          break;
        case 4: //オレンジの外向き矢印
          fill(255, 160, 10);
          triangle(
            this.x - this.size, this.y,
            this.x - 2, this.y + this.size,
            this.x - 2, this.y - this.size
          );
          triangle(
            this.x + this.size, this.y,
            this.x + 2, this.y - this.size,
            this.x + 2, this.y + this.size
          );
          break;
        case 5: //水色の内向き矢印
          fill(10, 160, 230);
          triangle(
            this.x - 2, this.y,
            this.x - this.size, this.y + this.size,
            this.x - this.size, this.y - this.size
          );
          triangle(
            this.x + 2, this.y,
            this.x + this.size, this.y - this.size,
            this.x + this.size, this.y + this.size
          );
          break;
        case 6: //赤いハート
          fill(250, 10, 10);
          triangle(
            this.x, this.y + this.size,
            this.x - this.size, this.y,
            this.x + this.size, this.y
          );
          arc(
            this.x - (this.size / 2), this.y,
            this.size, this.size,
            PI, TWO_PI
          );
          arc(
            this.x + (this.size / 2), this.y,
            this.size, this.size,
            PI, TWO_PI
          );
          break;
        default:
          break;
      }
    }
  }
  applyEffect() {
    //アイテムごとの効果を記述する
    switch (this.itemType) {
      case 1:
        ball.speedUp();
        break;
      case 2:
        ball.speedDown();
        break;
      case 3:
        ball.enablePenetrateMode();
        break;
      case 4:
        bar.extendsBar();
        break;
      case 5:
        bar.shrinkBar();
        break;
      case 6:
        if (life < 10) {
          life++;
          lifeIndicator.increment();
        }
        break;
      default:
        break;
    }
  }
  update() {
    if (!this.locked && this.alive) {
      if (this.y + this.size >= bar.y &&
        this.y - this.size <= bar.y &&
        this.x + this.size >= bar.x() &&
        this.x - this.size <= bar.x() + bar.w) {
        this.applyEffect();
        this.clear();
        this.disableDraw();
      }
    }
  }
}
​
//残機表示
class LifeIndicator {
  constructor(maxLife, initLife) {
    this.iconList = new Array(maxLife);
    this.initLife = initLife;
    this.life = initLife;
    this.maxLife = maxLife;
    for (let idx = 0 ; idx < this.iconList.length ; idx++) {
      this.iconList[idx] = new LifeIcon(idx);
      if (idx >= this.life) {
        this.iconList[idx].disableDraw();
      }
      this.iconList[idx].draw();
    }
  }
  increment() {
    if (this.life < this.maxLife) {
      this.iconList[this.life].enableDraw();
      this.iconList[this.life++].draw();
    }
  }
  decrement() {
    if (this.life > 0) {
      this.iconList[--this.life].disableDraw();
      this.iconList[this.life].draw();
    }
  }
  reset() {
    this.life = this.initLife;
    for(let idx = 0 ; idx < this.iconList.length ; idx++) {
      if (idx < this.life) this.iconList[idx].enableDraw();
      else this.iconList[idx].disableDraw();
      this.iconList[idx].draw();
    }
  }
  draw() {
    for(let i = 0 ; i < this.life ; i++) {
      this.iconList[i].draw();
    }
  }
}
​
//残機アイコン
class LifeIcon {
  constructor(lifeX) {
    this.opaque = true;
    this.x = lifeX * 50 + 30;
    this.y = 20;
    this.size = 16; //アイコンのサイズ
  }
  enableDraw() { this.opaque = true; }
  disableDraw() { this.opaque = false; }
  draw() {
    if (this.opaque) {
      noStroke();
      //アイテムの見た目を記述する
      //赤いハート
      fill(250, 10, 10);
      triangle(
        this.x, this.y + this.size,
        this.x - this.size, this.y,
        this.x + this.size, this.y
      );
      arc(
        this.x - (this.size / 2), this.y,
        this.size, this.size,
        PI, TWO_PI
      );
      arc(
        this.x + (this.size / 2), this.y,
        this.size, this.size,
        PI, TWO_PI
      );
    }
  }
}
​
//設定用トグルボタン
class ToggleButton {
  constructor(label, x, y, isEnabled) {
    this.x = x;
    this.y = y;
    this.isEnabled = isEnabled;
    this.width = 40;
    this.height = this.width / 2;
    this.label = new Label(label, this.width + 20, this.y);
  }
  onClick() {
    if (this.withInButtonArea()) {
      this.isEnabled = !this.isEnabled;
      return true;
    }
    return false;
  }
  withInButtonArea() {
    return withIn(this.x + 10, this.y + 10, this.width, this.height);
  }
  draw() {
    if (this.isEnabled) {
      settingPanelGraphics.fill(50, 200, 50);
    } else {
      settingPanelGraphics.fill(150, 150, 150);
    }
    settingPanelGraphics.noStroke();
    settingPanelGraphics.rect(
      this.x,
      this.y,
      this.width,
      this.height,
      this.height / 2,
      this.height / 2,
      this.height / 2,
      this.height / 2
    );
    settingPanelGraphics.fill(250, 250, 250);
    if (this.isEnabled) {
      settingPanelGraphics.circle(
        this.x + this.height + (this.height / 2),
        this.y + (this.height / 2),
        this.height - 2
      );
    } else {
      settingPanelGraphics.circle(
        this.x + (this.height / 2),
        this.y + (this.height / 2),
        this.height - 2
      );
    }
    this.label.isEnable = this.isEnabled;
    this.label.draw();
  }
}
​
//設定用スピンボタン
class SpinButton {
  constructor(label, x, y, initialValue, min, max, step) {
    this.x = x;
    this.y = y;
    this.value = initialValue;
    this.width = 60;
    this.height = this.width / 3;
    this.min = min;
    this.max = max;
    this.step = step;
    this.label = new Label(label, this.width + 20, this.y);
    this.incrementArea = {
      x: this.x + (this.height * 2.5),
      y: this.y,
      width: this.height / 2,
      height: this.height
    };
    this.decrementArea = {
      x: this.x,
      y: this.y,
      width: this.height / 2,
      height: this.height
    };
    this.isEnable = true;
  }
  increment() {
    if (
      this.isEnable &&
      this.withInIncrementArea() &&
      this.value <= this.max - this.step
    ) {
      this.value += this.step;
      return true;
    }
    return false;
  }
  decrement() {
    if (
      this.isEnable &&
      this.withInDecrementArea() &&
      this.value >= this.min + this.step
    ) {
      this.value -= this.step;
      return true;
    }
    return false;
  }
  withInIncrementArea() {
    return withIn(
      this.incrementArea.x + 10,
      this.incrementArea.y + 10,
      this.incrementArea.width,
      this.incrementArea.height
    )
  }
  withInDecrementArea() {
    return withIn(
      this.decrementArea.x + 10,
      this.decrementArea.y + 10,
      this.decrementArea.width,
      this.decrementArea.height
    )
  }
  setFillColor(bool) {
    if (bool) {
      settingPanelGraphics.fill(250);
    } else {
      settingPanelGraphics.fill(150);
    }
  }
  draw() {
    this.setFillColor(this.value > this.min && this.isEnable);
    settingPanelGraphics.triangle(
      this.x, this.y + (this.height / 2),
      this.x + (this.height / 2), this.y,
      this.x + (this.height / 2), this.y + this.height
    );
    this.setFillColor(this.value < this.max && this.isEnable);
    settingPanelGraphics.triangle(
      this.x + (this.height * 3), this.y + (this.height / 2),
      this.x + (this.height * 2.5), this.y,
      this.x + (this.height * 2.5), this.y + this.height
    );
    this.setFillColor(this.isEnable);
    settingPanelGraphics.noStroke();
    settingPanelGraphics.textSize(this.height);
    settingPanelGraphics.textAlign(CENTER, CENTER);
    settingPanelGraphics.text(
      this.value.toString(),
      this.x + (this.height * 1.5),
      this.y + (this.height / 2)
    );
    this.label.isEnable = this.isEnable;
    this.label.draw();
  }
}
​
//設定用ラベル
class Label {
  constructor(text, x, y) {
    this.text = text;
    this.x = x;
    this.y = y + 10;
    this.size = 20;
    this.isEnable = true;
  }
  setFillColor(bool) {
    if (bool) {
      settingPanelGraphics.fill(250);
    } else {
      settingPanelGraphics.fill(150);
    }
  }
  draw() {
    this.setFillColor(this.isEnable);
    settingPanelGraphics.noStroke();
    settingPanelGraphics.textSize(this.size);
    settingPanelGraphics.textAlign(LEFT, CENTER);
    settingPanelGraphics.text(this.text, this.x, this.y);
  }
}
​
//設定用パネル
var settingPanel = {
  isOpen: false,
  openable: true,
  drawTileBorderToggleButton: new ToggleButton("ブロックの輪郭表示", 10, 40, true),
  enableItemToggleButton: new ToggleButton("ドロップアイテム有効", 10, 80, true),
  lifeSpinButton: new SpinButton("残機", 10, 120, 3, 1, 10, 1),
  ballSpeedSpinButton: new SpinButton("ボールスピード", 10, 160, 6, 1, 10, 1),
  barWidthSpinButton: new SpinButton("反射バーの幅", 10, 200, 100, 40, 200, 20),
  tileResolutionSpinButton: new SpinButton("ブロック密度", 10, 240, 30, 30, 50, 10),
  itemAppearanceRateSpinButton:
    new SpinButton("アイテムドロップ率（1/設定値）", 10, 280, 20, 15, 30, 1),
  penetrateModeLimitCountSpinButton:
    new SpinButton("貫通モードの持続する反射回数", 10, 320, 3, 1, 5, 1),
  drawSettingButton: function() {
    if (this.openable) {
      fill(180, 50, 50);
      noStroke();
      circle(canvas.width - 20, 20, 25);
      fill(255);
      stroke(255);
      textSize(20);
      textAlign(CENTER, CENTER);
      text("⛭", canvas.width - 20, 20);
    }
  },
  drawSettingPanel: function() {
    settingPanelGraphics.fill(50);
    settingPanelGraphics.rect(
      0,
      0,
      settingPanelGraphics.width,
      settingPanelGraphics.height
    );
    //タイルの境界線描画オンオフ
    this.drawTileBorderToggleButton.draw();
    //ドロップアイテムオンオフ
    this.enableItemToggleButton.draw();
    //残機数
    this.lifeSpinButton.draw();
    //ボールスピード
    this.ballSpeedSpinButton.draw();
    //反射バーの幅
    this.barWidthSpinButton.draw();
    //タイル密度
    this.tileResolutionSpinButton.draw();
    //アイテムドロップ率
    this.itemAppearanceRateSpinButton.draw();
    //貫通モードの反射回数
    this.penetrateModeLimitCountSpinButton.draw();
​
    settingPanelGraphics.fill(255);
    settingPanelGraphics.stroke(255);
    settingPanelGraphics.textSize(20);
    settingPanelGraphics.textAlign(CENTER, CENTER);
    settingPanelGraphics.text("✖", settingPanelGraphics.width - 10, 10);
​
    image(settingPanelGraphics, 10, 10);
  },
  toggleOpen: function() {
    this.isOpen = !this.isOpen;
  }
}
​