Day13 - 貪吃蛇篇：頁面佈局規劃

2019鐵人賽 javascript reactjs react 網頁設計

Taiming

團隊開橋找井

2018-10-28 09:05:21

3542 瀏覽

分享至

頁面佈局規劃

如同前篇遊戲 Tic Tac Toe 一樣，我們要來規劃一下遊戲的畫面，因為我希望我們貪吃蛇的遊戲在電腦上可以玩，在手機上也可以玩，所以我想要把遊戲畫面放在中間，方便我們不會因為各種螢幕尺吋的改變而需要大幅度的變動排版。

可以參考我們的 Day04 ，我對於整個遊戲的想像畫面如下，所有的元素都放在中間，然後最上面是顯示分數，再來是貪吃蛇遊戲的主畫面地圖，再來我們有個遊戲暫停按鈕，最下面是方向操作鍵，因為手機上面沒有像電腦一樣有方向鍵可以按，所以這邊我們自己來做一個方向鍵。

draft

如同 Day02 - 開發環境準備的步驟一樣，我們使用 create-react-app 來開始一個新的專案，並且將 root path 設定好，如果有需要，也可以順便部署到github page。

畫出頁面

今天的目標，我們希望開一個新專案，然後把上面示意圖規劃的區塊畫出來。所以首先我們先新增一個 <SnakeGame /> 的物件

// src/App.js
import React, { Component } from 'react';
import SnakeGame from 'containers/SnakeGame';
import './App.css';

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

export default App;

然後把 <SnakeGame /> 的骨幹按照上面的示意圖切出來

// containers/SnakeGame/index.js
import React, { Component } from 'react';

class SnakeGame extends Component {
   render() {
       return (
           <div>
               <div>資訊版 - 顯示計分</div>
               <div>Snake Game 主畫面地圖</div>
               <button>暫停按鈕</button>
               <div>方向鍵元件</div>
           </div>
       );
   }
}

export default SnakeGame;

接著我們要加上一點CSS，一樣我們是使用 styled-components，在裡面我們使用 flex 來排版。剛開始使用 flex 的時候，如果不瞭解就使用，很容易外容器跟內元件不分，把外容器的屬性拿到內元件來用，內元件的屬性拿到外容器來用，放錯地方如果沒有作用還算事小，最容易發生的就是會搞不清楚為什麼畫面總是不聽話，不按照自己的心意來排版，該置中的不置中，不該置中的卻一直跑到中間，這部分在初學時期一定要特別留意外容器與內元件之分，以及他們所能夠使用的屬性。

為了要把整個遊戲畫面放到中間，我們把 <div className="App"> 這個 tag 當作外容器，然後把 <SnakeGame /> 當作內元件。所以，在 App 裡面透過 display 我們把他宣告成 flex ，以及在外透過 justify-content: center; 把 <SnakeGame /> 元件放在 <div className="App"> 這個外容器的中間。

然後這邊我讓 <div className="App"> 這個外容器是滿版的，也當作背景，寬度 width: 100%; 以及高度min-height: 100vh;

vh 以及 vw

這邊介紹一下 CSS3 的新單位 vh 以及 vw，vh 代表的是 view height，也就是螢幕可視範圍高度的百分比； vw 表示的是 view width，也就是螢幕可是範圍寬度的百分比。
這兩個單位的使用上和百分比很類似，當我填 100vh 和 100vw 時，意思就是我的這個 div 要是整個螢幕的可視範圍，而且很重要的是，這個區塊會隨著瀏覽器的縮放而改變。
如果我填的是 30vh 和 30vw，表示這個 div 要占我的可視範圍的30%，因為它會隨著你的網頁縮放而改變。
CSS Units
[筆記] 好用的css 3新單位vh vw ─ 讓你的圖片可以隨著螢幕大小而不同