专栏首页Golang语言社区【Golang语言社区--H5编程】smoke.js

【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)

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

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

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

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Oculus + Node.js + Three.js 打造VR世界

    Oculus Rift 是一款为电子游戏设计的头戴式显示器。这是一款虚拟现实设备。这款设备很可能改变未来人们游戏的方式。 周五Hackday Showcase的...

    李海彬
  • 【JS游戏编程基础】关于js里的this关键字的理解

    this关键字在c++,java中都提供了这个关键字,在刚开始学习时觉得有难度,但是只要理解了,用起来就方便多了,下面通过本篇文章给大家详解js里this关键字...

    李海彬
  • 社区开源框架网络模块:ConnectionManager详解

    地址:https://github.com/Golangltd/LollipopCreator

    李海彬
  • 深入理解JavaScript系列(37):设计模式之享元模式

    享元模式(Flyweight),运行共享技术有效地支持大量细粒度的对象,避免大量拥有相同内容的小类的开销(如耗费内存),使大家共享一个类(元类)。

    用户4962466
  • 前端AES的加密和解密

    在工作的过程中,经常要对一些数据做一些加密,当然有复杂的加密和简单的加密,也有对称加密等等。总之加密的方式有很多。今天在这里,我只是简单的分享一个我最近遇到的加...

    用户1174387
  • JavaScript中常见的十五种设计模式

    在JavaScript中并没有类这种概念,JS中的函数属于一等对象,在JS中定义一个对象非常简单(var obj = {}),而基于JS中闭包与弱类型等特性,在...

    书童小二
  • 面向对象+模块化设计绘制canvas星空动画

    require.js的相关内容已在我的博文 《requireJs的使用,以canvas绘制星空为例》中描述, 可查看:https://cloud.tencent...

    lonelydawn
  • 微信小游戏1

    游戏内容介绍 游戏作品内容准确介绍〔包括但不限于:游戏背景、扮演角色、游戏角色(NPC)、场景、主要情节、玩法、功能(系统)、主要特点、游戏使用方法等〕,须逐...

    达达前端
  • javascript中常用的设计模式,教你写出更好的前端代码

    今天给大家介绍js中常用的设计模式,也让自己对js设计模式有一个更清晰的认识,下面我们直接进入今日的主题

    前端老鸟

扫码关注云+社区

领取腾讯云代金券