Игра jquery медленно запускается на мобильном телефоне

-2

Я недавно кодирую простую игру, она работает нормально на ПК, но она работает медленно на мобильном телефоне. Мне просто интересно, вызвана ли проблема моим кодом или jquery. Должен ли я использовать JQuery при написании игры для мобильного телефонаИгра jquery медленно запускается на мобильном телефоне

здесь демо: my game demo link

расслоение плотной код:

$(document).ready(function() { 
    var min = 0; 
    var max = 3; 
    var windowHeight = $(window).height(); 
    var windowWidth = $(window).width(); 
    var rowHeight = windowHeight/4 - 1; 
    var colWidth = windowWidth/4 - 1; 
    var totalTime = 30; 
    var score = 0; 

    function layout() { 
     $('.row').height(rowHeight); 
     $('.col').width(colWidth); 
    } 

    function init() { 
     layout(); 
     $('.row').each(function() { 
      //var rand = Math.floor(Math.random() * (max - min + 1) + min); // return random number between min and max; 
      var rand = Math.floor(Math.random() * max); 
      $(this).children().eq(rand).addClass('active'); 
     }); 

     $('#time').text(totalTime); 
    } 

    function insertNewRow() { 
     var rand = Math.floor(Math.random() * max); 
     var newRowStr = '<div class="row">'; 
     for (var i = 0; i < 4; i++) { 
      newRowStr += '<div class="col"></div>'; 
     } 
     newRowStr += '</div>'; 
     var $newRow = $(newRowStr); 
     $newRow.height(rowHeight).children().width(colWidth).eq(rand).addClass('active'); 
     $newRow.prependTo('#wrapper'); 
    } 

    function removeLastRow() { 
     $('.row:last').remove(); 
    } 


    var counting; 
    function startCountDown() { 
     counting = setInterval(countDown, 1000); 
    } 

    function countDown() { 
     var timeLeft = $('#time').text(); 
     timeLeft -= 1; 
     $('#time').text(timeLeft); 

     if (timeLeft == 0) { 
      gameover(); 
     } 
    } 

    function gameover() { 
     clearInterval(counting); 
     $('#end').show().find('#score').text("your score：" + score); 
    } 

    function restartGame() { 
     score = 0; 
     $('#time').text(totalTime); 
     startCountDown(); 
    } 

    init(); 

    $('#wrapper').on('click', '.row:eq(3) .active', function (event) { 
     event.preventDefault(); 
     score++; 
     $(this).removeClass('active').addClass('clicked').parent().remove(); 
     //setTimeout(removeLastRow, 200); 
     insertNewRow(); 
    }); 

    $('#launch').click(function (event) { 
     event.preventDefault(); 
     $('#start').hide(); 
     startCountDown(); 
    }); 

    $('#retry').click(function (event) { 
     event.preventDefault(); 
     $('#end').hide(); 
     restartGame(); 
    }); 
});

HTML код:

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no"> 
    <title>Game</title> 
    <link rel="stylesheet" type="text/css" href="files/style.css"> 
    <script src="files/jquery.min.js"></script> 
    <script src="files/game.js"></script> 
</head> 
<body> 
    <div id="start"> 
     <a id="launch" href="#">START</a> 
    </div> 
    <div id="time"></div> 
    <div id="end"> 
     <h1 id="score"></h1> 
     <a id="retry" href="#">AGAIN</a> 
    </div> 
    <div id="wrapper"> 
     <div class="row"> 
      <div class="col"></div> 
      <div class="col"></div> 
      <div class="col"></div> 
      <div class="col"></div> 
     </div> 
     <div class="row"> 
      <div class="col"></div> 
      <div class="col"></div> 
      <div class="col"></div> 
      <div class="col"></div> 
     </div> 
     <div class="row"> 
      <div class="col"></div> 
      <div class="col"></div> 
      <div class="col"></div> 
      <div class="col"></div> 
     </div> 
     <div class="row"> 
      <div class="col"></div> 
      <div class="col"></div> 
      <div class="col"></div> 
      <div class="col"></div> 
     </div> 
    </div> 
</body> 
</html>

источник

2014-10-10 Littlee

Какая операционная система? И определите «медленно». – jgillich

Есть слишком много возможных ответов, или хорошие ответы будут слишком длинными для этого формата. Пожалуйста, добавьте детали, чтобы сузить набор ответов или изолировать проблему, на которую можно ответить в нескольких абзацах. – Spokey

Я пробовал вашу игру, и я действительно не понимаю эту концепцию, однако в стороне сама игра не должна быть «медленной» на мобильном телефоне, потому что на самом деле не происходит «анимации», и у вас нет значительного количество строк кода, которые могут привести к задержке. Когда вы говорите медленно, что медленно? – rottenoats

В общем JQuery очень медленный, который редко случается, так как у нас такие быстрые компьютеры. Но вы, кажется, используете jQuery для почти любого взаимодействия здесь. Вы можете подумать об улучшении этого. Ознакомьтесь с этой замечательной статьей об этой проблеме.

jQuery Newbs: Stop Jumping in the Pool

источник

2014-10-10 07:50:12 Gustav

Игра jquery медленно запускается на мобильном телефоне

ответ

Смежные вопросы