前幾篇的遊戲中著重在了解 HTML 與 JS 之間的關聯和物件 (eg. getElementById、event listener、讀取鍵盤、 有某事件發生時才執行的callback function...等)，所以沒花太多時間時間在認識 CSS。

現在對JavaScript稍微熟悉一點後，能花一些時間在簡單的排版上。
此篇想達到讓遊戲畫面水平置中，並且有個遊戲開始的按鈕，在滑鼠游標放在按鈕上時，可以有上色的變化。

(一)水平置中

css flex

可以想像有個外容器，內部有許多自行指定的元件，在外容器指定他的大小範圍、屬性，來決定出內部元件的擺放狀態。
以目前想到達的樣貌為例:
HTML

<div class="flex-container"> <!-- 外容器 -->
    <div class="inner"> <!-- 內部元件-->
    </div>
</div>

CSS

.flex-container{
    display: flex; /*使用css flex*/
    justify-content: center;  /* 其內容要水平置中 */
}
.inner{
    /*這時的畫面，會在中間產生 寬300px, 高500px 的方框，有別於過去都從左上角開始*/
    width = 300px;  
    height = 500px; 
}

(二)按鈕(button)

上述說的游標放上去後，改變button的style，是使用hover來達到此效果，

CSS

.btn {
 /* 游標放上去前的設定 */
}
.btn: hover
 /* 游標放上去後的樣貌 */

(三)載入圖片

在貪食蛇系列文章提到，我們能使用canvas來繪圖，完成畫面中的蛇和食物；打磚塊也有同樣的需求，只是這次在畫面上會想使用圓弧框來繪製磚塊，因此就先自行繪製圖檔，再使用HTML Image 物件來載入圖檔，並監聽圖檔"載入"後想執行的任務，像是繪製這些圖檔在指定的位置。

var img = new Image();
img.src =""; //引號內可以是url或是資料夾的相對位置
img.addEventListener('load', ()=>{
    ctx.drawImage(img_brick, horizontal_pos, vertical_pos[, img_w, img_h]); // 當沒指定img_w和img_h，就會以原圖檔的大小繪製
    ctx.stroke();
}, false);

完整程式碼

參考資料

按鈕button
畫面置中
Image