javascript - 多个随机图像让它下雪插件

javascript - 多个随机图像让它下雪插件,第1张

我一直在和杰森·布朗一起玩,让它下雪插件。 他的代码只适用于单个自定义图像,我一直试图找出如何更改代码,以便在随机范围内容纳多个自定义图像。

!function($){  
var defaults = {
speed: 0,
interaction: true,
size: 2,
count: 200,
opacity: 0,
color: "#ffffff",
windPower: 0,
image: false
};
  $.fn.let_it_snow = function(options){
var settings = $.extend({}, defaults, options),
    el = $(this),
    flakes = [],
    canvas = el.get(0),
    ctx = canvas.getContext("2d"),
    flakeCount = settings.count,
    mX = -100,
    mY = -100;
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;

(function() {
    var requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame ||
    function(callback) {
        window.setTimeout(callback, 1000 / 60);
    };
    window.requestAnimationFrame = requestAnimationFrame;
})();

function snow() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);

    for (var i = 0; i < flakeCount; i  ) {
        var flake = flakes[i],
            x = mX,
            y = mY,
            minDist = 100,
            x2 = flake.x,
            y2 = flake.y;

        var dist = Math.sqrt((x2 - x) * (x2 - x)   (y2 - y) * (y2 - y)),
            dx = x2 - x,
            dy = y2 - y;

        if (dist < minDist) {
            var force = minDist / (dist * dist),
                xcomp = (x - x2) / dist,
                ycomp = (y - y2) / dist,
                deltaV = force / 2;

            flake.velX -= deltaV * xcomp;
            flake.velY -= deltaV * ycomp;

        } else {
            flake.velX *= .98;
            if (flake.velY <= flake.speed) {
                flake.velY = flake.speed
            }

            switch (settings.windPower) { 
              case false:
                flake.velX  = Math.cos(flake.step  = .05) * flake.stepSize;
              break;

              case 0:
                flake.velX  = Math.cos(flake.step  = .05) * flake.stepSize;
              break;

              default: 
                flake.velX  = 0.01   (settings.windPower/100);
            }
        }

        var s = settings.color;
        var patt = /^#([\da-fA-F]{2})([\da-fA-F]{2})([\da-fA-F]{2})$/;
        var matches = patt.exec(s);
        var rgb = parseInt(matches[1], 16) "," parseInt(matches[2], 16) "," parseInt(matches[3], 16);


        flake.y  = flake.velY;
        flake.x  = flake.velX;

        if (flake.y >= canvas.height || flake.y <= 0) {
            reset(flake);
        }


        if (flake.x >= canvas.width || flake.x <= 0) {
            reset(flake);
        }
        if (settings.image == false) {
          ctx.fillStyle = "rgba("   rgb   ","   flake.opacity   ")"
          ctx.beginPath();
          ctx.arc(flake.x, flake.y, flake.size, 0, Math.PI * 2);
          ctx.fill();
        } else {

          ctx.drawImage($("img#lis_flake").get(0), flake.x, flake.y, flake.size * 2, flake.size * 2);
        }

    }
    requestAnimationFrame(snow);
};


function reset(flake) {

    if (settings.windPower == false || settings.windPower == 0) {
      flake.x = Math.floor(Math.random() * canvas.width);
      flake.y = 0;
    } else {
      if (settings.windPower > 0) {
        var xarray = Array(Math.floor(Math.random() * canvas.width), 0);
        var yarray = Array(0, Math.floor(Math.random() * canvas.height))
        var allarray = Array(xarray, yarray)

        var selected_array = allarray[Math.floor(Math.random()*allarray.length)];

         flake.x = selected_array[0];
         flake.y = selected_array[1];
      } else {
        var xarray = Array(Math.floor(Math.random() * canvas.width),0);
        var yarray = Array(canvas.width, Math.floor(Math.random() * canvas.height))
        var allarray = Array(xarray, yarray)

        var selected_array = allarray[Math.floor(Math.random()*allarray.length)];

         flake.x = selected_array[0];
         flake.y = selected_array[1];
      }
    }

    flake.size = (Math.random() * 3)   settings.size;
    flake.speed = (Math.random() * 1)   settings.speed;
    flake.velY = flake.speed;
    flake.velX = 0;
    flake.opacity = (Math.random() * 0.5)   settings.opacity;
}
 function init() {
  for (var i = 0; i < flakeCount; i  ) {
      var x = Math.floor(Math.random() * canvas.width),
          y = Math.floor(Math.random() * canvas.height),
          size = (Math.random() * 3)    settings.size,
          speed = (Math.random() * 1)   settings.speed,
          opacity = (Math.random() * 0.5)   settings.opacity;

      flakes.push({
          speed: speed,
          velY: speed,
          velX: 0,
          x: x,
          y: y,
          size: size,
          stepSize: (Math.random()) / 30,
          step: 0,
          angle: 180,
          opacity: opacity
      });
  }

  snow();
}

if (settings.image != false) {
  $("<img src='" settings.image "' style='display: none' id='lis_flake'>").prependTo("body")
}

init();

$(window).resize(function() {
  if(this.resizeTO) clearTimeout(this.resizeTO);
  this.resizeTO = setTimeout(function() {
    el2 = el.clone();
    el2.insertAfter(el);
    el.remove();

    el2.let_it_snow(settings);
  }, 200);
});

if (settings.interaction == true) {
  canvas.addEventListener("mousemove", function(e) {
      mX = e.clientX,
      mY = e.clientY
  });
}}}(window.jQuery);

在代码的顶部,在默认属性中,是您指向图像的网址的位置。下面是我放入的内容,因此它在image1.jpeg和image2.jpeg之间选择

image: "img/image' Math.floor((Math.random() * 2)   1) '.jpeg";
然而,当&#34;雪花&#34; respawn,图像保持不变,而不是再次选择随机数。我需要改变什么,以便在创建雪花时,它会选择一个随机图像并成为它?

我希望我的问题很明确,如果您需要更清晰,请告诉我。我是j-script的新手,我们将不胜感激。

最佳答案:

1 个答案:

答案 0 :(得分:0)

插件作者使用

将单个自定义图像加载到隐藏元素中
if (settings.image != false) {
  $("<img src='" settings.image "' style='display: none' id='lis_flake'>").prependTo("body")
}

并使用此

加载雪花
ctx.drawImage($("img#lis_flake").get(0)

此解决方案尚未经过测试,但如果您愿意稍微破解插件,则可能会进行以下更改以使用两个可选图像:

1)init();函数调用之前添加此项。它添加了settings.image2的另一个隐藏图像。

if (settings.image2) {
  $("<img src='" settings.image2 "' style='display: none' id='lis_flake2'>").prependTo("body")
}

2)使用

修改function init()
flakes.push({
    // Create a new property called 'imgNum' to hold either "" or "2";
    imgNum: (settings.image2 && Math.floor(Math.random() * 2) === 0 ? "2" : ""),

    // rest of the code ...
    speed: speed,

3)更改

ctx.drawImage($("img#lis_flake").get(0), flake.x, flake.y, flake.size * 2, flake.size * 2);

ctx.drawImage($("img#lis_flake"   flake.imgNum).get(0), flake.x, flake.y, flake.size * 2, flake.size * 2);

根据flake.imgNum中随机设置的init()选择图片。

4)更改传递给插件的选项,如下所示:

options = {
    // other options
    image:  "img/image1.jpeg",
    image2: "img/image2.jpeg",
    // other options
}

如果image2未设置,这些更改应该允许插件仍然有效。

本文经用户投稿或网站收集转载,如有侵权请联系本站。

发表评论

0条回复