iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 13
0

頁面佈局規劃

如同前篇遊戲 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 ─ 讓你的圖片可以隨著螢幕大小而不同

flex-direction

然後在 flex 的外容器當中,還有一個常用到的屬性,就是 flex-direction ,這個屬性可以設定 Flexbox 外容器所包含的內元件,會以什麼方向做排列,

  • row:預設值,由左到右,從上到下
  • row-reverse:與 row 相反
  • column:從上到下,再由左到右
  • column-reverse:與 column 相反

然後我會讓所有的元件先有一個 border 的屬性,方便我們知道每個元素的大小及範圍,這樣讓我們好觀察畫面是不是跟我們想像是一樣的,做到這邊,我們應該會看到下面這個畫面。
add-border

調整樣式

然後為了讓畫面更接近我們一開始的構想圖,我調整了一下 CSS 樣式,因為主畫面的長寬是定值,我通常會把這些常數定值統一放在一個叫做 constants.js 的檔案裡面做統一的管理,未來如果有機會要重複使用的時候,就可以直接使用這些參數。

然後因為方向鍵這邊,未來我要做成獨立出來的元件,所以這邊我就先不調整樣式。
snake-game

調整後得到的結果如下,左邊是電腦瀏覽器上的顯示結果,右邊是用 chrome 的 device toolbar 調整成手機螢幕大小的結果。
map-draft


參考程式碼

Snake - Github


上一篇
Day12 - 貪吃蛇篇:蛇的原理及資料結構規劃
下一篇
Day14 - 貪吃蛇篇:畫出主畫面地圖
系列文
以經典小遊戲為主題之ReactJS應用練習30

尚未有邦友留言

立即登入留言