jquery游戏在手机上缓慢运行

-2

我近期编写了一个简单的游戏，它在PC上正常运行，但在手机上运行缓慢。我只是想知道问题是由我的代码还是由jquery引起的。我应该使用jquery而对于手机jquery游戏在手机上缓慢运行

JS代码：

$(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 2014-10-10 07:46:28

可能有太多的答案，或者对于这种格式来说答案太好。请添加详细信息以缩小答案集或隔离几个段落中可以回答的问题。 – Spokey 2014-10-10 07:46:41

我试过你的游戏，但我并不真正理解这个概念，但是除了游戏本身不应该在手机上“慢”，因为没有真正的“动画”正在进行，你也没有重要的可能使其滞后的代码行数。当你说慢，什么是慢？ – rottenoats 2014-10-10 07:49:35

一般jQuery是非常很慢，这是很少有人遇到，因为我们有这么快的电脑。但你似乎在这里几乎每个交互都使用jQuery。您可以考虑对此进行一些改进。看看这个关于这个问题的好文章。

jQuery Newbs: Stop Jumping in the Pool

来源

2014-10-10 07:50:12 Gustav

jquery游戏在手机上缓慢运行

回答

相关问题