使用随机斜率在JS中动画图像

时间:2016-10-18 18:07:42

标签: javascript animation

我正在制作一个扫雷弹子地狱游戏,我希望每个帧都出现新的子弹,并且每个子弹按照每帧的指定坡度值移动。除了开始动画功能之外,所有代码都可以工作,你可以将它注释掉然后工作正常,没有动画。

//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;
            }     
    }
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 main = document.getElementById("main");
main.style.width = "100%"
main.style.height = "100%"
var div = document.getElementById("Table");
div.style.position = "absolute";
div.style.left = "5%";
div.style.top = "5%";
div.style.right = "5%";
div.style.height = "90%";
div.style.width = "90%";
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');
                            if (size == 600)
                                {
                                    td.style.width = "2%";
                                    td.style.height = "2%";
                                    td.style.color = "blue";
                                    var img = document.createElement('img');
                                    img.src = "grey square.png";
                                    img.height = "100%";
                                    img.width = "100%";
                                    td.appendChild(img);
                                }
                            else
                                {
                                    td.style.width = "2%";
                                    td.style.height = "2%";
                                    td.style.color = "blue";
                                    var img = document.createElement('img');
                                    img.src = "grey square.png";
                                    img.height = "100%";
                                    img.width = "100%";
                                    td.appendChild(img);
                                }
                            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(difficulty)}, 100);
}
function bullets(difficulty)
{
//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')
bullet.src = "blank.png"
bullet.style.position = "absolute"
switch (edge)
    {
    //left edge
        case 1:
            bullet.style.position.left = 0 + "px";
            ypos = (Math.floor(Math.random() * 100) + 1);
            bullet.style.position.top = ypos + "px";
            bullet.id = "left";
            break;
    //top edge
        case 2:
            bullet.style.position.top = 0 + "px";
            xpos = (Math.floor(Math.random() * 100) + 1);
            bullet.style.position.right = xpos + "px";
            bullet.id = "top"
            break;
    //right edge
        case 3:
            bullet.style.position.right = 0 + "px";
            ypos = (Math.floor(Math.random() * 100) + 1);
            bullet.style.position.top = ypos + "px";
            bullet.id = "right";
            break;
    //bottom edge
        case 4:
            bullet.style.position.bottom = 0 + "px";
            xpos = (Math.floor(Math.random() * 100) + 1);
            bullet.style.position.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);
startAnimation(slopes, bullets);
}

function startAnimation(var slopes, var bullets)
{
var j = 0;
var posy;
var posx;
for(i = 0; i < bullets.size(); i++)
    {
        while(j < (j+2))
            {
                switch (bullets(i).id)
                    {
                        case "left":
                            posx = bullets(i).style.position.left;
                            posy = bullets(i).style.position.top;
                            bullets(i).style.position.left = posx + slopes(j) + "px";
                            bullets(i).style.position.top = posy + slopes(j+1) + "px";
                            break;
                        case "top":
                            posx = bullets(i).style.position.left;
                            posy = bullets(i).style.position.top;
                            bullets(i).style.position.left = posx + slopes(j) + "px";
                            bullets(i).style.position.top = posy + slopes(j+1) + "px";
                            break;
                        case "right":
                            posx = bullets(i).style.position.right;
                            posy = bullets(i).style.position.top;
                            bullets(i).style.position.right = posx + slopes(j) + "px";
                            bullets(i).style.position.top = posy + slopes(j+1) + "px";
                            break;
                        case "bottom":
                            posx = bullets(i).style.position.left;
                            posy = bullets(i).style.position.bottom;
                            bullets(i).style.position.left = posx + slopes(j) + "px";
                            bullets(i).style.position.bottom = posy + slopes(j+1) + "px";
                            break;
                    }
                j += 2;
            }
    }
}

0 个答案:

没有答案