随笔分类 - Html飞机大战
使用js+canvas实现的网页飞机大战
摘要：好家伙,我的包终于开发完啦 欢迎使用胖虎的飞机大战包!! 为你的主页添加色彩 这是一个有趣的网页小游戏包,使用canvas和js开发 使用ES6模块化开发 效果图如下: (觉得图片太sb的可以自己改) 代码已开源!! Git: https://gitee.com/tang-and-han-dynas
阅读全文
摘要：好家伙, 代码已开源 Git: https://gitee.com/tang-and-han-dynasties/panghu-planebattle-esm.git NPM: panghu-planebattle-esm - npm (npmjs.com) 现在,比如说,我用Vue写好了个人博客主
阅读全文
摘要：好家伙, 飞机大战分包分的差不多了, 但是又出现了问题: 文件目录如下: 然而关于变量 helloworld.vue完整代码 <template> <div> <div ref="stage"></div> </div> </template> <script> // Award, // Bulle
阅读全文
摘要：好家伙,好久好久没有更新这个系列了 为了使文档更方便阅读,使代码更容易维护,来把这个飞机大战模块化 项目已开源: https://gitee.com/tang-and-han-dynasties/airplane-battle h.git 项目结构如下: 最大的改动是主启动类进行了修改: 我们将曾经
阅读全文
摘要：好家伙，继续优化， 好家伙，我把我的飞机大战发给我的小伙伴们玩 期待着略微的赞赏之词，然后他们用手机打开我的给他们的网址 然后点一下飞机就炸了。 游戏体验零分 （鼠标点击在移动端依旧可以生效） 好了所以我们来优化一下这个触屏移动事件 由于没有参考，就去翻文档了 触摸事件分三个：touchstart、
阅读全文
摘要：好家伙, 我们先来尝试完成一个最简单的功能 正面buff: 1.消灭全图敌机 我们要先找一个好看一点的素材 把背景弄成透明的(搞了好久),感谢度娘的技术支持Photoshop中如何把图片的背景变成透明的-百度经验 (baidu.com) 你问我为什么是篮球? 只因你太美 为了方便测试,我们先弄个测试
阅读全文
摘要：好家伙, 我的飞机大战部署上线了 胖虎的飞机大战 感兴趣的可以去玩一下 （怕有人接受不了这个背景，我还贴心的准备切换背景按钮，然而这并没有什么用） 现在，我们停下脚步，重新审视这个游戏 现在基本的框架都弄出来了，敌机，英雄，子弹，分数，生命 但是，这个“游戏“有个非常致命的问题， 他不好玩，（不好玩
阅读全文
摘要：好家伙，这章让我感受到了面向对象的优势了 1.分数设置 每个种类的敌机分数都设置好了， 那么当我们击毁不同的敌机后，加上不同的分数就行了 但是我们还是要想一下， 我要在哪里放这个分数增加的方法 两个思路 1.在敌机的生命值耗尽后，增加该敌机对应的分数 2.在敌机被删除后，增加该敌机对应的分数 显然第
阅读全文
摘要：好家伙,本篇介绍如何添加暂停状态 按照惯例我们依旧先分析思路 什么时候游戏应该暂停? 当我的鼠标不在游戏画面内了,我们就可以直接暂停了 在当我的鼠标回来以后,我们继续进行游戏 所以我们可以监听一个鼠标移动事件, 当它的xy坐标超过某个值的时候, 我们改变游戏的状态 当然我们有更好的方法, 事件监听方
阅读全文
摘要：好家伙，基本的功能都做完了，来补充一个结束状态的游戏结束文案 上代码: case END: //给我的画笔设置一个字的样式 //后面写出来的字都是这个样式的 context.font = "bold 24px 微软雅黑"; context.textAlign = "center"; context.
阅读全文
摘要：好家伙，这篇写英雄撞机爆炸 我们先把子弹销毁弄上去 子弹穿过敌机，敌机爆炸后消失，子弹同样也应该销毁，（当然后续会考虑穿甲弹） 然后我们还要把主角碰撞爆炸检测也加上去 因为他们共用一个思路，所以我们把他写在一起 我们会为子弹和英雄都添加一个destory属性 在碰撞检测完成后，我们调用一个方法去把这
阅读全文
摘要：好家伙，本篇是带着遗憾写完的。 很遗憾，我找了很久，找到了bug但并没有成功修复bug 再上一篇中我们看到 子弹射中了敌机，但是敌机并没有消失，所以这篇我们要来完善这个功能 按照惯例我们来捋一下思路： 看看表面的物理逻辑： 子弹击中敌机=>敌机爆炸=>敌机消失=>子弹消失 敌机爆炸=>敌机消失=>子
阅读全文
摘要：好家伙，本篇介绍敌机 好了,按照惯例我们来理一下思路: 我们有一个敌机类,第一步当然是实例一个敌机对象, 然后我们把这个敌机放入我们的敌机群(敌机数组) 然后是熟悉的移动和绘制 那我们回顾一下子弹的生成逻辑 变量： 子弹 bullet 弹夹（用来装子弹的东西）bulletList[] 方法：装填子弹
阅读全文
摘要：好家伙，这应该是这个小游戏最难的几个点之一了 现在我们要做出子弹射击的效果我们应该如何处理? 1.首先我们要确定几个变量和方法的关系 变量： 子弹 bullet 弹夹（用来装子弹的东西）bulletList[] 方法：装填子弹 绘制子弹 移动子弹 子弹发射的物理逻辑是很简单的： 生产第一个子弹，推入
阅读全文
摘要：好家伙,终于到子弹了 我们先来理一理思路: 子弹由飞机射出,所以我们把发射子弹的方法写在英雄类中 当然了,子弹也必须有自己独立的类 后期会有很多子弹射出,所以一个个将子弹类实例化肯定是不对的 我们也需要一个弹夹(一个数组)去装子弹(子弹对象) 我们先把第一个子弹渲染到飞机的头上 开搞: 1.子弹的配
阅读全文
摘要：好家伙，这篇移动主角 我们先来看看一个好东西， addEventListener() 方法 (他真的很好用) 我们直译一下,就叫他添加事件监听器方法 而可监听的对象就有很多啦 我们来了解一下 事件类型: Web浏览器中可以发生很多种事件。如前所述，所发生事件的类型决定了事件对象中会保存什么信息。 D
阅读全文
摘要：好家伙， 遇到了一些非常奇怪的bug index.html:179 Uncaught TypeError: Failed to execute 'drawImage' on 'CanvasRenderingContext2D': The provided value is not of type '
阅读全文
摘要：好家伙，接着写 既然我们涉及到状态了，那么我们也会涉及到状态的切换 那么我们怎样切换状态呢? 想象一下，如果我玩的游戏暂停了，那么我们肯定是通过点击或者按下某个按键来让游戏继续 这里我们选择添加点击事件来切换游戏状态 1.我们给canvas对象添加一个点击事件用于切换状态 canvas.addEve
阅读全文
摘要：好家伙, 1.为飞机大战定义状态 1.开始 START 有一个飞机大战LOGO &天空 2.开始时 STRATING 有一个飞机加载的界面&天空 3.运行时 RUNNING 我方飞机&敌方飞机&天空 4.暂停 PAUSE 暂停按钮 5.结束按钮 ENDING 结束字样（game over） 基础架构
阅读全文
摘要：好家伙， 我们为了后续工作的顺利进行，我试着把每一个模块封装为对象 但冻手之前还是要构思一下 我们把天空封装成一个类: 1.来搞一手简单的对象分析: 属性方面的都好理解 来说明一下方法: (1) paint方法: 我们把图片的渲染封装成一个独立的方法 然后我们知道图片的移动是通过y1,y2++来实现
阅读全文
浙公网安备 33010602011771号