0

我需要一些帮助来移动我创建的名为“Predator”数组的数组中的元素。现在,我将所有图像都显示在 SVG 框上并存储在数组中。

我很难在“for”循环中调用它们并随机移动它们。此外,我想让图像更接近现实生活。示例请查看此网站。

<script>

    var startPredator = 20; //number of fish to start with
    var Predator = []; //array of fish
    var predatorW = 307; //fish width
    var predatorH = 313; //fish height
    var velocity = 100; //base velocity
    var imageStrip; //predator image strip
    //var backgroundImage; //background image
    //var backgroundImageW = 981; //background image width
    //var backgroundImageH = 767; //background image height
    //var WIDTH = document.body.offsetWidth;
    //var HEIGHT = document.body.offsetHeight;


    function animate(){
        document.animation.src = arraylist[imgNum].src
        imgNum++

        for (var i=arraylist[].length; i--;){
            arraylist[i].move();
        }

        setInterval(function () { draw(); }, 16.7);
    }       

    function start() {
        for (var i = 0; i < arraylist.length; i++) {
            var image = document.createElement("img");
            image.alt = images[i][0];
            image.width = "150";
            image.height = "150";
            image.src = images[i][1];
            var j = i;
            if (j > 2) j = i - 3;
            document.getElementsByTagName("div")[j].appendChild(image);
        }
    }

    function Predator() {
        var angle = Math.PI * 2 * Math.random(); //set the x,y direction this predator swims
        var xAngle = Math.cos(angle); //set the x value of the angle
        var yAngle = Math.sin(angle); //set the y value of the angle
        var zAngle = 1+-2*Math.round(Math.random()); //set if the predator is swimming toward us or away. 1 = toward us; -1 = away from us
        var x = Math.floor(Math.random() * (WIDTH - predatorW) + predatorW / 2); //set the starting x location
        var y = Math.floor(Math.random() * (HEIGHT - predatorH) + predatorH / 2); //set the starting y location
        var zFar = 100; //set how far away can a predator go
        var zFarFactor = 1; //set the max size the predator can be. 1=100%
        var zClose = 0; //set how near a predator can come
        var z = Math.floor(Math.random() * ((zFar - zClose))); //set the starting z location
        var scale = .1; //set the rate of scaling each frame
        var flip = 1; //set the direction of the fish. 1=right; -1=left
        var cellCount = 16; //set the number of cells (columns) in the image strip animation
        var cell = Math.floor(Math.random() * (cellCount-1)); //set the first cell (columns) of the image strip animation
        var cellReverse = -1; //set which direction we go through the image strip
        var species = Math.floor(Math.random() * 3); //set which species of predator this predator is. each species is a row in the image strip

        // stop predator from swimming straight up or down
        if (angle > Math.PI * 4 / 3 && angle < Math.PI * 5 / 3 || angle > Math.PI * 1 / 3 && angle < Math.PI * 2 / 3) {
            angle = Math.PI * 1 / 3 * Math.random();
            xAngle = Math.cos(angle);
            yAngle = Math.sin(angle);
        }

        // face the predator the right way if angle is between 6 o'clock and 12 o'clock
        if (angle > Math.PI / 2 && angle < Math.PI / 2 * 3) {
            flip = -1;
        }


    function swim() {
            // Calculate next position of species
            var nextX = x + xAngle * velocity * fpsMeter.timeDeltaS;
            var nextY = y + yAngle * velocity * fpsMeter.timeDeltaS;
            var nextZ = z + zAngle * .1 * velocity * fpsMeter.timeDeltaS;
            var nextScale = Math.abs(nextZ) / (zFar - zClose);


            // If species is going to move off right side of screen
            if (nextX + fishW / 2 * scale > WIDTH) {
                // If angle is between 3 o'clock and 6 o'clock
                if ((angle >= 0 && angle < Math.PI / 2)) {
                    angle = Math.PI - angle;
                    xAngle = Math.cos(angle);
                    yAngle = Math.sin(angle) * Math.random();
                    flip = -flip;
                }
                // If angle is between 12 o'clock and 3 o'clock
                else if (angle > Math.PI / 2 * 3) {
                    angle = angle - (angle - Math.PI / 2 * 3) * 2
                    xAngle = Math.cos(angle);
                    yAngle = Math.sin(angle) * Math.random();
                    flip = -flip;
                }
            }
            // If fish is going to move off left side of screen
            if (nextX - fishW / 2 * scale < 0) {
                // If angle is between 6 o'clock and 9 o'clock
                if ((angle > Math.PI / 2 && angle < Math.PI)) {
                    angle = Math.PI - angle;
                    xAngle = Math.cos(angle);
                    yAngle = Math.sin(angle) * Math.random();
                    flip = -flip;
                }
                // If angle is between 9 o'clock and 12 o'clock
                else if (angle > Math.PI && angle < Math.PI / 2 * 3) {
                    angle = angle + (Math.PI / 2 * 3 - angle) * 2
                    xAngle = Math.cos(angle);
                    yAngle = Math.sin(angle) * Math.random();
                    flip = -flip;
                }
            }
            // If fish is going to move off bottom side of screen
            if (nextY + fishH / 2 * scale > HEIGHT) {
                // If angle is between 3 o'clock and 9 o'clock
                if ((angle > 0 && angle < Math.PI)) {
                    angle = Math.PI * 2 - angle;
                    xAngle = Math.cos(angle);
                    yAngle = Math.sin(angle) * Math.random();
                }
            }
            // If fish is going to move off top side of screen
            if (nextY - fishH / 2 * scale < 0) {
                // If angle is between 9 o'clock and 3 o'clock
                if ((angle > Math.PI && angle < Math.PI * 2)) {
                    angle = angle - (angle - Math.PI) * 2;
                    xAngle = Math.cos(angle);
                    yAngle = Math.sin(angle);
                }
            }
            // If fish is going too far (getting too small)
            if (nextZ <= zClose && zAngle < 0) {
                zAngle = -zAngle;
            }
            // If fish is getting to close (getting too large)
            if (((WIDTH / fishW) * 10) < ((fishW * fish.length) / WIDTH)) {
                zFarFactor = .3
            }
            else if (((WIDTH / fishW) * 2) < ((fishW * fish.length) / WIDTH)) {
                zFarFactor = .5
            }
            else { zFarFactor = 1 }
            if (nextZ >= zFar * zFarFactor && zAngle > 0) {
                zAngle = -zAngle;
            }
            if (scale < .1) { scale = .1 }; //don't let fish get too tiny
            //draw the fish
            //locate the fish
            ctx.save();
            ctx.translate(x, y);
            ctx.scale(scale, scale); // make the fish bigger or smaller depending on how far away it is.
            ctx.transform(flip, 0, 0, 1, 0, 0); //make the fish face the way he's swimming.
            ctx.drawImage(imageStrip, fishW * cell, fishH * species, fishW, fishH, -fishW / 2, -fishH / 2, fishW, fishH); //draw the fish
            ctx.save();
            scale = nextScale // increment scale for next time
            ctx.restore();
            ctx.restore();
            //increment to next state
            x = nextX;
            y = nextY;
            z = nextZ;
            if (cell >= cellCount-1 || cell <= 0) { cellReverse = cellReverse * -1; } //go through each cell in the animation
            cell = cell + 1 * cellReverse; //go back down once we hit the end of the animation
        }
        return {
            swim: swim
        }
    } 


</script>

我更关心的是动画和启动功能。我是在调用数组中的图像来移动吗?

请伸出援助之手。谢谢

4

0 回答 0