好傢伙,我的包終於開發完啦

歡迎使用胖虎的飛機大戰包!! 為你的主頁新增色彩

• 這是一個有趣的網頁小遊戲包,使用canvas和js開發
• 使用ES6模組化開發

效果圖如下:

 (覺得圖片太sb的可以自己改)

程式碼已開源!!

Git:

https://gitee.com/tang-and-han-dynasties/panghu-planebattle-esm.git

NPM:

panghu-planebattle-esm - npm (npmjs.com)

來我們來按照(我給的)檔案來試一遍能不能成功匯入這個遊戲

 (這tm要是失敗就尷尬了)

1.開一個資料夾新建一個vue專案

不會的來看這一篇部落格

第六十八篇：vue-cli新建專案

2.進行npm安裝包

3.去package裡面檢查一下

4.把檔案裡的程式碼複製到HelloWorld.vue檔案中

檔案地址:panghu-planebattle-esm: 胖虎的飛機大戰,下載後匯入,直接使用 (gitee.com)

誒,成了

5.改引數

有的人這時候就要開罵了,這什麼sb作者,放個這麼sb的背景

沒關係,可以改的嘛(其實就是教你改引數)

在node_modules檔案中找到相應的panghu-planebattle-esm包,

你自己Ctrl+Shift+F搜尋也行

來到設定項檔案config.js中

 我在img中放了一張額外的背景(以備不時之需)

順便再把所有敵機的生命調成1,然後,擊殺得分調成100,直接開啟無敵模式

好了,你無敵了

飛機都看不見直接秒殺了

6.存在問題

這個小遊戲目前還存在很多問題: 如:

　　1.英雄和敵機的撞擊判斷存在很多問題

//main.js中的全域性方法:
function checkHit() {
            // 遍歷所有的敵機
            for (let i = 0; i < enemies.length; i++) {
                //檢測英雄是否撞到敵機
                if (enemies[i].hit(hero)) {
                    //將敵機和英雄的destory屬性改為true
                    enemies[i].collide();
                    hero.collide();
                }
                
            }
        }

　　enemy物件中的hit方法(即碰撞判定方法)

hit(o) {
    let ol = o.x;
    let or = o.x + o.width;
    let ot = o.y;
    let ob = o.y + o.height;
    let el = this.x;
    let er = this.x + this.width;
    let et = this.y;
    let eb = this.y + this.height;
    if (ol > er || or < el || ot > eb || ob < et) {
      return false;
    } else {
      return true;
    }
  }

你應該看出來了,這是一個"正方形"判定,這會導致很多問題 例如,我的英雄還沒有"真正"碰到敵機,

而是英雄的左上角與敵機的右下角接觸 (想像兩個正方形接觸)

英雄的"身體"沒有碰到敵機的"身體" 就爆炸了

這會導致後期遊戲體驗非常差

　　2.這個遊戲不夠好玩  就如字面意思一樣,這個遊戲不夠好玩

7.歡迎加入我的倉庫,我們一起完善這個專案

如果你碰巧看到了這篇部落格

又碰巧對網頁小遊戲製作感興趣,

又碰巧有一定的js基礎

歡迎加入我的倉庫,我們一起完善這個專案

聯絡我:1072253914 (QQ) 或者通過我的部落格私信我