Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 11.07.2011, 14:54
Аспирант
Отправить личное сообщение для ctpz Посмотреть профиль Найти все сообщения от ctpz
 
Регистрация: 30.06.2011
Сообщений: 63

Как сделать?
Вот, сделал нечто наподбии игры для развития скорости печати.

Демо: http://ctpzblog.hut1.ru/khome-script..._1.1/easy.html

Однако при нажатии на ссылку "Закончить" оно пишет "Подождите...", а игра не прекращается еще примерно 5 - 8 секунд.

Вот jquery код:
function randomFromTo(from, to){
        return Math.floor(Math.random() * (to - from + 1) + from);
    }

    var arrstring = new Array("человек", "обои", "фото", "рыба", "кот", "жир", "пиво", "поле", "семья", "блог",  "поиск", "закладка", "вол", "кит", "сеть", "список", "страница", "меню", "мобильный", "кнопка", "элемент", "выбор", "колбаса", "сыр", "мясо", "вода", "яблоко", "груша", "письмо", "пирог", "торт", "топот", "поттоп", "лось", "олень", "зубр", "бизон", "дикость", "брасс", "барс", "снег", "жила", "золото", "серебро", "химия", "лень", "пень", "веник", "самолет", "перекур", "сигарета", "зажим", "сайт", "форум", "Рим", "Милан", "футбол", "баскетбол", "гандбол", "волейбол", "пионербол", "оптимизация", "спидометр", "клавиатура", "лом", "мышь", "монитор", "система", "нипель", "колесо", "таблетка", "программа", "шоу", "слайдер", "смартфон", "дизайн", "мама", "папа", "сервер", "нагрузка", "выдерживать", "заложить", "ссуда", "ломбард", "телевидение", "телеканал", "пульт", "телефон", "сенсор", "плазма", "ноутбук", "окно", "картина", "альбом", "социопат", "психолог", "клаустрофобия", "камин", "ковролин", "домофон", "шкаф", "полка", "диван", "фортепиано", "аккордеон", "минута", "понятие", "словарь", "идиот", "куртка", "пуховик", "липа", "каштан", "тополь", "баян", "береза", "абрикос", "ананас", "персик", "слива", "нектарин", "секунда", "микрон", "фотоэлемент", "лошадь");


    var score = 0;

    $(document).ready(function() {

        var children = $("#container").children();
        var child = $("#container div:first-child");

        var currentEl;
        var currentElPress;

        var win_width = $(window).width();
        var text_move_px = 800;
        var box_left = (win_width / 2) - (text_move_px / 2);

        var playGame;
        var stop;

        $(".animatedbox").css("left", box_left+"px");

        $("#btnplay").click(function() {

            if ($(this).text() == "Играть") {
                startPlay();
                playGame = setInterval(startPlay, 23000);
                $(this).text("Закончить");
            } else if ($(this).text() == "Закончить") {
                stop = true;
                if ($("#container").find(".current").length == 0) {
                  $(this).text("Играть");
                } else {
                  $(this).text("Подождите...");
                }
                clearInterval(playGame);
            }
            return false;
        });

        var con_height = $("#container").height();
        var con_pos = $("#container").position();
        var min_top = con_pos.top;

        // 56 = отступ анимированного прмяоугольника сверху и снизу + размер шрифта
        var max_top = min_top + con_height - 49;

        function startPlay() {

            child = $("#container div:first-child");
            child.addClass("current");
            currentEl = $(".current");

            for (i=0; i<children.length; i++) {
                var delaytime = i * 3500;
                setTimeout(function() {
                    randomIndex = randomFromTo(0, arrstring.length - 1);
                    randomTop = randomFromTo(min_top, max_top);
                    child.animate({"top": randomTop+"px"}, 'slow');
                    child.find(".match").text("");
                    child.find(".unmatch").text(arrstring[randomIndex]);
                    child.show();
                    child.animate({
                       left: "+="+text_move_px
                    }, 8000, function() {
                        currentEl.removeClass("current");
                        currentEl.fadeOut('fast');
                        currentEl.animate({
                            left: box_left+"px"
                        }, 'fast');
                        if (currentEl.attr("id") == "last") {
                            child.addClass("current");
                            currentEl = $(".current");
                            if (stop) {
                               $("#btnplay").text("Играть");
                            }
                        } else {
                            currentEl.next().addClass("current");
                            currentEl = currentEl.next();
                        }
                    });
                    child = child.next();
                }, delaytime);
            }
        }

        // В IE $(window).keypress() не работает
        $(document).keypress(function(event) {
            currentElPress = $(".current");

            var matchSpan = currentElPress.find(".match");
            var unmatchSpan = currentElPress.find(".unmatch");
            var unmatchText = unmatchSpan.text();
            var inputChar;

            if ( $.browser.msie || $.browser.opera ) {
                inputChar = String.fromCharCode(event.which);
            } else {
                inputChar = String.fromCharCode(event.charCode);
            }

            if (inputChar == unmatchText.charAt(0)) {
                unmatchSpan.text(unmatchText.replace(inputChar, ""));
                matchSpan.append(inputChar);
                if (unmatchText.length == 1) {
                    currentElPress.stop().effect("explode", 500);
                    currentElPress.animate({
                        left: box_left+"px"
                    }, 'fast');
                    if (currentElPress.attr("id") == "last" && stop) {
                        $("#btnplay").text("Играть");
                    }

                    currentElPress.removeClass("current");
                    currentElPress = currentElPress.next();
                    currentElPress.addClass("current");
                    currentEl = currentElPress;
                    score += 50;
                    $("#score").text(score).effect("highlight", {
                        color: '#000000'
                    }, 100000);
                } else {
                    score += 10;
                    $("#score").text(score);
                }
            }
        });
    });

Последний раз редактировалось ctpz, 11.07.2011 в 14:56.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как лучше сделать виджет? comentator Элементы интерфейса 0 25.03.2011 08:44
Как сделать, чтобы при наведении на кнопку справа от нее появлялись текстовые ссылки? Tass Общие вопросы Javascript 7 17.02.2011 09:06
Подскажите как сделать меню на CSS если: greatilya (X)HTML/CSS 10 18.10.2009 20:26
Вопрос как сделать эту панельку Определённых размеров и свойств. jei jQuery 3 09.06.2009 19:14
Как сделать смену картинки, типа "до" и "после", без перезагрузки страницы? btstudio Events/DOM/Window 2 23.02.2009 20:43