2 FEWY

尚未进行身份认证

暂无相关描述

等级
博文 70
排名 1w+

CSS 绘制各种形状

说明使用CSS可以绘制出许多形状,比如三角形、梯形、圆形、椭圆,等并不只是可以绘制矩形。下面来看看怎么实现这些形状的吧。为了容易理解,文章分为基本形状和组合形状来说,基本形状是比较容易实现的,而利用这些基本形状进行组合,就可以实现稍微复杂点的组合形状了。基本形状三角形.triangle{width:0;height:0;border:50p...

2019-06-19 17:45:17

学习 PixiJS — 小精灵冒险

说明玩游戏小精灵冒险!在本章的源文件(pixiePerilousness.html)中,您可以使用本书中学到的大多数工具制作一个简单游戏的绝佳示例。点击屏幕让小精灵飞起来,帮助她在15个支柱的间隙中导航到达终点,如图7-7所示。当她飞过球场时,跟随着她的多彩仙女尘埃的痕迹。如果她撞到其中一块绿色的砖块,她会在一阵灰尘中爆炸。但是,如果她设法通过所有15个支柱之间日益缩小的差距,她会达到一个巨大的...

2019-03-11 21:19:14

学习 PixiJS — 交互工具

说明Pixi内置一组功能有限的用于鼠标交互和触摸交互的方法,但是对于游戏和应用程序所需的丰富交互性,建议使用第三方库来简化操作,这篇文章介绍的是Tink库,它有通用的Pointer对象、拖放精灵、按钮对象、键盘控制等一些有用的功能。使用Tink库要开始使用Tink,首先直接用script标签,引入js文件。<scriptsrc="ht

2019-03-04 21:54:49

学习 PixiJS — 碰撞检测

说明碰撞检测,用来检查两个精灵是否接触。Pixi没有内置的碰撞检测系统,这里我们使用一个名为Bump的库,Bump是一个易于使用的2D碰撞方法的轻量级库,可与Pixi渲染引擎一起使用。它为你提供了制作大多数2D动作游戏所需的所有碰撞工具。使用Bump库要开始使用Bump,首先直接用script标签,引入js文件然后创建它的实例,在构造函数中提供要使用的渲染器(d...

2019-02-25 11:33:51

学习 PixiJS — 补间动画

说明补间动画指的是,我们可以为精灵的位置,比例或alpha等属性,设置开始值和结束值,中间需要的动画帧由计算机自动计算填充。Pixi没有内置补间引擎,但是你可以使用很多很好的开源的补间库,比如Tween.js和Dynamic.js。如果要制作非常专业的自定义补间效果,请使用这两个库中的任何一个。但是现在我们要使用的是一个名为Charm.js的专门用于Pixi的补间库。使用...

2019-02-18 15:05:29

学习 PixiJS — 视觉效果

平铺精灵平铺精灵。这些是特殊的精灵,以网格图案在其表面上重复图像。您可以使用它们轻松创建无限滚动的背景效果。要创建平铺精灵,请使用带有三个参数的TilingSprite类(PIXI.extras.TilingSprite):纹理,宽度和高度。lettilingSprite=newTilingSprite(texture,width,height);除此之外,平铺精灵具有与常规精...

2019-02-03 08:43:39

学习 PixiJS — 粒子效果

你如何创造火,烟,魔法和爆炸等效果?你制作了许多小精灵,几十,几百,甚至上千个精灵。然后对这些精灵应用一些物理效果,使它们的行为类似于你尝试模拟的元素。你还必须给他们一些关于它们应该如何出现和消失以及应该形成什么样的模式的规则。这些微小的精灵被称为粒子。你可以使用它们为游戏制作各种特效。使用Dust库Pixi没有内置的制作粒子效果的功能,但你可以使用一个名为Dust的轻量级的库来帮助...

2019-01-22 08:34:51

学习 PixiJS — 精灵状态

精灵状态如果你有复杂的游戏角色或交互式对象,你可能希望该角色根据游戏环境中发生的情况以不同的方式运行。每个单独的行为称为状态。如果你在精灵上定义状态,那么只要游戏中出现与该状态相对应的事件,就可以触发这些状态。比如,通过键盘的方向键控制一个游戏角色时,按下左箭头,角色就向左移动,其实可以理解为,按下左键头时,触发了角色的向左的状态。如果要开始使用精灵状态,首先需要一个状态播放器。状态播放器...

2019-01-19 17:41:00

学习 PixiJS — 动画精灵

说明看完官方教程中提到的这本书—LearnPixi.js,准备写写读后感了,官方教程中所说的内容,基本上就是书的前4章,所以我就从第5章开始写写吧。...

2019-01-14 08:38:25

开始学习 PixiJS

PixiJSPixi是一个超快的2D渲染引擎。这意味着什么呢?这意味着它会帮助你用JavaScript或者其他HTML5技术来显示媒体,创建动画或管理交互式图像,从而制作一个游戏或应用。它拥有语义化的,简洁的API接口并且加入了一些非常有用的特性。比如支持纹理贴图集和为精灵(交互式图像)提供了一个简单的动画系统。它也提供了一个完备的场景图,你可以在精灵图层里面创建另一个精灵,当然也可以让精灵响应...

2018-11-26 20:47:39

关于 ES6 中 Promise 的面试题

说明题目一

2018-10-29 13:12:45

用 canvas 的 getImageData 做点有趣的事

说明canvas元素标签强大之处在于可以直接在HTML上进行图形操作,具有极大的应用价值。canvas可以实现对图像的像素操作,这就要说到getImgData方法了。解释CanvasRenderingContext2D.getImageData()返回一个ImageData对象,用来描述canvas区域隐含的像素数据,这个区域通过矩形表示,起始点为(sx,sy...

2018-09-19 09:38:26

学习 canvas 的 globalCompositeOperation 做出的神奇效果

说明最早知道context的globalCompositeOperation属性,是在实现一个刮刮卡效果的时候,这次又学习一次,希望能加深理解吧。先来看下context的globalCompositeOperation属性,具体是干什么的吧。...

2018-08-30 13:41:08

小程序—九宫格心形拼图

说明前几天在朋友圈看到好几次这种图片。这种图片,是用九张图片拼成的一个心形。感觉很有趣,就上网查了查怎么做,大部分的说法就是用美图秀秀的拼图功能来做,在微信小程序中也有专门做心形拼图的小程序,我都试了试之后,感觉还可以更加简单一些,于是我就自己做了个小程序。实现小程序的思路1、有两个canvas,一个小的canvas显示最后会是什么样子,一个大的canv...

2018-07-31 15:10:06

毕业一年时的反思

这篇文章,想对毕业后的这第一年做一个总结,也算反思反思,这篇文章不会提任何的技术,但是讲的笑话会挺多。开始正文。某一段时间,我的办公室变得非常的大,我估算应该是有400平米了,恩,我没有写错是400,我和同学开玩笑说,我是**8楼扛把子,你要是来找我,空调你随便开,位置你随便坐。为什么我的办公室那么大???按老板的意思说,我是经历住考验的人,那会我们公司在一个重创空间里创...

2018-07-14 19:29:45

JavaScript中的函数重载(Function overloading)

说明JavaScript中没有真正意义上的函数重载。函数重载函数名相同,函数的参数列表不同(包括参数个数和参数类型),根据参数的不同去执行不同的操作。我们举个例子看看functionoverload(a){console.log('一个参数')}functionoverload(a,b){console.log('两个参数')}//在...

2018-07-10 15:46:04

一个浪漫又悲情的爱情故事——笛卡尔心形线

说明写这篇文章是某天看到这样一个公式r=a(1-cosθ),我上网搜了下,原来是笛卡尔心形线的极坐标方程,这个方程里的确有一个浪漫又悲情的爱情故事,感兴趣的朋友可以点这里看看,而至于这个故事是真是假,这并不重要。而这篇文章的目的是要用前端的方式,画出笛卡尔心形线。本来我想,这么经典的公式,网上应该已经有人实现过了的吧。我搜了搜,不得不佩服网友们,有Java实现的,有C#...

2018-06-06 10:52:50

CSS中用 opacity、visibility、display 属性将 元素隐藏 的 对比分析

说明opacity用来设置透明度display定义建立布局时元素生成的显示框类型visibility用来设置元素是否可见。opacity、visibility、display这三个属性分别取值0、hidden、none都能使元素在页面上看不见,但是他们在方方面面都还是有区别的。是否占据页面空间例子<!doctypehtml&a

2018-05-27 21:41:30

JavaScript实现爆炸碎片的 图片切换 效果

说明和大家分享一个看上去很酷的效果,先来看效果图吧!解释实现这个效果的思路就是,一个大的div元素,设置好一个背景,生成一定数量小的div元素,背景设置成同样的图片,但是每个小div元素的background-position属性值不同,整齐的覆盖在大的div元素上,这样就能拼成一张完整的背景图,鼠标移入时,让所有小的div元素移动和变形。总的来说就是两步:1...

2018-05-09 10:58:37

JavaScript实现 超范围的数 相加

问题实现字符串类型的数字相加的一个方法。比如:输入'11111111111111111','22222222222222222',返回'33333333333333333'解决思路JavaScript能表示的最大安全整数是9007199254740991,可以用APINumber.MAX_SAFE_INTEGER看一下超出范围就会发生精度丢失,...

2018-04-27 11:34:02
CSDN身份
  • 博客专家
奖章
  • 专栏达人
    专栏达人
    授予成功创建个人博客专栏的用户。专栏中添加五篇以上博文即可点亮!撰写博客专栏浓缩技术精华,专栏达人就是你!
  • 持之以恒
    持之以恒
    授予每个自然月内发布4篇或4篇以上原创或翻译IT博文的用户。不积跬步无以至千里,不积小流无以成江海,程序人生的精彩需要坚持不懈地积累!