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

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

• 這是一個有趣的網頁小游戲包,使用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) 或者通過我的博客私信我