iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 23
2
Modern Web

以經典小遊戲為主題之ReactJS應用練習系列 第 23

Day23 - 記憶方塊篇:頁面佈局規劃

繪製頁面草稿

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

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

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

切出頁面區塊

新增元件

這邊的做法跟 Day04Day13 相似,若有雷同,純屬故意。
首先我們新增一個 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

今日成果

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

參考程式碼 & 遊戲展示

Memory Blocks - Github


上一篇
Day22 - 記憶方塊篇:資料結構規劃
下一篇
Day24 - 記憶方塊篇:畫出主畫面記憶方塊
系列文
以經典小遊戲為主題之ReactJS應用練習30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言