jquery游戏在手机上运行缓慢
jquery game runs slowly on mobile phone
我最近正在编写一个简单的游戏,它在PC上运行正常,但在手机上运行缓慢。我只是想知道这个问题是由我的代码还是由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>
一般来说,jQuery非常慢,因为我们有这么快的计算机,所以很少遇到这种情况。但您似乎对这里的几乎每一次交互都使用jQuery。你可以考虑对此做一些改进。看看这篇关于这个问题的好文章。
jQuery Newbs:停止在池中跳转
相关文章:
- Xpath运行缓慢的查询
- 具有大型数据集的组件仅在 IE11/Edge 上运行缓慢
- 滚动事件运行缓慢-有没有更轻松的方法
- Html5画布动画在Android上运行缓慢
- JQuery animate() 函数延迟且运行缓慢
- 我的网站运行缓慢,我不知道为什么
- 为什么这段代码在火狐中运行缓慢
- Javascript 在加载 200mb 的新 Images() 后在 Safari / iPad2 中运行缓慢.为什么
- 在IE中导致“脚本运行缓慢”警告
- removeAllRanges在chrome/Alternatives中运行缓慢
- jQuery点击手柄在多次点击后运行缓慢
- html5/javascript游戏在ie8中运行缓慢
- jquery游戏在手机上运行缓慢
- Parse.Cloud在iOS上运行缓慢
- PrimeFaces”;此页面上的脚本导致Internet Explorer运行缓慢“;DataTable出错
- 当我使用这个时,浏览器运行缓慢
- 触发('click')导致“脚本运行缓慢,是否要停止它?”
- Gulp任务运行缓慢
- Angular-bootstrap -反复调用带有bootstrap工具提示的$compile会导致运行缓慢
- 在Mac OS X上运行缓慢