在JavaScript中动态定位和动画图像

时间:2016-10-20 04:33:58

标签: javascript animation

我正在尝试通过随机分配斜率和起始位置来动态制作图像动画。我不明白为什么我的图像没有出现,当我从animate函数中取出注释时,我的代码将无法运行。除了底部的动画功能外,一切正常。任何帮助都将得到慷慨接受!

//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;
            }
    }
}*/

1 个答案:

答案 0 :(得分:0)

看起来可能会有一些事情让startAnimation停止你的脚本。试试这里有一些变化:

  • startAnimation函数声明中尝试删除参数前的var关键字。所以你有:

    function startAnimation(slopes, bullets) {

  • 在for循环中,使用.length属性检查数组长度而不是.size()(请参阅:Array.size() vs Array.length

  • while循环正在创建一个无限循环,因为条件(j < (j+2))将始终为真,因为它正在检查j的当前值。用for循环交换它可能更容易。

  • 接下来,在函数中,用方括号替换括号以访问数组索引(将bullets(i)替换为bullets[i],将slopes(j)替换为slopes[j]。括号,JavaScript解释器试图将这些变量称为函数。由于你已经有一个名为bullets的函数,我建议重命名函数或局部变量/参数,以避免处理变量的复杂性名称冲突和范围(更多信息:What is the scope of variables in JavaScript?