繪製頁面草稿

按照慣例，我們先來畫一下我們整個遊戲畫面呈現的草稿，下面是我對整個遊戲面化的初步想像。

我把所有的元素都集中放在中間區塊，因為人的視線比起左右移動，上下移動是更省力的。另一方面，隨著行動裝置的普及，各式各樣的螢幕尺寸都有，為了讓遊戲可以不用調整太多排版就能適應寬螢幕和窄螢幕，所以才會想把這幾個遊戲的主要元件都放在中間，以上下方向來排列。

這樣的排版設計還有一個好處，因為我們不用大幅度的調整元件的位置就能適應寬螢幕和窄螢幕，所以在程式撰寫上面也不用太傷腦筋，寫一套就幾乎能夠適應不同螢幕，所以程式也能夠比較簡潔易讀易維護。

切出頁面區塊

新增元件

這邊的做法跟 Day04 和 Day13 相似，若有雷同，純屬故意。
首先我們新增一個 MemoryBlocks 的物件
src/App.js

import React, { Component } from 'react';
import MemoryBlocks from 'containers/MemoryBlocks';
import './App.css';

class App extends Component {
  render() {
    return (
      <div className="App">
        <MemoryBlocks />
      </div>
    );
  }
}

上面 <MemoryBlocks /> 是我們草圖畫的中間的區塊，所以為了讓元件置中，我們需要有一個外容器來包覆他，順便當成他的背景。所以這邊我把 <App /> 當作 <MemoryBlocks /> 的外容器，並將外容器宣告為 FlexBox ，display: flex;，接下來，就可以在外容器設定內元件的排列方式，我們希望內元件 <MemoryBlocks /> 可以上下左右都置中，所以我們使用 justify-content: center; 以及 align-items: center;。
src/App.css

.App {
  width: 100%;
  min-height: 100vh;
  display: flex;
  justify-content: center;  /* 左右置中 */
  align-items: center;      /* 上下置中 */
  box-sizing: border-box;
}

* {
  border: 1px solid black;  /* 為了方便辨識區塊，先給裡面每個元件邊框 */
}

切出各個區塊

接下來，在 <MemoryBlocks /> 物件當中，我們根據上面的草稿切分出各個區塊

containers/MemoryBlocks/index.js

import React, { Component } from 'react';
import {
    StyledMemoryBlocks,
} from './Styled';

class MemoryBlocks extends Component {
    render() {
        return (
            <StyledMemoryBlocks>
                <div>MemoryBlocks</div>
                <div>資訊區塊 - 顯示目前第幾關</div>
                <div className="memory-blocks__blocks-wrapper">主畫面方塊區</div>
                <div>進度條</div>
                <div>
                    <button>重播</button>
                    <button>重新遊戲</button>
                </div>
            </StyledMemoryBlocks>
        );
    }
}

export default MemoryBlocks;

為了讓切分出來的區塊能夠按照我們的構想，也就是草圖的樣式排列，我們使用 styled-components 來幫助我們撰寫 css 。這邊我跟前面一樣使用 media query 來讓排版可以適應不同螢幕。

下面的程式碼大意是說，我希望在 600px 以上寬度的螢幕，保持 blocks-wrapper 是 600x600 的大小，當螢幕寬度小於 600px ，則讓 blocks-wrapper 的寬度等於螢幕寬度，然後 blocks-wrapper 的高度也等於螢幕寬度，因為這邊我希望他是正方形。

containers/MemoryBlocks/Styled.js

import styled from 'styled-components';
import {
    GAME_WRAPPER_SIZE,
} from './constants';

export const StyledMemoryBlocks = styled.div`
    .memory-blocks__blocks-wrapper {
        position: relative;
        width: ${GAME_WRAPPER_SIZE}px;
        height: ${GAME_WRAPPER_SIZE}px;
        @media only screen and (max-width: 600px) {
            width: 100vw;
            height: 100vw;
        }
    }
`;

CSS @media Rule

今日成果

下圖就是我們今天把區塊規劃好，並且加上一些樣式，讓區塊能夠按照我們一開始草圖的構想來排列

參考程式碼 & 遊戲展示

Memory Blocks - Github