Question

Before I start this may be hard for some people to understand. Sorry.

I am wanting to design an online game using jQuery and php. The game is called Pointless, some people may of heard of it, it is a UK game show.

In Pointless the aim of the game is to score as few points as possible. And the score is determined out of 100. They use some graphical system on the show which invovles a column of lines which disappear as the points lower.

So for example this is the game board (not my design).

I have 100 divs all with the same class, but with id’s “line1″,”line2” ,etc. is there any way i can remove them in time with the score countdown, and can this actually be done at all?

Here is my code for the countdown:

$(document).ready(function() {

            /* delay function */
            jQuery.fn.delay = function(time,func){
                return this.each(function(){
                    setTimeout(func,time);
                });

            };

            jQuery.fn.countDown = function(settings,to) {
            settings = jQuery.extend({
                    startFontSize: '36px',
                    endFontSize: '36px',
                    duration: 100,
                    startNumber: 10,
                    endNumber: 0,
                    callBack: function() { }
                }, settings);
                return this.each(function() {
                    if(!to && to != settings.endNumber) { to = settings.startNumber; }

                    //set the countdown to the starting number
                    $(this).text(to).css('fontSize',settings.startFontSize);

                    //loopage
                    $(this).animate({
                        'fontSize': settings.endFontSize
                    },settings.duration,'',function() {
                        if(to > settings.endNumber + 1) {
                            $(this).css('fontSize',settings.startFontSize).text(to - 1).countDown(settings,to - 1);
                        }
                        else
                        {
                            settings.callBack(this);
                        }
                    });     
                });
            };

            $('#countdown').countDown({
                startNumber: 100,
                callBack: function(me) {
                    $(me).text('Pointless').css('color','#FFF').css('font-size','15px').css('text-transform','uppercase').css('padding-top','15px').css('font-weight','bolder');
                }
            });
        });

Any ideas would be appreciated. All I need is a push in the right direction!!!

Answer 1

Rather than having 100 divs, which you will remove 1 by 1, I think it would make more sense to have 1 div, with a height 100* greater than the others.

Then rather than removing 1 div at a time, you would reduce the height of the div depending on the score.