通过编写俄罗斯方块游戏学习ES6第3节预览砖块

项目演示

项目演示地址：

体验一下

项目源码：

项目源码

代码结构

pieces.js

const oPiece = {
  color: "#32c1ff",
  coords: [[0, 4],[0, 5],[1, 4],[1, 5]],
  type: "staticPiece",
  center: [1, 5],
  draw: ctx => {
    ctx.beginPath();
    ctx.lineWidth="2";
    ctx.strokeStyle="black";
    ctx.fillStyle = "#32c1ff";
    ctx.fillRect(30, 30, 20, 20);
    ctx.fillRect(30, 50, 20, 20);
    ctx.fillRect(50, 30, 20, 20);
    ctx.fillRect(50, 50, 20, 20);
    ctx.rect(30, 30, 20, 20);
    ctx.rect(30, 50, 20, 20);
    ctx.rect(50, 30, 20, 20);
    ctx.rect(50, 50, 20, 20);
    ctx.stroke();
  }
}

const sPiece = {
  color: "#E98B50",
  coords: [[0, 3],[0, 4],[1, 4],[1, 5]],
  type: "togglePiece",
  center: [1, 4],
  draw: ctx => {
    ctx.beginPath();
    ctx.lineWidth="2";
    ctx.strokeStyle="black";
    ctx.fillStyle = "#E98B50";
    ctx.fillRect(40, 50, 20, 20);
    ctx.fillRect(40, 30, 20, 20);
    ctx.fillRect(20, 30, 20, 20);
    ctx.fillRect(60, 50, 20, 20);
    ctx.rect(40, 50, 20, 20);
    ctx.rect(40, 30, 20, 20);
    ctx.rect(20, 30, 20, 20);
    ctx.rect(60, 50, 20, 20);
    ctx.stroke();
  }
}

const zPiece = {
  color: "#55A44E",
  coords: [[0, 4],[0, 5],[1, 3],[1, 4]],
  type: "togglePiece",
  center: [1, 4],
  draw: ctx => {
    ctx.beginPath();
    ctx.lineWidth="2";
    ctx.strokeStyle="black";
    ctx.fillStyle = "#55A44E";
    ctx.fillRect(40, 50, 20, 20);
    ctx.fillRect(40, 30, 20, 20);
    ctx.fillRect(20, 50, 20, 20);
    ctx.fillRect(60, 30, 20, 20);
    ctx.rect(40, 50, 20, 20);
    ctx.rect(40, 30, 20, 20);
    ctx.rect(20, 50, 20, 20);
    ctx.rect(60, 30, 20, 20);
    ctx.stroke();
  }
}

const tPiece = {
  color: "#334477",
  coords: [[0, 4],[1, 3],[1, 4],[1, 5]],
  type: "rotatePiece",
  center: [1, 4],
  draw: ctx => {
    ctx.beginPath();
    ctx.lineWidth="2";
    ctx.strokeStyle="black";
    ctx.fillStyle = "#334477";
    ctx.fillRect(40, 50, 20, 20);
    ctx.fillRect(20, 50, 20, 20);
    ctx.fillRect(60, 50, 20, 20);
    ctx.fillRect(40, 30, 20, 20);
    ctx.rect(40, 50, 20, 20);
    ctx.rect(20, 50, 20, 20);
    ctx.rect(60, 50, 20, 20);
    ctx.rect(40, 30, 20, 20);

    ctx.stroke();
  }
}

const iPiece = {
  color: "#D7C37A",
  coords: [[0, 4],[1, 4],[2, 4],[3, 4]],
  type: "togglePiece",
  center: [2, 4],
  draw: ctx => {
    ctx.beginPath();
    ctx.lineWidth="2";
    ctx.strokeStyle="black";
    ctx.fillStyle = "#D7C37A";
    ctx.fillRect(40, 30, 20, 20);
    ctx.fillRect(40, 10, 20, 20);
    ctx.fillRect(40, 50, 20, 20);
    ctx.fillRect(40, 70, 20, 20);
    ctx.rect(40, 30, 20, 20);
    ctx.rect(40, 10, 20, 20);
    ctx.rect(40, 50, 20, 20);
    ctx.rect(40, 70, 20, 20);
    ctx.stroke();
  }
}
 
const lPiece = {
  color: "#BC4F4F",
  coords: [[0, 4],[1, 4],[2, 4],[2, 5]],
  type: "rotatePiece",
  center: [1, 4],
  draw: ctx => {
    ctx.beginPath();
    ctx.lineWidth="2";
    ctx.strokeStyle="black";
    ctx.fillStyle = "#BC4F4F";
    ctx.fillRect(30, 20, 20, 20);
    ctx.fillRect(30, 40, 20, 20);
    ctx.fillRect(30, 60, 20, 20);
    ctx.fillRect(50, 60, 20, 20);
    ctx.rect(30, 20, 20, 20);
    ctx.rect(30, 40, 20, 20);
    ctx.rect(30, 60, 20, 20);
    ctx.rect(50, 60, 20, 20);
    ctx.stroke();
  }
}

const jPiece = {
  color: "#1B8057",
  coords: [[0, 5],[1, 5],[2, 5],[2, 4]],
  type: "rotatePiece",
  center: [2, 5],
  draw: ctx => {
    ctx.beginPath();
    ctx.lineWidth="2";
    ctx.strokeStyle="black";
    ctx.fillStyle = "#1B8057";
    ctx.fillRect(50, 20, 20, 20);
    ctx.fillRect(50, 40, 20, 20);
    ctx.fillRect(50, 60, 20, 20);
    ctx.fillRect(30, 60, 20, 20);
    ctx.rect(50, 20, 20, 20);
    ctx.rect(50, 40, 20, 20);
    ctx.rect(50, 60, 20, 20);
    ctx.rect(30, 60, 20, 20);
    ctx.stroke();
  }
}


class Piece {
  constructor(options){
    this.center = options.center;
    this.coords = options.coords;
    this.color  = options.color;
    this.draw   = options.draw;
  }

  previewTetrimino(ctx) {
    ctx.clearRect(0, 0, 100, 100);
    this.draw(ctx);
  }
}


export default Piece;

class TogglePiece extends Piece {
  constructor(options) {
    super(options);
    this.toggled = false;
    this.type = options.type;
  }
}

class RotatePiece extends Piece {
  constructor(options) {
    super(options);
    this.type = options.type;
  }
}

class StaticPiece extends Piece {
  constructor(options) {
    super(options);
    this.type = options.type;
  }

}


Piece.PIECES = [oPiece, sPiece, zPiece, tPiece, iPiece, lPiece, jPiece];

Piece.randomPiece = () => {
  let random = Math.floor(Math.random() * 7);
  let options = Piece.PIECES[random];

  switch (options.type) {
    case "staticPiece":
      return new StaticPiece(options);

    case "rotatePiece":
      return new RotatePiece(options);

    case "togglePiece":
      return new TogglePiece(options);

    default:
      console.log(`No type ${options.type}`);
  }
};

修改game.js

项目源码：

项目源码