Question

我有这个功能

var flakeImage = new Image();
 function loadImage(){
    flakeImage.onload = drawFlake;
     flakeImage.src = "game/snowflake.png";
}

和这个初始化图像的那个

function initFlake() {
  flakex = Math.random()*(WIDTH-140)+70;
  flakey = (Math.random()*20)+70;
  flakes = Math.random()*40;
}

并且这个更新图像所以看起来它实际上正在下降

    function updateFlake(){
    flakey = flakey + 1;
}

以及绘制功能

 function drawFlake() {
      context.drawImage(flakeImage, flakex, flakey, flakes, flakes);
}

我想让它看起来像是在我的画布上下雪。我不能使用for循环，因为它只会修改相同的图片。我尝试使用相同的图片制作一个大数组，但最终我没有达到这个效果..因为图像必须随机下降。我应该如何将数组与存储在随机位置的图像以一定间隔组合以获得该效果？

Answer 1

您可以使用setInterval()。

doSomething: function() {
    clearInterval(myInterval);
    myInterval = setInterval(function() {
        // update flake position
        updateFlake();
    }, timeInMilliseconds); 
},

这将运行每timeInMilliseconds毫秒作为参数给出的函数。 setInterval()函数返回一个ID，您可以将其传递给clearInterval()以停止更新。

您也可以直接传递函数。

doSomething: function() {
    clearInterval(myInterval);
    myInterval = setInterval(updateFlake, timeInMilliseconds); 
},

编辑：OP，您可以在不依赖HTML5画布的情况下做到这一点，而是使用DOM元素：

JS BIN

使用Javascript：

        function update () {
            var myInterval = null;
            clearInterval(myInterval);
            myInterval = setInterval(function() {
                // update flake position
                $("#holder > img").each(function() {
                    if ($(this).position().top >= $(window).height()) 
                        $(this).remove();
                    else 
                        $(this).css({top: $(this).position().top+=3});      
                });
            }, 50); //update each of the drawn children
        }

        function drawFlake() {
            clearInterval(myInterval);
            var myInterval = null;

            myInterval = setInterval(function() {
                var randX = (Math.floor((Math.random() * $(window).width()) + 1));
                var $img = $('<img>');
                $img.attr('src','flake.png');
                $("#holder").append($img);                  
                $img.css({left: randX, top: 0, position:'absolute'});
            }, 2000);   //draw a new flake every 2 seconds  

            update();
        }

HTML：

<body onload="drawFlake()">
    <div id="holder"></div>
</body>

CSS：

        body {
            background: white;
        }

        #holder {
            position: relative;
            width: 100%;
            height: 100%;
        }

我想在jquery中重复一个过程

1 个答案: