[Day14]用Canvas打造自己的遊樂場-Galaxian 開工

第 12 屆 iThome 鐵人賽

DAY 14

Software Development

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

12th鐵人賽

大白鯊

團隊薪水被偷

2020-09-29 09:14:24

620 瀏覽

分享至

昨天完成了第一個程式，今天要開始第二個遊戲啦．
不鏽要寫啥呢？我左思右想後，決定在挑一個大家一定都玩過的經典遊戲“Galaxian”，也就是大家耳熟能詳的小蜜蜂啦．
會選這遊戲的原因，是因為這遊戲的組成與我們撰寫的第一個遊戲類似，玩家控制的角色在下方，而需要消滅的敵人在上方以陣列方式呈現．
消滅的方式由反彈的球，改為直進式的子彈．
以上呢，是我認為兩個遊戲的相似之處，再來就說說哪邊不一樣吧～
現在敵人學會反擊啦，不再是任人欺負的磚塊了，現在敵人同樣也能發射彈藥來解決玩家．
當然還有一個不能錯過的重點，就是那嘲諷的左右移動，這邊有一個小改變，過去的敵人是緊密相連的，但如果相同設定套用在小蜜蜂就太沒挑戰性了，怎麼發射子彈都能打到目標，所以每個敵人間要留有空隙．

好啦我們先從第一個遊戲中擷取可以使用的部分出來吧，我把覺得不會使用的code都先刪掉，留下的如下，我也不太確定都會用上或者沒有多山啦，但那就之後再說吧

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

<head>
    <title>Second 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>

        // 生命設定
        const LIFE_SIZE = 30;
        var chance = 3;
        
        window.onload = () => {
            canvas = document.getElementById('playground');
            canvasContext = canvas.getContext('2d');

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

            canvas.addEventListener('mousemove', mousePos);

        }

        // 負責更新畫面
        drawAll = () => {
            move();
            draw();
        }

        // 負責畫畫
        draw = () => {
            // background
            drawRectangle(0, 0, canvas.width, canvas.height, '#003377');

            // 畫線
            drawLine(0, LIFE_SIZE, canvas.width, LIFE_SIZE, 'white')

            // 畫出生命
            showLife(chance);

        }

        // 負責處理動作
        move = () => {

        }

        // 矩形元件
        drawRectangle = (topLeftX, topLeftY, boxWidth, boxHeight, color) => {
            canvasContext.fillStyle = color;
            canvasContext.fillRect(topLeftX, topLeftY, boxWidth, boxHeight);
        }

        // 圓形元件
        drawCircle = (centerX, centerY, r, color) => {
            canvasContext.fillStyle = color;
            canvasContext.beginPath();
            canvasContext.arc(centerX, centerY, r, 0, Math.PI * 2);
            canvasContext.fill();
        }

        // 畫線
        drawLine = (beginX, beginY, endX, endY, color) => {
            canvasContext.strokeStyle = color;
            canvasContext.beginPath();
            canvasContext.moveTo(beginX, beginY);
            canvasContext.lineTo(endX, endY);
            canvasContext.stroke();
        }

        // 畫生命
        drawLife = (lifeX, lifeY, size, color) => {
            canvasContext.fillStyle = color;
            canvasContext.beginPath();
            canvasContext.arc(lifeX + size / 4, lifeY + size / 4, size / 4, Math.PI * 1, Math.PI * 0);
            canvasContext.arc(lifeX + size * 3 / 4, lifeY + size / 4, size / 4, Math.PI * 1, Math.PI * 0);
            canvasContext.moveTo(lifeX + size, lifeY + size / 4);
            canvasContext.lineTo(lifeX + size / 2, lifeY + size);
            canvasContext.lineTo(lifeX, lifeY + size / 4);
            canvasContext.fill();
        }

        // 畫出生命
        showLife = (num) => {
            for (let life_count = 0; life_count < num; life_count++) {
                drawLife(LIFE_SIZE * life_count, 0, LIFE_SIZE, 'red');
            }
        }

        // 游標位置
        mousePos = (event) => {
            var rect = canvas.getBoundingClientRect();
            var root = document.documentElement;

            var mouse_x = event.clientX - rect.left - root.scrollLeft;
        }

    </script>
</body>

</html>