通过编写俄罗斯方块游戏学习ES6第1节搭建项目骨架项目演示项目演示地址：体验一下项目源码：项目源码代码结构本节做完效果游

项目演示

项目演示地址：

体验一下

项目源码：

项目源码

代码结构

本节做完效果

游戏主页面

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Tetris</title>
    <link rel="stylesheet" href="./style/reset.css">
    <link rel="stylesheet" href="./style/styling.css">
    <script type="text/javascript" src="./dist/lib/bundle.js"></script>

  </head>
  <body>
    <div class="tetris">
      <div class="title-container">
        <h1 class="title">Tetris</h1>
      </div>
      <div class="content-container">
        <canvas id="canvas" class="tetris-board"></canvas>

        <aside>
          <div class="instructions">
            <h3>Instructions:</h3>
            <div class="">

              <div class="left-right-arrows">
                <img src="./assets/left_arrow.png" alt="left-arrow">
                <img src="./assets/right_arrow.png" alt="right-arrow">
                <p>Move</p>
              </div>

              <div class="up-arrow">
                <img src="./assets/up_arrow.png" alt="up-arrow">
                <p>Rotate</p>
              </div>

              <div class="down-arrow">
                <img src="./assets/down_arrow.png" alt="down-arrow">
                <p>Increase speed</p>
              </div>

              <div class="spacebar">
                <p>Spacebar: Drop/New Game</p>
                <p>P: Pause</p>
              </div>
            </div>
          </div>
          <div class="next-tetrimino">
            <h3>Next Piece:</h3>
            <canvas id="next-tetrimino-render"></canvas>
          </div>
        </aside>
      </div>

      <!-- The Modal -->
      <div id="myModal" class="modal">
        <!-- Modal content -->
        <div class="modal-content">
          <button type="button" id="close-modal" name="close-modal">x</button>
          <div class="pause-container">
            <div class="pause">
              <p id="modal-text">Welcome to Tetris!<br>Press Space to start.</p>
            </div>
          </div>
        </div>
      </div>

    </div>
  </body>
</html>

样式

reset.css

html, head, body, header, h1, h3, p, img, button, canvas, a, span, footer, aside, section, div {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-weight: inherit;
  font-style: inherit;
  font-size: 100%;
  font-family: inherit;
  vertical-align: inherit;
  text-decoration: inherit;
}

html {
  overflow: hidden;
  width: 100%;
  height: 100%;
}

styling.css

body {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  font-family: 'Montserrat', sans-serif;
  background-image: url("../assets/background_image.jpg");
}

canvas {
  border: 1px solid black;
}

.title-container {
  text-align: center;
}

h1 {
  font-weight: bold;
}

h3 {
  padding-bottom: 25px;
  font-size: 20px;
  font-weight: 400;
}

img {
  width: 25px;
  height: 25px;
}

.left-right-arrows, .up-arrow, .down-arrow {
  display: flex;
  flex-direction: row;
  justify-content: center;
}

.spacebar {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 16px;
}

.instructions, .next-tetrimino {
  border: 5px solid #1B8057;
  border-radius: 35px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 35px;
  width: 220px;
  font-size: 16px;
  margin: 10px;
  background-color: #EDE9A3;
}

.content-container {
  display: flex;
  align-items: center;
}

.tetris-board, #next-tetrimino-render {
  background-color: #FEF2A0;
}

.title {
  padding-bottom: 20px;
  font-size: 42px;
}

.score {
  padding: 10px;
  font-size: 16px;
}

.modal {
    position: fixed;
    z-index: 1;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgb(0,0,0);
    background-color: rgba(0,0,0,0.4);
    display: flex;
    justify-content: center;
    align-items: center;
}

button {
  position: relative;
  top: -7px;
  left: 250px;
  background-color: #EDE9A3;
}

.pause-container {
  width: 250px;
  height: 75px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.pause {
  text-align: center;
}

.modal-content {
  border: 5px solid #1B8057;
  border-radius: 35px;
  background-color: #EDE9A3;
  padding: 12px 30px 30px 30px;
}

footer {
  padding: 15px;
  display: flex;
  align-items: center;
  justify-content: center;

}

package.json

{
  "name": "tetris_es6_step_by_step",
  "version": "1.0.0",
  "description": "",
  "main": "webpack.config.js",
  "directories": {
    "lib": "lib"
  },
  "scripts": {
    "dev": "webpack -w",
    "build": "webpack",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "repository": {
    "type": "git",
    "url": ""
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "webpack": "^5.11.0",
    "webpack-cli": "^4.3.0"
  }
}

webpack.config.js

module.exports = {
  entry: "./lib/tetris.js",
  output: {
  	filename: "./lib/bundle.js"
  },
  devtool: 'source-map',
};

项目源码：

项目源码