好家伙,我的包終於開發完啦 歡迎使用胖虎的飛機大戰包!! 為你的主頁添加色彩 這是一個有趣的網頁小游戲包,使用canvas和js開發 使用ES6模塊化開發 效果圖如下: (覺得圖片太sb的可以自己改) 代碼已開源!! Git: https://gitee.com/tang-and-han-dynas ...
好家伙,我的包終於開發完啦
歡迎使用胖虎的飛機大戰包!! 為你的主頁添加色彩
- 這是一個有趣的網頁小游戲包,使用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) 或者通過我的博客私信我
