好家伙,我的包終于開發完啦
歡迎使用胖虎的飛機大戰包!! 為你的主頁添加色彩
- 這是一個有趣的網頁小游戲包,使用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) 或者通過我的博客私信我
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/550581.html
標籤：其他
下一篇：CSS—相對單位rem