3D Breakout

const MERGIN = 20;

const DEPTH = 200;

const BAR_Y = 210;

const BAR_WIDTH = 70;

const BAR_HEIGHT = 15;

const SPEED = 6;

const RADIUS = 9;

const BLOCK_NUM_X = 4;

const BLOCK_NUM_Y = 3;

const BLOCK_NUM_Z = 3;

let BLOCK_WIDTH;

let BLOCK_HEIGHT;

let BLOCK_DEPTH;

​

let ball;

let bar;

let block;

let startFlg;

​

let f;

function preload(){

  f=loadFont("font.ttf");

}

​

function setup() {

  if(window.innerWidth > 400){

    WINDOW_WIDTH = 400

  }else{

    WINDOW_WIDTH = window.innerWidth;

  }

  if(window.innerHeight > 500){

    WINDOW_HEIGHT = 500

  }else{

    WINDOW_HEIGHT = window.innerHeight;

  }

​

  createCanvas(WINDOW_WIDTH, WINDOW_HEIGHT, WEBGL);

  colorMode(HSB, 360, 100, 100);

  angleMode(DEGREES);

  BLOCK_WIDTH = (width - MERGIN * 2) / BLOCK_NUM_X;

  BLOCK_HEIGHT = 50;

  BLOCK_DEPTH = DEPTH / BLOCK_NUM_Z;

  startFlg = 0;

  bar = new Bar();

  ball = new Ball(random(-width / 2 + MERGIN + RADIUS * 2,width / 2 - MERGIN - RADIUS * 2), random(-10, 10), random(- RADIUS * 2, -DEPTH + RADIUS * 2));

  block = new Block();

}

​

function mousePressed() {

  startFlg = true;

}

​

// 壁の描画

function drawWall(){

  fill(0, 0, 80 );

  push();

  translate(-width / 2 + MERGIN, - height / 2 + MERGIN, 0);

  rotateY(90);

  rect(0,0, DEPTH, height - MERGIN * 2);

  pop();

  push();

  translate(width / 2 - MERGIN, - height / 2 + MERGIN, 0);

  rotateY(90);

  rect(0,0, DEPTH, height - MERGIN * 2);

  pop();

  push();

  translate(- width / 2 + MERGIN, - height / 2 + MERGIN, -DEPTH);

  rect(0, 0, width - MERGIN * 2, height - MERGIN * 2);

  pop();

  push();

  translate(- width / 2 + MERGIN, - height / 2 + MERGIN, -DEPTH);

  rotateX(90);

  rect(0, 0, width - MERGIN * 2, DEPTH);

  pop();

}

​

class Bar {

  constructor() {

    this.x = 0;

  }

  // バーの描画

  draw() {

    push();

    // マウスのx座標が左側の壁よりさらに左に行っていた場合、バーを左端の壁に固定

    if(mouseX < BAR_WIDTH / 2 + MERGIN){

      this.x = BAR_WIDTH / 2 + MERGIN - width / 2;

    //  マウスのx座標が右側の壁よりさらに右に行っていた場合、バーを右端の壁に固定

    }else if( mouseX > width - (BAR_WIDTH / 2 + MERGIN)){

      this.x = width / 2 - (BAR_WIDTH / 2 + MERGIN);

    // 上記以外(マウスのx座標が左右の壁の間にある)の場合、バーのx座標をマウスと連動させる

    }else{

      this.x = mouseX - width / 2;

    }

    fill(0, 0, 80 );

    translate(this.x, BAR_Y, -DEPTH/2);

    box(BAR_WIDTH, BAR_HEIGHT, DEPTH);

    pop();

  }

  // ボールの陰の描画

  drawShadow(px, py, pz){

    if(px >= this.x - BAR_WIDTH / 2 &&

    px <= this.x + BAR_WIDTH / 2 &&

    py <= BAR_Y){

      push();

      fill( 50 );

      noStroke();

      translate(0, BAR_Y - BAR_HEIGHT / 2 - 1,pz);

      rotateX(90);

      circle(px,0, RADIUS * 3);

      pop();

    }

  }

}

​

class Ball{

  constructor(x, y, z) {

    this.x = x;

    this.y = y;

    this.z = z;

    let para = [-1, 1];

    this.v = createVector(random(para), -1, random(para));

    this.hitSideFlg = 0;

  }

  // ボールと壁との当たり判定

  hitWall(){

    if(this.x - RADIUS <= - width / 2 + MERGIN ||

    this.x + RADIUS >= width / 2 - MERGIN){

      this.v.x *= -1;

    }

    if(this.y - RADIUS <= - height / 2 + MERGIN){

      this.v.y *= -1;

    }

    if(this.z - RADIUS <= - DEPTH ||

    this.z + RADIUS >= 0){

      this.v.z *= -1;

    } 

  }

  // ボールとバーとの当たり判定

  hitBar(px){

    // バーの上面に当たった場合は、ボールを上に跳ね返す

    if(this.x >= px - BAR_WIDTH / 2 &&

    this.x  <= px + BAR_WIDTH / 2 &&

    this.y + RADIUS >= BAR_Y - BAR_HEIGHT / 2 &&

    this.y + RADIUS <= BAR_Y - BAR_HEIGHT / 2 + SPEED){ // ボールは1フレームあたりSPEEDピクセル進むので、その差分を加味し「+ SPEED」している

      this.v.y *= -1;

    }

    // バーの側面に当たった場合は、ボールを横に跳ね返す

    else if(this.x + RADIUS >= px - BAR_WIDTH / 2 &&

    this.x - RADIUS <= px + BAR_WIDTH / 2 &&

    this.y >= BAR_Y - BAR_HEIGHT / 2 &&

    this.y <= BAR_Y + BAR_HEIGHT / 2 &&

    this.hitSideFlg == 0){

      this.v.x *= -1;

      this.hitSideFlg = 1;  // ボールがバーにめり込むことを防ぐため、側面に接触時の跳ね返りは一回だけ

    }

  }

  // ボールの描画

  draw(){

    this.x = this.x + SPEED * this.v.x;

    this.y = this.y + SPEED * this.v.y;

    this.z = this.z + SPEED * this.v.z;

    push();

    fill(0, 0, 40);

    noStroke();

    translate(this.x, this.y, this.z);

    sphere(RADIUS * 2);

    pop();

  }

​

}

​

class Block{

  constructor(){

    this.blockHitFlg = [];

    for(let i = 0; i < BLOCK_NUM_X; i++){

      this.blockHitFlg[i] = [];

      for(let j = 0; j < BLOCK_NUM_Y; j++){

        this.blockHitFlg[i][j] = [];

        for(let k = 0; k < BLOCK_NUM_Z; k++){

          this.blockHitFlg[i][j][k] = 0;

        }

      }

    }

    this.clearFlg = 1;

  }

  // ブロックの描画

  draw(ball){

    this.clearFlg = 1;

    push();

    for(let i = 0; i < BLOCK_NUM_X; i++){

      for(let j = 0; j < BLOCK_NUM_Y; j++){

        for(let k = 0; k < BLOCK_NUM_Z; k++){

          // ボールとまだ接触していないブロックは、当たり判定及び描画処理を行う

          if(this.blockHitFlg[i][j][k] == 0){

            // ボールがブロックの左面or右面に接触した場合、x軸のベクトルを反転させる

            if(ball.x + RADIUS >= i * BLOCK_WIDTH + MERGIN - width / 2 &&

            ball.x - RADIUS < (i + 1) * BLOCK_WIDTH + MERGIN - width / 2 &&

            ball.y >= j * BLOCK_HEIGHT + MERGIN - height / 2 &&

            ball.y < (j + 1) * BLOCK_HEIGHT + MERGIN - height / 2 &&

            ball.z >= - (k + 1) * BLOCK_DEPTH &&

            ball.z < - k * BLOCK_DEPTH){

              ball.v.x *= -1;

              this.blockHitFlg[i][j][k] = 1;

            // ボールがブロックの上面or下面に接触した場合、y軸のベクトルを反転させる

            } else if(ball.x >= i * BLOCK_WIDTH + MERGIN - width / 2 &&

            ball.x < (i + 1) * BLOCK_WIDTH + MERGIN - width / 2 &&

            ball.y + RADIUS >= j * BLOCK_HEIGHT + MERGIN - height / 2 &&

            ball.y - RADIUS < (j + 1) * BLOCK_HEIGHT + MERGIN - height / 2 &&

            ball.z >= - (k + 1) * BLOCK_DEPTH &&

            ball.z < - k * BLOCK_DEPTH){

              ball.v.y *= -1;

              this.blockHitFlg[i][j][k] = 1;

            // ボールがブロックの前面or後面に接触した場合、z軸のベクトルを反転させる

            } else if(ball.x >= i * BLOCK_WIDTH + MERGIN - width / 2 &&

            ball.x < (i + 1) * BLOCK_WIDTH + MERGIN - width / 2 &&

            ball.y >= j * BLOCK_HEIGHT + MERGIN - height / 2 &&

            ball.y < (j + 1) * BLOCK_HEIGHT + MERGIN - height / 2 &&

            ball.z + RADIUS >= - (k + 1) * BLOCK_DEPTH &&

            ball.z - RADIUS < - k * BLOCK_DEPTH){

              ball.v.z *= -1;

              this.blockHitFlg[i][j][k] = 1;

            }

            this.clearFlg = 0;  // ブロックが一つでも残ってる場合、clearフラグはfalse

            push();

            fill(map(k, 0, BLOCK_NUM_Z - 1, 100, 360), map(j, 0, BLOCK_NUM_Y - 1, 80, 40), 70);

            translate(i * BLOCK_WIDTH + MERGIN + BLOCK_WIDTH / 2 - width / 2,

            j * BLOCK_HEIGHT + MERGIN + BLOCK_HEIGHT / 2 - height / 2,

            - k * BLOCK_DEPTH - BLOCK_DEPTH / 2);

            box(BLOCK_WIDTH, BLOCK_HEIGHT, BLOCK_DEPTH);

            pop();

          }

        }

      }

    }

    pop();

  }

}

function draw() {

  ambientLight(0, 0, 90);

  directionalLight(0, 0, 90, 0, 1, -1);

  background(0);

  drawWall();

  block.draw(ball);

  if(startFlg == 0){

    textFont(f);

    fill(0);

    textSize(32);

    textAlign(CENTER, CENTER);

    text("CLICK TO START",0,0);

    return;// ゲーム開始画面

  }

​

  ball.hitWall();

  ball.hitBar(bar.x);

  ball.draw();

  bar.draw();

  bar.drawShadow(ball.x, ball.y, ball.z);

  if(ball.y > height && block.clearFlg == 0){

    textFont(f);

    fill(0);

    textSize(32);

    textAlign(CENTER, CENTER);

    text("GAME OVER",0,0);

  }

  if(block.clearFlg == 1){

    textFont(f);

    fill(0);

    textSize(32);

    textAlign(CENTER, CENTER);

    text("GAME CLEAR",0,0);

  }

​

}