¿Cómo permitir que varias imágenes en una matriz se muevan cuando se hace clic en el botón de inicio?

Necesito ayuda para mover los elementos en la matriz que creé, llame a la matriz "Predator". Ahora tengo todas las imágenes que aparecen en el cuadro SVG y también están almacenadas en la matriz.

Tengo dificultades para llamarlos en un bucle "for" y para moverlos al azar. Además de eso, me gustaría animar las imágenes más cerca de la vida real. Por favor, eche un vistazo a este sitio web.

<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>

Mi preocupación es más sobre la función de animación e inicio. ¿Estoy llamando a las imágenes de la matriz para que se muevan?

Por favor, ofrezca una mano amiga. Gracias

preguntado el 22 de mayo de 12 a las 10:05

¿Puede proporcionar un volcado de pantalla de alerta (Predator) -

¿De dónde sacas las imágenes? "documento.createElement("img");" es crear un nuevo elemento pero no una nueva imagen? :S -

Creé una nueva imagen y las almacené en una matriz con ID. -

Esto no es svg en absoluto, es lienzo. -

0 Respuestas

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.