我正在创建一个新的“打地鼠”风格的游戏,孩子们必须根据问题打出正确的数字。到目前为止一切都很好,我有一个计时器,计算正确和错误的答案,当游戏开始时,我有一些称为“字符”的 div,它们在设定的时间随机出现在容器中。
我遇到的问题是,因为它是完全随机的,有时“字符”似乎彼此重叠。有没有办法组织它们,使它们出现在容器中的固定位置,并且在出现时不重叠。
在这里,我有将 div 映射到容器的代码。
function randomFromTo(from, to) {
return Math.floor(Math.random() * (to - from + 1) + from);
}
function scramble() {
var children = $('#container').children();
var randomId = randomFromTo(1, children.length);
moveRandom('char' + randomId);
}
function moveRandom(id) {
var cPos = $('#container').offset();
var cHeight = $('#container').height();
var cWidth = $('#container').width();
var pad = parseInt($('#container').css('padding-top').replace('px', ''));
var bHeight = $('#' + id).height();
var bWidth = $('#' + id).width();
maxY = cPos.top + cHeight - bHeight - pad;
maxX = cPos.left + cWidth - bWidth - pad;
minY = cPos.top + pad;
minX = cPos.left + pad;
newY = randomFromTo(minY, maxY);
newX = randomFromTo(minX, maxX);
$('#' + id).css({
top: newY,
left: newX
}).fadeIn(100, function () {
setTimeout(function () {
$('#' + id).fadeOut(100);
window.cont++;
}, 1000);
});
如果有帮助,我有一个小提琴.. http://jsfiddle.net/pUwKb/8/