![](https://img-blog.csdnimg.cn/20201014180756925.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
VUE
文章平均质量分 79
tyler_download
这个作者很懒,什么都没留下…
展开
-
用硬实力,好作品,砸开阿里的前端开发金饭碗
本课程将使用VUE和WebPack实现若干个有趣生动的h5游戏,通过游戏的设计和编码,让你深入掌握前端开发的技术和框架,让你迅速进阶为满足BTA大厂需求的前端工程师。原创 2017-07-15 16:10:47 · 598 阅读 · 0 评论 -
VUE+WebPack前端游戏设计:实现物体的拖拽动态特效
上一节,我们介绍了太空版植物大战僵尸游戏的整体情况,并详解了如何建立游戏的基本框架,本节我们实现游戏中,道具的动态拖动特效,完成本节代码后,大家可以实现以下效果: 玩家先在底部的按钮中选择点击某个按钮,点击后图中的黄色方框会显示在页面上,这个方框是动态的,它会在指定位置一放一缩。当玩家在页面上移动鼠标时,方框会跟着鼠标移动,它会落入到鼠标所在的白色方块中。当玩家选定方块后,点击鼠标,那么在相原创 2018-02-03 17:47:44 · 1518 阅读 · 0 评论 -
VUE+WebPack前端游戏设计:实现外星人的动态下滑特效
在上一节,我们完成了道具在页面上的拖拽特效。当用户在页面底部点击按钮选择一个道具后,鼠标在页面上移动时,一个闪光方块会跟随着鼠标移动,一旦鼠标在页面上单击后,相应的道具就会出现在鼠标点击的地方。有了道具,本节我们要引入侵略外星人,完成本节代码后,可以得到如下效果: 页面上有两个外星人从高空徐徐下落,后面我们会开发代码,让用户拖拽的道具能阻止外星人的下滑,此处看不到动态效果,更详实的演示请...原创 2018-03-16 18:10:05 · 633 阅读 · 0 评论 -
VUE+WebPack前端游戏设计:实现外星人攻击建筑物时的冒烟效果
玩过红警或是星际的玩家都知道,当子弹或对手攻击建筑物时,建筑物会产生冒烟效果,并且逐步变形,当攻击足够大后,建筑物会爆炸毁灭,这种动态特效极大的增强了游戏的视觉观赏性和娱乐性,本节我们就实现外星人与玩家的道具碰撞时所产生的冒烟效果,这种效果提醒玩家道具正在遭受攻击,完成本节后,效果如下:文本难以观看动态效果,更详细的讲解和代码调试演示过程,请点击链接我们看看上图效果是如何实现的。我们先...原创 2018-03-23 16:45:03 · 561 阅读 · 0 评论 -
VUE+WebPack前端游戏设计:能量气泡的螺旋升腾特效
游戏的虚拟世界里与现实世界总有一一对应之处。例如在现实世界中,你不工作就不会有收入,而在游戏世界里,玩家不挖矿就没有能源,没有能源自然就无法购买道具或建造各种设备,于是游戏就无法进行。我们这次设计的前端游戏也是如此,必须提供一个机制给玩家获取资源以便用于创建各种道具,进而增强游戏的互动性。本节代码完成后效果如下,当玩家在页面上建造一个卫星道具后,每隔一段时间就会有一个能量泡从卫星处弹出,然后以...原创 2018-03-20 18:06:45 · 1077 阅读 · 0 评论 -
VUE+WebPack游戏设计:实现子弹发射击打外星人效果
本节将要实现的游戏效果是,当用户在页面上拖拽了一个炮台后,炮台会自动发射出子弹,当飞跃的子弹打中外星人时,外星人就会从页面上消失,本节代码完成后效果如下:我们看看代入如何实现。第一步是构建子弹对象,代码如下:// change 1 bullet (damageDeal) { var obj = new this.cjs.Container() ...原创 2018-05-03 17:15:05 · 598 阅读 · 0 评论 -
VUE游戏设计:实现外星人的攻击冲击波
游戏的趣味性在与各种关卡和难度,游戏的难度如上台阶,具有层层递进的性质。本节我们为太空防御游戏增加关卡功能,让游戏的难度由低到高,每一关我们称作一个冲击波,前面的冲击波,外星人的数量比较少,下落速度也相对较慢,等到后面的冲击波时,外星人的数量会越来越多,速度和攻击力越来越大,于是游戏的难度也逐渐变大。当完成本节代码后,我们会得到如下效果,在每一轮冲击波开始时,界面会出现如下信号: 当游戏...原创 2018-06-05 16:33:27 · 3134 阅读 · 0 评论 -
VUE+Webpack游戏设计:增加游戏战略性平衡和实现资源预加载
游戏的一个可玩性在于,让玩家在一种战略平衡中做抉择。例如我们在游戏开始时让玩家拥有120单位的能量,玩家可以采取以下几种步骤来开展游戏: 1.建筑一个卫星30E,一个炮台80E,然后还剩10E。然后等300毫秒后收集第一个能量泡,从而获得足够能源建造其他卫星或炮台。 2.连续建造两个卫星60E,剩下60E,等300毫秒后获取两个能量泡,从而获得总共260E的能量,然后玩家可以连续建造三个炮台。...原创 2018-06-08 18:05:49 · 1208 阅读 · 0 评论 -
VUE,使用物理引擎Box2D设计类愤怒小鸟的击球游戏--基本架构设置
我们都玩过愤怒的小鸟,该游戏一大特点是,两物体碰撞后,它会模拟现实世界物体碰撞后的反弹效果,因此游戏特别具有体感和逼真感,本节我们利用物理引擎Box2D,制作一个类似愤怒小鸟类型的碰撞游戏。游戏的基本玩法是,用鼠标点击小球,移动鼠标选择小球的发射方向,松开鼠标按钮后,小球按照鼠标指向的方向发射出去,一旦小球与障碍物碰撞后,它会像现实世界那样反复弹跳,如果一系列碰撞后,小球能停留在木架上,游戏就...原创 2018-06-29 15:29:38 · 1845 阅读 · 0 评论 -
VUE游戏开发:使用Box2D模拟球体的飞行和撞击特效
本节,我们将利用Box2d引擎在页面中实现球体飞行和撞击效果。在现实中我们向外抛出一个球时,它在重力加速度的情况下会飞出一个弧线,撞到物体后它会反弹折射,我们利用Box2D可以在页面里模拟这些特性。我们将在页面里绘制一个小球,然后设置一些障碍物,我们用鼠标控制小球向外抛出的方向,小球碰到障碍物后会像现实中一样发生反弹和折射。完成本节后,我们得到效果如下:如上图,右下角是一个圆球,左上角是障...原创 2018-07-11 11:02:26 · 866 阅读 · 0 评论 -
使用Box2D实现物体的碰撞检测和实现自动化背景布置
我们本节要实现的是,当用户把小球投入篮框,如果小球能从篮框中间漏下去,那么就可以算得分。这就需要我们进行碰撞检测,Box2D给我们提供良好机制能实现这点功能。我们在篮框的两个小方块之间构造一个物体,当小球击中这个物体时,就相当于穿越了篮框。我们现在两个小方块间增加一个长方体作为碰撞感应器,一旦小球穿过篮框时,一定会从两个小方块中间穿过,于是它一定会和中间的长方体碰撞,相应代码如下:cr...原创 2018-08-01 17:18:51 · 1201 阅读 · 0 评论 -
实现小球在弹射前的拉伸特效和动态障碍物特效
当前我们实现小球弹射时,会先用鼠标点击小球,然后移动鼠标,当松开鼠标时,小球会弹射向鼠标松开的位置。我们按住小球的时间越长,小球弹射的力度就越大,但有一个问题是,玩家并不知道,当前施加在小球上的推力有多大,这节我们就增加一个动画功能,当玩家在小球上点击鼠标时,小球前方会出现一个变动着的箭头,箭头的红色部分越多,表明小球被施加的推力就越大,我们实现功能后,效果如下: 当鼠标在小球身上按下时,有...原创 2018-08-07 09:20:10 · 624 阅读 · 0 评论 -
对Box2D的物理世界进行图像美化和关卡选择设计
我们用Box2D绘制了很多几何图形,例如圆形,矩形,复杂一点就是两个矩形交叉的合在一起,中间再加个圆形。显然这种界面“太素”了,一个丰富多彩,五彩斑斓的游戏世界显然不可能那么简陋,本节我们就看看如何让我们当前看似极简的游戏变得“声色犬马”起来。我们将使用上面的图案替换掉原来单调的集合图形,例如十字交叉的旋转障碍物将会被上图右下角的十字架给替换掉。我们看看代码是如何实现的:// ch...原创 2018-08-21 16:25:25 · 405 阅读 · 0 评论 -
寿司快卖,创建一个运行在电脑,手机及Pad上的多屏游戏
本节开始,我们将设计一个养成类游戏。游戏主题是创建一家寿司店,你是主厨,当客户点餐后,你根据菜单配置寿司。我们会先把游戏设计成页面游戏,然后通过不断的调试,将游戏移植到手机以及各类Pad上。该游戏设计的一个难点是自动适配屏幕,运行在浏览器上时,一般对应着电脑的大屏幕,当运行在手机或者Pad上时,屏幕会变小,因此我们在游戏代码设计时必须要考虑到这一点。上图就是我们要设计的游戏界面效果,这次游戏...原创 2018-10-10 17:24:27 · 472 阅读 · 0 评论 -
寿司快卖:实现游戏主流程--制作寿司和客户显示动画特效
上一节我们搭建了游戏的基本框架。游戏界面被分为若干个板块,其中一个板块显示了各种制作寿司的材料,它的目的是用于玩家根据信息组装各种寿司,本节我们进入游戏的主流程设计阶段,这节我们要完成的是如何将让玩家将各种材料组合成相应的寿司。首先我们先添加一些辅助函数,在gamescenecomponent.vue中添加代码如下:resizeCanvas () { // change 2 ...原创 2018-10-29 17:09:08 · 377 阅读 · 0 评论 -
VUE+WebPack:开发一款太空版植物大战僵尸的前端页游
从本节开始,我们探讨如何使用VUE和WebPack开发一款类似于植物大战僵尸的前端游戏,当游戏完成后,情况如下:更详细的讲解和代码调试演示过程,请点击链接游戏的设定如下,一系列外星飞船从天而降入侵地球,为了保护地球,玩家需要使用各种道具防止外星飞船落入底部的地球。如图所示,这些道具可以是箱子,也可以是卫星。当外星飞船被成功阻挡时,界面会弹出一系列奖章,也就是图片里面的”E”,点击这些奖原创 2018-01-31 17:46:55 · 1745 阅读 · 0 评论 -
VUE+WebPack精美游戏设计:实现像微信红包打开时钱币转动的动画精灵和页面数据的本地存储
实现像微信红包打开时钱币转动的动画精灵原创 2017-12-15 12:20:41 · 3730 阅读 · 0 评论 -
VUE+WebPack实现精美Html5游戏设计:纸牌战争
从本节开始,我们将使用VUE和WebPack进行一系列非常有趣的前端游戏开发,这节我们要开发的游戏称之为纸牌战争原创 2017-07-06 16:52:11 · 1926 阅读 · 0 评论 -
VUE+WebPack实现精美Html5游戏设计:cardBattle的启动场景设计
上一节,我们介绍了纸牌战争游戏的基本内容,本节我们进入游戏的具体设计和实现阶段。整个游戏分为三个场景,分别是启动场景,游戏场景,和结束场景。启动场景就是游戏正式开始前,页面显示给用户的启动界面,我们先看看这个启动界面是如何实现的。原创 2017-07-07 12:14:28 · 1491 阅读 · 0 评论 -
VUE+WebPack游戏设计:用CSS实现扑克牌翻转特效
用css实现扑克牌的翻转动画效果原创 2017-07-17 17:45:18 · 4944 阅读 · 1 评论 -
VUE+WebPack游戏设计:为对战扑克牌增加能力槽
本节,我们为对战的两种扑克牌添加能量槽,当扑克牌互相发射冲击波后,能量槽进行相应变化,从而显示出敌对双方的剩余能量。原创 2017-07-31 17:27:24 · 827 阅读 · 0 评论 -
VUE+WebPack游戏设计:实现两张扑克牌的逐对厮杀特效
使用最新CSS3技术实现动画特效原创 2017-07-26 16:47:37 · 1140 阅读 · 0 评论 -
Vue+WebPack游戏设计:自动背景贴图和游戏主循环的实现
通过自动贴图技术和游戏主循环,实现游戏场景自动向下滚动的特效原创 2017-08-28 17:24:00 · 804 阅读 · 0 评论 -
VUE+WebPack游戏设计:实现碰撞检测和动画精灵
实现碰撞检测和精灵动画原创 2017-09-08 12:02:21 · 1897 阅读 · 0 评论 -
VUE+WebPack游戏设计:'乘法防线'游戏设计
介绍新游戏‘乘法防线’的玩法,并讲解如何使用CreateJS第三方库在canvas上绘制复杂图形原创 2017-09-18 18:03:27 · 684 阅读 · 0 评论 -
VUE+WebPack游戏设计:实现盒子动画和键盘特效
通过游戏主循环实现盒子动画和键盘特性原创 2017-10-04 16:49:01 · 1254 阅读 · 0 评论 -
VUE+WebPack游戏设计:实现盒子爆破效果和界面美化
实现盒子爆破效果和界面美化原创 2017-10-05 17:31:00 · 1197 阅读 · 0 评论 -
VUE+WebPack游戏设计:欲望都市,构建类RPG游戏的开发
本节开始,我们将基于上一个项目所学到的知识,利用createjs 和 Tween两个图形绘制库开发一款新的游戏,名为欲望都市。这个游戏具备一个特点就是2.5D,它是一种经济系统构建型游戏原创 2017-11-02 16:20:09 · 4157 阅读 · 0 评论 -
VUE+WebPack游戏设计:欲望都市城市图层的设计
设计游戏的城市图层以及增加建筑选择面板原创 2017-11-04 16:46:14 · 618 阅读 · 0 评论 -
vue+webpack实现精美游戏设计:实现建筑物的渐变生成效果
像星际一样实现建筑物的渐变生成特效原创 2017-12-12 16:12:56 · 3199 阅读 · 1 评论 -
VUE+WebPack游戏开发:实现红警式的建筑物拖拽生成特效
实现像红警一样建筑物建设时的拖拽效果原创 2017-11-27 16:48:21 · 1931 阅读 · 2 评论 -
寿司开卖:实现寿司制作特效和音响特效
本节我们将继续上一节完成若干个小功能。首先要完成的是,当客户动画在主页面出现时,它左上角会冒泡,显示它想购买何种寿司,此时玩家可以点击左下角面板中各种元素,组合成客户想要的寿司,其效果图如下:如上图客户显示想要鱿鱼寿司,于是我们点击左下角面板的第一和第二章图片,那么就能在右下角面板出现想要寿司图片,然后此时再次点击客户动画图像即可完成售卖过程,我们看看实现代码。data () { ...原创 2018-11-13 12:26:40 · 319 阅读 · 0 评论