>

CF手游团队模式红色烟雾弹使用技巧,一个小而简

- 编辑:金沙网站3983 -

CF手游团队模式红色烟雾弹使用技巧,一个小而简

图片 1

画烟雾

图片 2

图片 3

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <style type="text/css">
//给canvas弄上一些效果
      html, body {
          position: absolute;
          margin: 0;
          width: 100%;
      }
      #hi{
        position: absolute;
        top: 40%;
        width: 100%;
        text-align: center;
      }
      #hi a {
        color: #fff;
        font-size: 80px;
        text-decoration: none;      
        font-family: Lobster;
      }
    </style>
    <body>
        <canvas id="canvas"></canvas>
    </body>
//根据自己的文件路径引入插件
    <script src="js/smoke.js"></script>
    <script type="text/javascript">
    var canvas = document.getElementById('canvas')
    var ctx = canvas.getContext('2d')
//设置画布宽高    
        canvas.width = innerWidth;
    canvas.height = innerHeight;

    var party = smokemachine(ctx, [54, 16.8, 18.2])
    party.start() //开始动画

    onmousemove = function (e) {
        var x = e.clientX;
        var y = e.clientY;
        var n = .5;
        var t = Math.floor(Math.random() * 200)   3800;
        party.addsmoke(x, y, n, t)
    }

    setInterval(function(){
        party.addsmoke(innerWidth/2, innerHeight, 1)
    }, 100)
    </script>
</html>

越来越多CF手游相关计策推荐↓↓↓

图片 4

弄完之后就能够在网页上,随着鼠标的运动,谷雾就生成了.

图片 5

来看标准的伍彩斑斓蒸发雾效果,不要感觉那必然是高级的装置,令你猜不到的是,“平流雾发生器”居然是我们小时候玩的“平流雾彩蛋”花炮,奥地利人也在玩,真有趣。

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 buffer = document.createElement('canvas'),
        bctx = buffer.getContext('2d')

    buffer.width = 20
    buffer.height = 20

    var opacities = [0,0,0,0,0,0,0,0,0,0,0,0,1,0,0,0,1,0,0,0,0,0,0,0,0,0,0,3,5,5,7,4,4,1,1,0,1,0,0,0,0,0,1,0,0,17,27,41,52,56,34,23,15,11,4,9,5,1,0,0,0,0,0,0,1,45,63,57,45,78,66,52,41,34,37,23,20,0,1,0,0,0,0,1,43,62,66,64,67,115,112,114,56,58,47,33,18,12,10,0,0,0,0,39,50,63,76,87,107,105,112,128,104,69,64,29,18,21,15,0,0,0,7,42,52,85,91,103,126,153,128,124,82,57,52,52,24,1,0,0,0,2,17,41,67,84,100,122,136,159,127,78,69,60,50,47,25,7,1,0,0,0,34,33,66,82,113,138,149,168,175,82,142,133,70,62,41,25,6,0,0,0,18,39,55,113,111,137,141,139,141,128,102,130,90,96,65,37,0,0,0,2,15,27,71,104,129,129,158,140,154,146,150,131,92,100,67,26,3,0,0,0,0,46,73,104,124,145,135,122,107,120,122,101,98,96,35,38,7,2,0,0,0,50,58,91,124,127,139,118,121,177,156,88,90,88,28,43,3,0,0,0,0,30,62,68,91,83,117,89,139,139,99,105,77,32,1,1,0,0,0,0,0,16,21,8,45,101,125,118,87,110,86,64,39,0,0,0,0,0,0,0,0,0,1,28,79,79,117,122,88,84,54,46,11,0,0,0,0,0,0,0,0,0,1,0,6,55,61,68,71,30,16,0,0,0,0,0,0,0,0,0,0,0,0,0,0,14,23,25,20,12,5,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,2,12,9,8,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,4,2,2,0,0,0,0,0,0,0,0]

    var data = bctx.createImageData(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]
        d[i 3]=opacities[i / 4]
    }

    bctx.putImageData(data,0,0)

    var imagewidth = 20 * 5
    var imageheight = 20 * 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(buffer, 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){
        context.clearRect(0, 0, context.canvas.width, context.canvas.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
    }

}

图片 6

图片 7

兑现三个小而简易的平流雾效果。
引入二个 smoke.js 的插件,就足以起首玩混合雾了。
最前边有插件的源代码

下载该游戏

图片 8

Smoke.js的行使文书档案

图片 9

Somke.js 的源代码

中档封烟 直接锁死狙击手

smokemachine(ctx,[r,g,b])
//[r,g,b] - (可选)我们想要的烟的颜色

party.start()//开始动画!

party.stop()//停止动画

party.addsmoke(X,Y,numberofparticles)

x,y - 应在画布中创建烟雾的坐标 ,   数量多 - 更多的烟雾

party.step(毫秒)//重新点燃烟雾

紫蓝蒸发雾弹在大战中散去的年华要比常见卡其灰冰雾弹更加持久一小点,而且鲜黄谷雾内是不只怕被武器准心所瞄准到(瞄准到准心不会变红),利用紫蓝的云烟突破仇敌民防空线是很好的团队应战格局!

本文由旅游发布,转载请注明来源:CF手游团队模式红色烟雾弹使用技巧,一个小而简