Jquery: using .animate to creata a game

Question

I know this is not the best kind of question, but I'm really stuck. I'm trying to create a game like the on in this link : http://richard.parnaby-king.co.uk/examples/games/balloons/ , using only Jquery/Javascript/CSS/HTML. (So I can't use flash).

I know the game can't look as nice or fluent with it, but what I have right now doensn't even work.

First, i've created a div, wich whill be the 'gamefield'. Then I want to add a balloon at the bottom of the page every 200 ms, which goes up. It works for one balloon, but as soon as I add more, the balloons jump to the top of the screen when the .animate function starts.

 var divheight = $("#playfield").height();
var divwidth = $("#playfield").width();
var y = 0;

while (y<=20) {
var position = Math.round(divwidth*Math.random());
setTimeout(function(){

var testballoon = '<img src="Afbeeldingen/testballon.png" class="blueballoon"'
testballoon+= 'style="position:absolute;bottom:0px;' + 'left:' + position + 'px;"/>';
$("#playfield").append(testballoon);
}, 1000); y++}

But I can't even get the images in a good place, and animating them doensn't work like I intend to either. I'm not asking for ready-to-use code, but if anyone has any experience with something like this and knows a better approach to randomly add elements/moving them on a page, I'd appreciate it.

Answer 1

Here is a JSFiddle example of one way to create new objects, animate them, then remove them. Below is the code for this example. It certainly has a long way to go to become a game, unless you like watching balloons floating up!

HTML

<div class="gamefield">
    Click this area to add balloons! 
    <br />
    Click fast or click slow!
</div>

CSS

div.gamefield {
    width: 100%;
    height: 500px;
    border: 1px red solid;
}

div.balloon {
    position: absolute;
    bottom: 0px;
    left: 0px;
    width: 100px;
    height: 150px;
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

Javascript

var burl = "http://etc-mysitemyway.s3.amazonaws.com/icons/legacy-previews/icons/green-jelly-icons-culture/028931-green-jelly-icon-culture-balloon.png";

function createBalloon() {
    var gamefield = $("div.gamefield");

    var d = $(document.createElement("div"));
    d.addClass("balloon");
    d.css("background-image", "url('" + burl + "')");

    var maxwidth = gamefield.width() - 100;
    var left = Math.round(maxwidth * Math.random());

    d.css("left", left+"px");
    d.css("bottom", "0px");

    gamefield.append(d);
    d.animate({
        bottom: gamefield.height()
    }, 3000, function() {
        animationComplete($(this));
    });
}

function animationComplete(jobj) {
    jobj.remove();
}

$(function() {
    $("div.gamefield").click(function() {
        createBalloon();
    });
});

Answer 2

check this FIDDLE

jQuery

var div ="<div class='balloon'></div>";
var $div = $(div);
var totalHits = 0;
var totalSeconds = 30;
var time = 0;

var colors = ["red","green","blue","yellow","brown","orange","black","gray"];



var game = setInterval(function(){
    time = time + 3;

    for(i=0;i<5;i++){
        var numBottom = Math.floor(Math.random()*100);
    var numLeft = Math.floor(Math.random()*300);
    var colorRand = colors[Math.floor(Math.random()*colors.length)];

        var cloneDiv = $div.clone(true);
        cloneDiv.css({
            "background-color":colorRand,
            "bottom":-numBottom,
            "left":numLeft
        }).appendTo("#panel");

        cloneDiv.animate({
            bottom:"700px"
        },20000,function(){
            cloneDiv.remove();
        });

        cloneDiv.on("click",function(){
            $(this).hide();
            totalHits = totalHits + 1;
        });

        if(time > totalSeconds){
            clearInterval(game);
            $("#panel").html("<h2>Game Over</h2><br/><h3>your Score: " + totalHits + "</h3>");
        }
    }
},3000);