自己動手打造html5星際爭霸戰的範例程式碼分享

學習html5的canvas第三天，覺得還沒過癮，轉眼就忘，於是趁著有空，準備弄個小遊戲來玩！ 遊戲應該需要注意性能，還有一些邏輯需要斟酌，我想還需要用戶可修改性，也就是用戶配置。開始我們簡單但有趣的旅程吧－

想先看效果的，先跳轉試試看吧！步，當然需要一張畫布

1 <canvas id="canvas" width="300" height="400">你的浏览器不支持Canvas</canvas>

JavaScript

的總體結構如下：

var定义一些变量
planeMoveTimer飞机移动监听/计时器
attackEnemyTimer发射炮弹计时器
onkeydown监听
onkeyup监听
drawPlane画飞机
drawEnemy画敌人

首先預先定義一些變數

var _keyA = _keyD = _keyW = _keyS = 0,  // 存储按键状态

    step = 8,                          // 飞机移动速率
    w = 34, h = 44,                  // 飞机实际大小
    planeX = 133, planeY = 356,      // 飞机目前位置
    planeSrc = "feiji.png",          // 飞机素材位置
    imgW = 177, imgH = 220,          // 飞机源图尺寸

    cw = 300, ch = 400,  // 画布大小
    canvas = document.getElementById("canvas"),
    ctx = canvas.getContext("2d");

本遊戲只用到一個外部資源，就是那張

圖片

，取得地址請訪問本文底部給出的項目GitHub位置連結。 # 飛機的圖片一定要在onload()方法裡才能把飛機畫出來，目前的敵人還是一堆橘色的不會動的磚頭，透過遍歷在畫布的頂端把它們畫出來。 ，看兩個鍵盤

事件：

function drawPlane(x, y) {
    var img = new Image();
    img.src = planeSrc;  // 飞机源图地址
    img.onload = function() {
        ctx.drawImage(img, 0, 0, imgW, imgH, planeX, planeY, w, h);
    }
}
function drawEnemy(){
    for(var a=0;a<cw;a+=10) {
        for(var b=0;b<ch-300;b+=10) {
            ctx.beginPath();
            ctx.fillStyle = "orange";
            ctx.strokeStyle = "black";
            ctx.strokeRect(a, b, 10 ,10);
            ctx.fillRect(a, b, 10, 10);
            ctx.closePath();
        }
    }
}

至於為什麼要在兩個事件裡設定變數_keyA、_keyD、_keyW、_keyS，而不是直接觸發畫圖事件，原因是——同時長按兩個鍵時，無法同時觸發事件，先按者只觸發一次，只有後按者在按著鍵的時候才能一直觸發事件，簡單點來說，如果我想要向左上角移動，同時按下A和W，假設A比W慢了一點點，即時很微小，那麼飛機的移動路徑是先上移一步然後一直向左移動，這顯然不是我想要的，我用4個變量來存儲按鍵的狀態，按下鍵的時候，設定其狀態為1，在按鍵起來的時候，設定其狀態為0，然後我們用計時器來不斷地讀這些鍵的狀態並及時

更新

飛機的狀態。大的問題，它是直接清除整塊的，要是遊戲有背景，有交疊，那不是要把這些不是飛機的東西也一併清空了？ 恕我愚昧，暫時不考慮這個問題。 ##透過判斷按鍵狀態，每次移動的步距為預先設定的step，並做好邊界處理。砲彈，每顆砲彈又單獨設定一個計時器，以便控制，砲彈的移動我也是採用先擦後畫的方式，由於砲彈移動也有步距，所謂砲彈貫透效果就是直接畫一條顏色跟背景色一樣的直線而已。試著修改砲彈步距可以調整砲彈的移動速度，也可以調整砲彈的尺寸。

最後一步了，還差點什麼，一開始就要畫好敵人和飛機啦！

window.document.onkeydown = function(evt){
    evt = (evt) ? evt : window.event;
    switch(evt.keyCode) {
        case 65:  // A
            _keyA = 1;
            break;
        case 68:  // D
            _keyD = 1;
            break;
        case 87:  // W
            _keyW = 1;
            break;
        case 83:  // S
            _keyS = 1;
            break;
    }
}
window.document.onkeyup = function(evt){
    evt = (evt) ? evt : window.event;
    switch(evt.keyCode) {
        case 65:  // A
            _keyA = 0;
            break;
        case 68:  // D
            _keyD = 0;
            break;
        case 87:  // W
            _keyW = 0;
            break;
        case 83:  // S
            _keyS = 0;
            break;
    }
}

大功告成！還想繼續優化增加可玩性的，但實在是沒時間弄了，還有很多其他的東西要學，所以這個遊戲就先這樣啦！是不是很簡單！哈哈，囧了吧，標題太誘惑人，沒辦法！

以上是自己動手打造html5星際爭霸戰的範例程式碼分享的詳細內容。更多資訊請關注PHP中文網其他相關文章！