We help IT Professionals succeed at work.
Get Started

CreateJS - animation being used is last one assigned

344 Views
Last Modified: 2016-01-05
If you look at my "generateGameBoard(  )" function, it should be assigning either one PNG or the other, depending on the modulus logic I've put in place.

What ends-up happening is the last image assigned becomes the one that ALL of the canvas elements are using.

I'm new to animation, CreatgeJS and also new to  JavaScript arrays and could use some help getting this fixed so it works as intended.  

Thank you!


JavaScript:
// for future use:  var initGamePieces = {};

// for future use:  initGamePieces["00"] = "powersourceRed.png";


$(document).ready(function() {

    function generateGameBoard() {
        var app = "";
        for (var y = 0; y < 10; y++) {
            for (var x = 0; x < 10; x++) {
                //app += "<canvas id='c' class='canvas' spritesrc='images/wall.png' height='64' width='64'></canvas>";

                //app += "<div id='" + x + y + "' class='gamepiece'><canvas id='canvas1' class='canvas' spritesrc='../images/destroyerRed.png' height='64' width='64'></canvas></div>";

                //app += "<canvas id='" + y + x + "' class='canvas' spriteSrc='images/destroyerRed.png' height='64' width='64'></canvas>";

                if (x % 2 === 0) {
                    app += "<canvas id='" + y + x + "' class='canvas' spriteSrc='images/destroyerRed.png' height='64' width='64'></canvas>";
                } else {
                    app += "<canvas id='" + y + x + "' class='canvas' spriteSrc='images/engineerBlue.png' height='64' width='64'></canvas>";
                }

                //app += "<div id='" + x + y + "' class='gamepiece'><canvas id='canvas' class='canvas' spritesrc='http://static.guineashots.com/tutorials/easeljs/assets/bubbles.png' height='64' width='64'></canvas></div>";
            }
        }
    

        $("#gameboard").empty();
        $("#gameboard").append(app);

        console.log("done generating empty game board");
        console.log(app);
    }

    generateGameBoard();

    function init(canvas) {
        var stage = new createjs.Stage(canvas);

        canvas.width = window.innerWidth;

        img = new Image();

        img.src = canvas.getAttributeNode("spriteSrc").value;

        console.log(img.src);

        img.onload = function (event) {

            var data = {
                framerate: 10,
                images: [img],
                frames: { width: 64, height: 64, regX: 32, regY: 32 },
                animations: {
                    'explode': [0, 10]
                }
            }

            var spritesheet = new createjs.SpriteSheet(data);
            var animation = new createjs.Sprite(spritesheet, "explode");
            animation.x = canvas.width / 2;
            animation.y = canvas.height / 2;

            stage.addChild(animation);
          //  var i = 0;

            createjs.Ticker.addEventListener("tick", update);
            function update(event) {

                animation.x = 50;
                animation.y = 40;
                stage.update();

                //i++;

                //if (i > 300) {
                //    i = 0;
                //}
            }
        }
    }


    canvasArr = document.getElementsByClassName("canvas");

    for (var a = 0; a < canvasArr.length; a++) {
        init(canvasArr[a]);
        console.log(canvasArr[a].id);
    }

});

Open in new window


HTML:
<!DOCTYPE html>
<meta charset="utf-8">

<html>
<head>
    <title></title>
    <link href="Styles/robotzcss.css" rel="stylesheet"/>
    <script src="Scripts/jquery-1.10.2.js"></script>
    <!--<script src="https://code.createjs.com/createjs-2015.11.26.min.js"></script>-->
    <script src="Scripts/robotz/robotzjs.js"></script>
</head>
<body>

    <script src="https://code.createjs.com/createjs-2015.11.26.min.js"></script>
    <div id="gameboard" style="position: relative; float: left; height: 680px; border: 1px solid red; width: 680px;"></div>

</body>
</html>

Open in new window


CSS:
body{
    margin: 0px;
    padding:0px;
}


.gamepiece {
    position:relative;
    float:left;
    width: 64px;
    height: 64px;
    border:1px solid transparent;
}

/* unvisited link */
.gamepiece:link {
    
}

/* visited link */
.gamepiece:visited {
    
}

/* mouse over link */
.gamepiece:hover {
    background-color: azure;
}

/* selected link */
.gamepiece:active {
    
}

Open in new window

Comment
Watch Question
Software Engineer
CERTIFIED EXPERT
Commented:
This problem has been solved!
Unlock 1 Answer and 4 Comments.
See Answer
Why Experts Exchange?

Experts Exchange always has the answer, or at the least points me in the correct direction! It is like having another employee that is extremely experienced.

Jim Murphy
Programmer at Smart IT Solutions

When asked, what has been your best career decision?

Deciding to stick with EE.

Mohamed Asif
Technical Department Head

Being involved with EE helped me to grow personally and professionally.

Carl Webster
CTP, Sr Infrastructure Consultant
Ask ANY Question

Connect with Certified Experts to gain insight and support on specific technology challenges including:

  • Troubleshooting
  • Research
  • Professional Opinions
Did You Know?

We've partnered with two important charities to provide clean water and computer science education to those who need it most. READ MORE