[Day06]用Canvas打造自己的遊樂場-BB 開工

第 12 屆 iThome 鐵人賽

DAY 6

Software Development

用Canvas打造自己的遊樂場系列第 6 篇

12th鐵人賽

大白鯊

團隊薪水被偷

2020-09-21 06:25:47

687 瀏覽

分享至

經過前幾天的基礎介紹，今天可以開始寫遊戲啦，第一個遊戲呢，我想來寫一個經典遊戲:Brick Breaker，為什麼挑選這遊戲呢？？

是這樣的，這遊戲只需要簡單的幾個元件，透過元件間的互動，就能夠組合成趣味性高的經典，蠻適合當作起始點的．

好啦，廢話不多說！！我們開始吧！

首先，我們先建好800*630的canvas，並且畫個黑色背景．

<!DOCTYPE html>
<html lang="en">

<head>
    <title>First Game</title>
    <meta name="description" content="第一個遊戲">
    <meta content="text/html;charset=utf-8" http-equiv="Content-Type">
    <meta content="utf-8" http-equiv="encoding">
</head>

<body>
    <canvas id="playground" width="800" height="630"></canvas>
    <script>
        var canvas, canvasContext;

        window.onload = () => {

            canvas = document.getElementById('playground');
            canvasContext = canvas.getContext('2d');

            // background
            canvasContext.fillStyle = 'black';
            canvasContext.fillRect(0, 0, canvas.width, canvas.height);

        }
    </script>
</body>

</html>

之後我就不放整段程式碼啦，就只放<script>之間的部分了．
畫好背景之後，我們先把遊戲中會出現的元件畫好，其實也就球跟磚兩種而已．
那就先把畫出來吧，在座標(300,300)的位置先把球畫出來

canvasContext.fillStyle = 'white';
canvasContext.beginPath();
canvasContext.arc(300, 300, 10, 0, Math.PI * 2);
canvasContext.fill();

現在畫面應該是有一個孤獨的小白球

畫個磚塊陪他吧！我們就畫個80*30的紅磚在座標(0,0)的位置．

canvasContext.fillStyle = 'red';
canvasContext.fillRect(0, 0, 80, 30);

這時候畫面上就多了小紅磚來陪伴小白球啦．

以上的部分其實都還在前幾天內容的範圍，今天我們的目標設定在讓球動起來．
先來說說如何讓畫面看起來有在動，其實就是清除舊的畫面，然後畫新的，所以整個流程就會是：
呈現畫面 -> 更新元件狀態 -> 清除畫面 -> 呈現畫面 -> 更新元件狀態 -> 清除畫面
這樣不斷的循環．
好的要完成這流程，我們首先先把球的座標變成可以變動的參數．

<script>
        var canvas, canvasContext;

        //球的參數
        var ball_x = 300;
        var ball_y = 300;

        window.onload = () => {

            canvas = document.getElementById('playground');
            canvasContext = canvas.getContext('2d');

            // background
            canvasContext.fillStyle = 'black';
            canvasContext.fillRect(0, 0, canvas.width, canvas.height);

            canvasContext.fillStyle = 'white';
            canvasContext.beginPath();
            canvasContext.arc(ball_x, ball_y, 10, 0, Math.PI * 2);
            canvasContext.fill();

            canvasContext.fillStyle = 'red';
            canvasContext.fillRect(0, 0, 80, 30);

        }
</script>

接下來要處理的就是重複畫圖、更新、清除的流程了．那就先把畫圖寫成一個function，後面只需要重複執行function就行了．

drawAll = () => {
    // background
    canvasContext.fillStyle = 'black';
    canvasContext.fillRect(0, 0, canvas.width, canvas.height);

    canvasContext.fillStyle = 'white';
    canvasContext.beginPath();
    canvasContext.arc(ball_x, ball_y, 10, 0, Math.PI * 2);
    canvasContext.fill();

    canvasContext.fillStyle = 'red';
    canvasContext.fillRect(0, 0, 80, 30);
}

接下來就要來設定執行drawAll的時間啦，因為要反覆的執行，所以我們選用setInterval()，這邊設定時間是以ms來計算的，那為了畫面看起來不要有頓感，我們設定1秒更新30次畫面．

<script>
    var canvas, canvasContext;

    //球的參數
    var ball_x = 300;
    var ball_y = 300;

    window.onload = () => {

        canvas = document.getElementById('playground');
        canvasContext = canvas.getContext('2d');

        //一秒更新幾次畫面
        var timesPerSec = 30;
        setInterval(drawAll, 1000/timesPerSec);
    }

    drawAll = () => {
        // background
        canvasContext.fillStyle = 'black';
        canvasContext.fillRect(0, 0, canvas.width, canvas.height);

        canvasContext.fillStyle = 'white';
        canvasContext.beginPath();
        canvasContext.arc(ball_x, ball_y, 10, 0, Math.PI * 2);
        canvasContext.fill();

        canvasContext.fillStyle = 'red';
        canvasContext.fillRect(0, 0, 80, 30);
    }
</script>

執行後會發現球沒動啊！！！原來是我們還沒設計移動方式啊．
在drawAll中加入移動的程式看看．