dynamically positioning and animating images in JavaScript

Question

I'm trying to animate an image dynamically by assigning a slope and a starting position randomly. I don't understand why my image is not appearing and when I take the comments off the animate function my code won't run. Everything works properly except the animate functions at the bottom. Any help will be graciously accepted!

//Generate the table for the game
function createTable(difficulty, mineArray)
{
document.getElementById("buttons").style.visibility="hidden";
var time = 0.00;
var row = 0;
var size = 0;
var Lives = 0;
var column = 0;
var input = "";
var completion = 0;
var minesLeft = 0;

if(difficulty == 0)
    {
        Lives = 5;
        size = 600;
        row = 30;
        column = 20;
    }
else if (difficulty == 1)
    {
        Lives = 3;
        size = 600;
        row = 30;
        column = 20;
    }
else if (difficulty == 2)
    {
        Lives = 5;
        size = 1000;
        row = 40;
        column = 25;
    }
else if (difficulty == 3)
    {
        Lives = 3
        size = 1000;
        row = 40;
        column = 25;
    }

    for (var i = 0; i < size; i++)
    {
        if (mineArray[i] == 9)
            {
                minesLeft = minesLeft + 1;
            }     
    }
//Header
var head = document.getElementById("header").style.width = "100%"
document.getElementById("lives").innerHTML = "Lives: " + Lives;
document.getElementById("title").innerHTML = "Minesweeper Bullet Hell";
document.getElementById("time").innerHTML = "Time: " + time;
document.getElementById("footer").innerHTML = "Mines Left: " + minesLeft;
var name = document.getElementById("Name");
document.getElementById("names").innerHTML = "Welcome " + name.value;
//Main div (where the game is played)
var main = document.getElementById("main");
main.style.width = "100%"
main.style.height = "100%"
//Table
var div = document.getElementById("Table");
div.style.position = "absolute";
div.style.left = "5%";
div.style.top = "5%";
div.style.right = "5%";
div.style.verticalAlign = "true";
if(difficulty == 1 || difficulty == 0)
    {
        div.style.height = "900";
        div.style.width = "600";
    }
if(difficulty == 1 || difficulty == 0)
    {
        div.style.height = "1000";
        div.style.width = "625";
    }
div.style.zIndex="1";
//Iterate through columns
while(completion < size)
    {
        for (var i = 0; i < column; i++)
            {
                var tr = document.createElement('tr');
                //Iterate through rows
                    for(var j = 0; j < row; j++)
                        {
                            var place = completion;
                            var td = document.createElement('td');
                            //For smaller minefield
                            if (size == 600)
                                {
                                    td.style.width = "30";
                                    td.style.height = "auto";
                                    td.style.color = "blue";
                                    //Add an image
                                    var img = document.createElement('img');
                                    img.src = "grey square.png";
                                    img.style.display = "block";
                                    img.style.height = "30";
                                    img.style.width = "30";
                                    td.appendChild(img);
                                }
                            //For larger minefield
                            else
                                {
                                    td.style.width = "25";
                                    td.style.height = "auto";
                                    td.style.color = "blue";
                                    //Add an image
                                    var img = document.createElement('img');
                                    img.src = "grey square.png";
                                    img.style.display = "block";
                                    img.style.height = "25";
                                    img.style.width = "25";
                                    td.appendChild(img);
                                }
                            //If it is a mine
                            if (mineArray[completion] == 9)
                                {
                                    td.style.backgroundColor = "grey";
                                    td.style.color = "red";
                                }
                            td.style.border = "1px solid #666666"
                            td.style.textAlign = "center"

                            tr.appendChild(td);

                            completion++;
                        }
                //Think about adding an event listener instead of overlaying buttons?
                main.appendChild(tr);
            }
            var cells = document.getElementsByTagName("td");
            for (var j = 0; i < row; j++)
                {
                    cells[j].addEventListener("click", function () {    
                    //show number
                    var thiscol = this.cellIndex;
                    var thisrow = this.parentNode.rowIndex;
                    console.log("Clicked at " + thisrow + thiscol);
                    var cell = main.rows[thisrow].cells[thiscol];
                    cell.innerHTML = mineArray[(thisrow * row) + thiscol];
                    })
                }
    }
setTimeout(function(){bullets()}, 100);
}
function bullets()
{
//randomly generate bullets including starting positions, direction, and trajectory
//Generate starting position
//Generate starting edge
var xpos;
var ypos;
var bullets;
var slopes
var edge = (Math.floor(Math.random() * 4) + 1)
var bullet = document.createElement('img')
var screen = docuemnt.getElementById("bullets");
bullet.src = "blank.png"
bullet.style.position = "relative"
switch (edge)
    {
    //left edge
        case 1:
            bullet.style.left = 20 + "px";
            ypos = (Math.floor(Math.random() * 100) + 1);
            bullet.style.top = ypos + "px";
            bullet.id = "left";
            break;
    //top edge
        case 2:
            bullet.style.top = 20 + "px";
            xpos = (Math.floor(Math.random() * 100) + 1);
            bullet.style.right = xpos + "px";
            bullet.id = "top"
            break;
    //right edge
        case 3:
            bullet.style.right = 20 + "px";
            ypos = (Math.floor(Math.random() * 100) + 1);
            bullet.style.top = ypos+ "px";
            bullet.id = "right";
            break;
    //bottom edge
        case 4:
            bullet.style.bottom = 20 + "px";
            xpos = (Math.floor(Math.random() * 100) + 1);
            bullet.style.right = xpos + "px";
            bullet.id = "bottom";
            break;
    }
//Get the slope
var xslope = (Math.floor(Math.random() * 20) + 5);
var yslope = (Math.floor(Math.random() * 20) + 5);
bullets.append(bullet);
slopes.append(xpos);
slopes.append(ypos);
screen.appendChild(bullet);
//startAnimation(slopes, bullets);
}
/*
function startAnimation(var slopes, var bullets)
{
var j = 0;
var posy;
var posx;
var id;
for(i = 0; i < bullets.size(); i++)
    {
        while(j < (j+2))
            {
                id = bullets(i).id;
                switch(id)
                    {
                        case "left":
                            posx = bullets(i).style.left;
                            posy = bullets(i).style.top;
                            bullets(i).style.left = posx + slopes(j);
                            bullets(i).style.top = posy + slopes(j+1);
                            break;
                        case "top":
                            posx = bullets(i).style.left;
                            posy = bullets(i).style.top;
                            bullets(i).style.left = posx + slopes(j);
                            bullets(i).style.top = posy + slopes(j+1);
                            break;
                        case "right":
                            posx = bullets(i).style.right;
                            posy = bullets(i).style.top;
                            bullets(i).style.right = posx + slopes(j);
                            bullets(i).style.top = posy + slopes(j+1);
                            break;
                        case "bottom":
                            posx = bullets(i).style.left;
                            posy = bullets(i).style.bottom;
                            bullets(i).style.left = posx + slopes(j);
                            bullets(i).style.bottom = posy + slopes(j+1);
                            break;
                    }
                j += 2;
            }
    }
}*/

What error is logged? Line number and error message would be in valuable. And a [mcve] is essential. — zer00ne, Oct 20 '16 at 06:20
I wish I knew, often the only error it gives me is that the function is undefined, which is hardly helpful. Developer tools do complain about my event listeners, but they seem to be working fine when testing them — Dean Packard, Oct 20 '16 at 13:48
You have 2 functions. So do you actually *call* the function `createTable()`, because I see that you call `bullets()` and are `#buttons` ever become visible? Your event handler is dependent upon the table-cells of a table that must be completed by `createTable()` yet it isn't being called? — zer00ne, Oct 20 '16 at 17:17
yes, this is the view section of my program, the model creates the array and calls the create table function — Dean Packard, Oct 20 '16 at 17:45

score 0 · Accepted Answer · edited May 23 '17 at 11:48

0

Looks like there could be a few things making startAnimation stop your script. Here's a few changes to try out:

In your startAnimation function declaration try removing the var keyword before the parameters. So you'd have:

function startAnimation(slopes, bullets) {
Within the for loop, use the .length property to check the array length rather than .size() (see: Array.size() vs Array.length)
The while loop is creating an infinite loop, because the condition (j < (j+2)) will always be true, since it's checking the current value of j. It might be easier to swap this out with a for loop.
Next, within the function, replace the parentheses with square brackets for accessing array indexes (replace bullets(i) with bullets[i] and slopes(j) with slopes[j]. By using parentheses, the JavaScript interpreter is attempting to call these variables as functions. Since you already have a function called bullets I'd recommend renaming either the function or your local variable / parameter to avoid the complexity of dealing with variable name conflicts and scope (more info: What is the scope of variables in JavaScript? )

edited May 23 '17 at 11:48

Community

1
1

answered Oct 20 '16 at 05:27

Andrew Serong

309
4
7

wow, that helps a ton, The code will still run now, I'm just not seeing my blank.png anymore. I didn't change my loop because at the end of the loop I have j+= 2, which should kick it out of the loop. All the other changes helped. I have a hard time w/ syntax errors in javascript because the ide isn't helpful, and the developer tools will often just say "(function name) is undefined, meaning, "there is a syntax error somewhere, good luck! The only error I'm getting is when I add an event listener it says it can't read property add event listener of undefined. as far as I can tell they work. – Dean Packard Oct 20 '16 at 13:47
For the missing image, relative paths can be tricky (more on this here: http://stackoverflow.com/questions/2188218/relative-paths-in-javascript-in-an-external-file). Try renaming your image files so there are no spaces (and use underscores instead), so that you don't have to worry about URL encoding the space character to %20. – Andrew Serong Oct 20 '16 at 22:11
I worked on it a bunch yesterday and I have got the images to appear in random positions and stuff, turns out the main problem was that I spelled document wrong when I tried to create the element. but the animation is not working because for some reason that I don't understand, the bullet array (I changed it's name to bulletArray) is being reset back to only containing the one thing each frame that passes. I tried moving my declaration out of the function, but that doesn't seem to help. – Dean Packard Oct 21 '16 at 14:14
It's finished! Turns out I had to move the array initialization out of the functions into global scope like I thought, but also had to call them using "this" Thanks so much for your help sir! – Dean Packard Oct 21 '16 at 15:16

dynamically positioning and animating images in JavaScript

1 Answers1