通过编写俄罗斯方块游戏学习ES6第2节开始游戏

项目演示

项目演示地址：

体验一下

项目源码：

项目源码

代码结构

tetris.js

import Game from './game';
import GameView from './game_view';

document.addEventListener("DOMContentLoaded", () => {
  const canvasMain = document.getElementById('canvas');
  canvasMain.width = 300;
  canvasMain.height = 600;
  const ctxMain = canvasMain.getContext("2d");

  const canvasPreview = document.getElementById('next-tetrimino-render');
  canvasPreview.width = 100;
  canvasPreview.height = 100;
  const ctxPreview = canvasPreview.getContext("2d");

  const modal = document.getElementById('myModal');

  const game = new Game(ctxMain, ctxPreview);
  new GameView(game, ctxMain, modal);
})

game.js

import Board from './board';

class Game {
  constructor(ctxMain, ctxPreview) {
    this.board = new Board;
    this.ctxMain = ctxMain;
    this.ctxPreview = ctxPreview;
    this.gameover = false;
    this.level = 0;
  }

  draw(){
      this.ctxMain.clearRect(0, 0, Game.WIDTH, Game.HEIGHT);
      this.board.draw(this.ctxMain);
  }

  clear() {
    this.level = 0;
    this.gameover = false;
    this.board.clear();
  }
}

Game.WIDTH = 200;
Game.HEIGHT = 400;

export default Game;

game_view.js

class GameView {
  constructor(game, ctx, modal){
    this.game = game;
    this.ctx = ctx;
    this.modal = modal;
    this.downPressed = false;
    this.intervalSpeed = 1000;
    this.paused = false;
    this.running = false;
    this.bindKeyHandlers();
  }

  bindKeyHandlers(){
    document.addEventListener("keydown", function(e) {
      switch(e.keyCode) {
        // space bar
        case 32:
          e.preventDefault();
          if (!this.paused) {
            this.modal.style.display = "none";
            this.start();
          }
          break;

        default:
          return;
      }
    }.bind(this));

  }

  start(){
    this.game.clear();
    this.running = true;
    requestAnimationFrame(this.animate.bind(this));
  }


  animate(){
    this.game.draw();
    requestAnimationFrame(this.animate.bind(this));
  }
}

export default GameView;

board.js

class Board {
  constructor() {
    this.grid = this.newGrid();
    this.level = 0;
  }

  newGrid() {
    let grid = [];

    for (let i = 0; i < 20; i++) {
      grid[i] = this.addRow();
    }

    return grid;
  }

  addRow() {
    let row = [];

    for (let i = 0; i < 10; i++) {
      row.push(null);
    }

    return row;
  }

  clear() {
    this.grid = this.newGrid();
    this.level = 0;
  }

  draw(ctx) {
    let padding = 30;

    for (var row = 0; row < 20; row++) {
      for (let col = 0; col < 10; col++) {
        let x = col * padding;
        let y = row * padding;

        if (this.grid[row][col]) {
          ;
        }
        else {
          ctx.clearRect(x, y, x + padding, y + padding);
        }
      }
    }
  }
}

export default Board;

项目源码：

项目源码