【Golang语言社区--H5编程】smoke.js

大家好,我是社区主编彬哥,今天给大家带来的H5游戏编程中,烟雾特效的js库;

源码如下

var smokemachine = function (context, color){
 color = color || [24, 46.8, 48.2]
 var polyfillAnimFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame ||
   window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
 var lastframe;
 var currentparticles = []
 var pendingparticles = []
 var smokeimage = new Image();
 smokeimage.src = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAQAAAAngNWGAAAACXBIWXMAAAsTAAALEwEAmpwYAAADGGlDQ1BQaG90b3Nob3AgSUNDIHByb2ZpbGUAAHjaY2BgnuDo4uTKJMDAUFBUUuQe5BgZERmlwH6egY2BmYGBgYGBITG5uMAxIMCHgYGBIS8/L5UBFTAyMHy7xsDIwMDAcFnX0cXJlYE0wJpcUFTCwMBwgIGBwSgltTiZgYHhCwMDQ3p5SUEJAwNjDAMDg0hSdkEJAwNjAQMDg0h2SJAzAwNjCwMDE09JakUJAwMDg3N+QWVRZnpGiYKhpaWlgmNKflKqQnBlcUlqbrGCZ15yflFBflFiSWoKAwMD1A4GBgYGXpf8EgX3xMw8BSMDVQYqg4jIKAUICxE+CDEESC4tKoMHJQODAIMCgwGDA0MAQyJDPcMChqMMbxjFGV0YSxlXMN5jEmMKYprAdIFZmDmSeSHzGxZLlg6WW6x6rK2s99gs2aaxfWMPZ9/NocTRxfGFM5HzApcj1xZuTe4FPFI8U3mFeCfxCfNN45fhXyygI7BD0FXwilCq0A/hXhEVkb2i4aJfxCaJG4lfkaiQlJM8JpUvLS19QqZMVl32llyfvIv8H4WtioVKekpvldeqFKiaqP5UO6jepRGqqaT5QeuA9iSdVF0rPUG9V/pHDBYY1hrFGNuayJsym740u2C+02KJ5QSrOutcmzjbQDtXe2sHY0cdJzVnJRcFV3k3BXdlD3VPXS8Tbxsfd99gvwT//ID6wIlBS4N3hVwMfRnOFCEXaRUVEV0RMzN2T9yDBLZE3aSw5IaUNak30zkyLDIzs+ZmX8xlz7PPryjYVPiuWLskq3RV2ZsK/cqSql01jLVedVPrHzbqNdU0n22VaytsP9op3VXUfbpXta+x/+5Em0mzJ/+dGj/t8AyNmf2zvs9JmHt6vvmCpYtEFrcu+bYsc/m9lSGrTq9xWbtvveWGbZtMNm/ZarJt+w6rnft3u+45uy9s/4ODOYd+Hmk/Jn58xUnrU+fOJJ/9dX7SRe1LR68kXv13fc5Nm1t379TfU75/4mHeY7En+59lvhB5efB1/lv5dxc+NH0y/fzq64Lv4T8Ffp360/rP8f9/AA0ADzT6lvFdAAAAIGNIUk0AAHolAACAgwAA+f8AAIDpAAB1MAAA6mAAADqYAAAXb5JfxUYAAAF/SURBVHjafNNdTxNBFMbx385ut2mhpS1gjRA1JBjjhaJX+hH44n4AvRCvFG1E6kuAUtza7Y4XfVGIem4mmfnPOXPO84zoH5FcX7Mbx6mAYIYZVnmyxa2Irqa2NZmhsUJpoqZUikswIrGr56dLdzRdGJtIXZj5KhGz1Use6UrVNe2bCV4Kxkrn1lWuwgJ8oC7R1PfQFdoOrOkq0VBblq5LBbfk1m3acaI0dGmqb+BUtOixKdoQNWxqykWvjKQqU4lcMgcrXYWo0tLR0nAgc+jQlg0dvd+lz2wbe6ISFT4KHjuya0suVTqxGu+ljh96Cl2Jlp4DiSATjKXzjJVz9wRMbTs18k5L8EWu9N66b2JYKXRuhO8ypbYX9owUioU6VRLnqt91X66vsGfgGY7kBl47niu3BDtqRvY9d9vEsb7Phk68vW4KziR27BnqqEl88kFh8Ifr4tJwiSj3VK4u9caFs2v2XIHzaGsIpgoT0/+Bc0FnouKGpf/yFTJBuLn5awAGz32g+KVMGQAAAABJRU5ErkJggg=="
 var buffer = document.createElement('canvas'),
 bctx = buffer.getContext('2d')
 buffer.width = 20
 buffer.height = 20
 bctx.drawImage(smokeimage,0,0,20,20)
 var data = bctx.getImageData(0,0,20,20)
 var d = data.data
 for(var i=0;i<d.length;i+=4){
 d[i]=color[0]
 d[i+1]=color[1]
 d[i+2]=color[2]
 }
 bctx.putImageData(data,0,0)
 smokeimage.src = buffer.toDataURL('img/png')
 var imagewidth = smokeimage.width*5
 var imageheight = smokeimage.height*5
 function particle(x,y,l){
 this.x = x
 this.y = y
 this.age = 0
 this.vx = (Math.random()*8-4)/100
 this.startvy = -(Math.random()*30+10)/100
 this.vy = this.startvy
 this.scale = Math.random()*.5
 this.lifetime = Math.random()*l+l/2
 this.finalscale = 5+this.scale+Math.random()
 this.update = function(deltatime){
 this.x+=this.vx*deltatime
 this.y+=this.vy*deltatime
 var frac = Math.pow((this.age)/this.lifetime,.5)
 this.vy = (1-frac)*this.startvy
 this.age+=deltatime
 this.scale=frac*this.finalscale
 }
 this.draw = function(){
 context.globalAlpha = (1-Math.abs(1-2*(this.age)/this.lifetime))/8
 var off = this.scale*imagewidth/2
 var xmin = this.x-off
 var xmax = xmin+this.scale*imageheight
 var ymin = this.y-off
 var ymax = ymin+this.scale*imageheight
 context.drawImage(smokeimage, xmin, ymin, xmax-xmin, ymax-ymin);
 }
 }
 function addparticles(x,y,n,lifetime){
 lifetime = lifetime || 4000
 n = n || 10
        if(n < 1) return Math.random() <= n && pendingparticles.push(new particle(x,y,lifetime));
 for (var i = 0; i < n; i++) {
 pendingparticles.push(new particle(x,y,lifetime))
 };
 }
 function updateanddrawparticles(deltatime){
        bctx.clearRect(0, 0, buffer.width, buffer.height); 
 deltatime = deltatime || 16
 var newparticles = []
 currentparticles = currentparticles.concat(pendingparticles)
 pendingparticles = []
 currentparticles.forEach(function(p){
 p.update(deltatime)
 if (p.age<p.lifetime){
 p.draw()
 newparticles.push(p)
 }
 })
 currentparticles = newparticles
 }
 function frame(time){
 if(running){
 var deltat = time-lastframe
 lastframe = time;
 updateanddrawparticles(deltat)
 polyfillAnimFrame(frame) 
 }
 }
 var running = false
 function start(){
 running = true
 polyfillAnimFrame(function(time){
 lastframe = time
 polyfillAnimFrame(frame)
 }) 
 }
 function stop(){
 running = false
 }
 return {
 start:start,
 stop:stop,
 step: updateanddrawparticles,
 addsmoke: addparticles
 }
}

原文发布于微信公众号 - Golang语言社区(Golangweb)

原文发表时间:2017-05-25

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏我和我大前端的故事

我不知道你知不知道我知道的伪元素小技巧

伪元素能做什么?我们要他有何用?它能为我们解决什么问题?和其他的方法相比她有什么有点?我们为什么要使用它?

11720
来自专栏Android先生

自定义view实现超萌动感小炸弹

Hello,小伙伴们,我回来了。这些日子有的小伙伴问我怎么没有更新了。这个其实是有原因,首先,最近有点忙。其次没有看到什么觉得好玩的动画!最后,就是我更新过了!...

12820
来自专栏Coco的专栏

谈谈一些有趣的CSS题目(十三)-- 巧妙地制作背景色渐变动画!

20470
来自专栏木子昭的博客

几个好玩的flex布局案例Flex是个不错的东西,看懂上面三个Demo也就算入门了,如果要了解更全面的内容, 推荐阮一峰老师的 Flex 布局教程语法篇

弹性盒子布局flex,为自适应布局而生 弹性盒子布局的选项很多(选项越多->越专业->越难记), 但对于普通的开发者,只要记住两三个关键词,就能满足大多数的需...

72660
来自专栏IMWeb前端团队

浅谈CSS3多列布局

相信大家都看过报纸,报纸上的内容大多数都是分栏显示的,如下图所示: ? 对于前端攻城狮来说,这种分列布局,在以前虽然可以实现,可是难度却是不小,工作量很大,必须...

21080
来自专栏Android机动车

使用Span实现各种酷炫效果

前一段时间一直在做富文本展示和文本处理,主要用到了Html.fromHtml()实现加载网页,但实现整段文本的某些特殊如个别文字的点击,改背景色、前景色等效果,...

20730
来自专栏IMWeb前端团队

css设计中的不变与可变

"人活一世,有人成了面子,有人成了里子,都是时势使然。”——《一代宗师》 如果重构分里子与面子的话,那么html应该是负责里子的,而css就是负责面子了。在上篇...

24060
来自专栏别先生

jQuery的简单入门练习

1 <html> 2 <head> 3 <meta charset="utf-8"> 4 <title>jQuery的练习</title> ...

26770
来自专栏HTML5学堂

CSS3动画,为你带来极致的视觉体验!

HTML5学堂:随着网络的发展,浏览器具有更强的渲染与高级代码的执行能力。所以在当前,大量的动画效果由原来的JavaScript制作正慢慢的被CSS3所替代,究...

34970
来自专栏偏前端工程师的驿站

CSS魔法堂:重拾Border之——不仅仅是圆角

前言  当CSS3推出border-radius属性时我们是那么欣喜若狂啊,一想到终于不用再添加额外元素来模拟圆角了,但发现border-radius还分水平半...

23950

扫码关注云+社区

领取腾讯云代金券