我的第一个NPM包:panghu-planebattle-esm(胖虎飞机大战)使用说明

笑忍苦

好家伙,我的包终于开发完啦
 
欢迎使用胖虎的飞机大战包!! 为你的主页添加色彩

• 这是一个有趣的网页小游戏包,使用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.英雄和敌机的撞击判断存在很多问题

1. <strong>//main.js中的全局方法:
2. function checkHit() {
3.             // 遍历所有的敌机
4.             for (let i = 0; i < enemies.length; i++) {
5.                 //检测英雄是否撞到敌机
6.                 if (enemies[i].hit(hero)) {
7.                     //将敌机和英雄的destory属性改为true
8.                     enemies[i].collide();
9.                     hero.collide();
10.                 }
11.                
12.             }
13.         }</strong>

复制代码

　　enemy对象中的hit方法(即碰撞判定方法)

1. <strong>hit(o) {
2.     let ol = o.x;
3.     let or = o.x + o.width;
4.     let ot = o.y;
5.     let ob = o.y + o.height;
6.     let el = this.x;
7.     let er = this.x + this.width;
8.     let et = this.y;
9.     let eb = this.y + this.height;
10.     if (ol > er || or < el || ot > eb || ob < et) {
11.       return false;
12.     } else {
13.       return true;
14.     }
15.   }</strong>

复制代码

你应该看出来了,这是一个"正方形"判定,这会导致很多问题 例如,我的英雄还没有"真正"碰到敌机,
而是英雄的左上角与敌机的右下角接触 (想像两个正方形接触)
英雄的"身体"没有碰到敌机的"身体" 就爆炸了
 
这会导致后期游戏体验非常差
 
　　2.这个游戏不够好玩  就如字面意思一样,这个游戏不够好玩
 
7.欢迎加入我的仓库,我们一起完善这个项目

如果你碰巧看到了这篇博客
又碰巧对网页小游戏制作感兴趣,
又碰巧有一定的js基础
 
欢迎加入我的仓库,我们一起完善这个项目
联系我:1072253914 (QQ) 或者通过我的博客私信我

来源:https://www.cnblogs.com/FatTiger4399/p/17330574.html
免责声明：由于采集信息均来自互联网，如果侵犯了您的权益，请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容，谢谢合作！