3

だから私はキャンバスで遊んでいます。ランダムに落下するオブジェクトをシミュレートしようとすると、背景画像を描画しても問題はなく、雨滴をシミュレートすることになっている 2 番目の画像ではありません。

ドロップをランダムな x で降ろすことはできますが、変数 noOfDrops によって設定されたドロップ イメージ x 回をループする方法がよくわかりません。

ループをコメントアウトしたままにしました。ランダムにドロップするドロップが1つだけの作業コードは次のとおりです。

<!DOCTYPE html>
<html lang="en">
<head>
<title>Canvas Regn</title>
<script type="text/javascript">
var ctx;
var imgBg;
var imgDrops;
var x = 0;
var y = 0;
var noOfDrops = 50;
var fallingDrops = [];

    function setup() {
        var canvas = document.getElementById('canvasRegn');

        if (canvas.getContext) {
                ctx = canvas.getContext('2d');
        setInterval('draw();', 36);
        imgBg = new Image();
        imgBg.src = 'dimma.jpg';

        imgDrops = new Image();
        imgDrops.src = 'drop.png';

        /*for (var i = 0; i < noOfDrops; i++) {
            var fallingDr = imgDrops[i];
            fallingDr.x = Math.random() * 600;
            fallingDrops.push(fallingDr);
            }*/

        }
    }


    function draw() {
        drawBackground();
        ctx.drawImage (imgDrops, x, y); //The rain drop

        y += 3; //Set the falling speed
        if (y > 450) {  //Repeat the raindrop when it falls out of view
        y = -25 //Account for the image size
        x = Math.random() * 600;    //Make it appear randomly along the width
        }
    }

    function drawBackground(){  
        ctx.drawImage(imgBg, 0, 0); //Background
    }
</script>
</head>
<body onload="setup();">
<canvas id="canvasRegn" width="600" height="450"style="margin:100px;"></canvas>
</body>
</html>

誰かがそれを実装する方法についていくつかの良いアイデアを持っているなら、私はそれを大いに感謝します.

4

1 に答える 1

7

あなたのループは実際にはかなり近いです。あなたが抱える最大の問題は、1xと1yの値を維持するだけではなく、画像ごとにそれを維持する必要があるということです。そこで、ループを少し変更して、x、y、および速度の値を持つ配列上のオブジェクトをプッシュしました。速度の値は動きのランダム化を提供するので、すべてが同じ速度で下がることはありません。

var ctx;
var imgBg;
var imgDrops;
var x = 0;
var y = 0;
var noOfDrops = 50;
var fallingDrops = [];


    function drawBackground(){  
        ctx.drawImage(imgBg, 0, 0); //Background
    }

    function draw() {
        drawBackground();

        for (var i=0; i< noOfDrops; i++)
        {
        ctx.drawImage (fallingDrops[i].image, fallingDrops[i].x, fallingDrops[i].y); //The rain drop

        fallingDrops[i].y += fallingDrops[i].speed; //Set the falling speed
        if (fallingDrops[i].y > 450) {  //Repeat the raindrop when it falls out of view
        fallingDrops[i].y = -25 //Account for the image size
        fallingDrops[i].x = Math.random() * 600;    //Make it appear randomly along the width    
        }

        }
    }

    function setup() {
        var canvas = document.getElementById('canvasRegn');

        if (canvas.getContext) {
                ctx = canvas.getContext('2d');

                    imgBg = new Image();
            imgBg.src = "http://lorempixel.com/600/600/sports/";
        setInterval(draw, 36);
        for (var i = 0; i < noOfDrops; i++) {
            var fallingDr = new Object();
            fallingDr["image"] =  new Image();
        fallingDr.image.src = 'http://lorempixel.com/10/10/sports/';

            fallingDr["x"] = Math.random() * 600;
            fallingDr["y"] = Math.random() * 5;
            fallingDr["speed"] = 3 + Math.random() * 5;
            fallingDrops.push(fallingDr);
            }

        }
    }

setup();

これがフィドルのデモです：http： //jsfiddle.net/L4Qfb/21/

于 2012-10-29T21:22:12.660 に答える