CODEWITHSUNDEEP
javascriptjquery
sMilbz
sMilbz

Reputation: 951

click once for each letter

In my game you have to click the letters to spell the words. When a letter is clicked it animates to an area in the grid where the words are.

When I click a letter and it animates to the cell, I can click more than one. How would I limit it is only one letter per cell.

I was thinking maybe disabling the click function for as long as the animation takes but I don't know how I would implement this.

Can someone point me in the right direction?

Here is the click event...

$('.drag').on('click', function(e) {
e.preventDefault();

var target = $('.drop-box.spellword:not(.occupied):first');
var targetPos = target.position();
var currentPos = $(this).offset();
var b = $(this);

if (target.length) {
    $(".minibutton").prop("disabled", true);
    b.clone().addClass(
    b.data("letter") == target.data("letter") ? "wordglow3" : "wordglow").appendTo("table").css({
        background: "transparent",
        position: "absolute",
        top: currentPos.top,
        left: currentPos.left
    }).animate({
        top: targetPos.top,
        left: targetPos.left
    }, "slow", function() {
        $(this).css({
            top: 0,
            left: 0
        }).appendTo(target);
        target.addClass("occupied");
    });

Upvotes: 1

Views: 163

Answers (3)

Lupo
Lupo

Reputation: 324

if you provided the letters with individual Ids you can remove the click attribute via jQuery with $('#letterId').removeAttr('onclick') while animation is in process - afterwards you can re-activate the Attribute if necessary.

Hope this helps. Greetz, Lupo

Upvotes: 0

nicosantangelo
nicosantangelo

Reputation: 13716

I think you could move the addClass() method from the animate callback, so if you click twice you won't get the same cell, like:

 var target = $('.drop-box.spellword:not(.occupied):first').addClass("occupied");

This is only viable thought if the class doesn't affect your styles.

Other way would be using a flag, so in the begining of the event you would ask if(!animating) and set animating = true at the begining of the animation, and animating = flase at the callback.

Lastly, to enable and disable the click event, you could make a separated function with your code like

var clickEventHandler = function(e) {
    $('.drag').off("click")
    //your current code
    $('.drag').on(clickEventHandler);
}

$('.drag').on('click',  clickEventHandler);

Good luck!

Upvotes: 1

Strille
Strille

Reputation: 5781

Looks like you give the target a class called "occupied" once the animation is done. Couldn't you give it the class "occupied" as soon as a letter is clicked instead?

if (target.length) {
        target.addClass("occupied"); // add immediately here

Upvotes: 1

Related Questions