Click Game

by sebastianauer

HTML

<div id="image_container">

        <img class="booty" src="http://placedog.com/200/200">
        <img src="http://placedog.com/350/190">
        <img src="http://placedog.com/250/250">
        <img class="booty" src="http://placedog.com/230/150">
        <img src="http://placedog.com/190/375">
        <img src="http://placedog.com/130/200">
        <img class="booty" src="http://placedog.com/130/205">     
        <img src="http://placedog.com/200/200">
        <img src="http://placedog.com/225/200">
</div>

CSS

#image_container {border: 1px solid red; min-height: 500px; overflow: hidden;}

#image_container p {}
#image_container img {border: 0px solid green; top: 10px; left:10px; position: absolute;}

JavaScript

var init_offset = 10;
var max_width = 750;
var points = null;

//alert("the first image is "+img_width);

$("div[id=image_container] img").each(function(intIndex) {
    var numRand = Math.floor(Math.random() * 101);
    var position = $(this).position();
    var img_width = $(this).outerWidth();
    var offset = init_offset + ((img_width) + numRand);
    var left = position.left;
    $(this).css({'left': (offset+left)+"px", 'top' : (numRand*4)+"px"});
});


$("img.booty").bind('click', function(){
    points++;
    alert("+1 point - Your current points are "+points);
    $(this).css('display', 'none');
    if (points >= 3){
        alert("You already have enough points");
        $("#image_container").load("/user/dashboard/ *");
    }
});