這是我用jQuery寫的第一關，過來和大家探讨如何寫得更好，不喜勿噴，謝謝您的寶貴意見，
還請問能夠按難度遞增順序自動生成關卡的算法，謝謝～
pushBox
* {
margin: 0;
padding: 0;
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
-khtml-user-select: none;
user-select: none;
}
.music {
position: absolute;
right: 100px;
top: 100px;
}
.element {
position: absolute;
width: 100px;
height: 100px;
box-sizing: border-box;
border: 1px solid gray;
}
.wall {
background-color: blue;
}
.path {
background-color: green;
}
.box {
background-color: yellow;
z-index: 100;
border: 10px solid yellow;
outline: 1px solid gray;
}
.box:before {
position: absolute;
top: 3px;
right: 0;
left: 0;
bottom: 3px;
border-top: 37px solid transparent;
border-bottom: 37px solid transparent;
border-left: 37px solid green;
border-right: 37px solid green;
content: "";
}
.box:after {
position: absolute;
left: 3px;
right: 3px;
top: 0;
bottom: 0;
border-top: 37px solid green;
border-bottom: 37px solid green;
border-left: 37px solid transparent;
border-right: 37px solid transparent;
content: "";
}
.person {
background-color: red;
left: 400px;
top: 500px;
z-index: 100;
line-height: 100px;
text-align: center;
font-size: 20px;
color: white;
}
.end {
background-color: white;
line-height: 100px;
text-align: center;
font-size: 30px;
color: red;
}
.handle {
position: relative;
top: 600px;
right: 100px;
}
.item {
position: absolute;
width: 80px;
height: 80px;
text-align: center;
line-height: 80px;
background-color: blue;
color: white;
}
.top {
right: 80px;
bottom: 160px;
}
.bottom {
right: 80px;
bottom: 0;
}
.left {
right: 160px;
bottom: 80px;
}
.right {
right: 0;
bottom: 80px;
}
person ⬆︎ ⬇︎ ⬅︎ 右
var wallArr = [
[300, 100],
[400, 100],
[500, 100],
[300, 200],
[500, 200],
[300, 300],
[500, 300],
[600, 300],
[700, 300],
[800, 300],
[100, 400],
[200, 400],
[300, 400],
[800, 400],
[100, 500],
[600, 500],
[700, 500],
[800, 500],
[100, 600],
[200, 600],
[300, 600],
[400, 600],
[600, 600],
[400, 700],
[600, 700],
[400, 800],
[500, 800],
[600, 800]
],
pathArr = [
[400, 200],
[400, 300],
[400, 400],
[500, 400],
[600, 400],
[700, 400],
[200, 500],
[300, 500],
[400, 500],
[500, 500],
[500, 600],
[500, 700]
],
boxArr = [
[400, 400],
[500, 400],
[300, 500],
[500, 600]
],
endArr = [
[400, 200],
[700, 400],
[200, 500],
[500, 700]
],
wall = path = box = end = main = '',
$main = $('#main'),
$handle = $('#handle'),
$person = $('#person');
for (var i = 0; i < wallArr.length; i++) {
wall += "
}
for (var i = 0; i < pathArr.length; i++) {
path += "
}
for (var i = 0; i < boxArr.length; i++) {
box += "
}
for (var i = 0; i < endArr.length; i++) {
end += "
end ";
}
main = wall + path + box + end;
$main.append(main);
$handle.on('click', '#top', function() {
var left = $person.css('left'),
top = parseInt($person.css('top')) - 100 + 'px',
direction = 'top';
check(left, top, direction);
});
$handle.on('click', '#bottom', function() {
var left = $person.css('left'),
top = parseInt($person.css('top')) + 100 + 'px',
direction = 'bottom';
check(left, top, direction);
});
$handle.on('click', '#left', function() {
var left = parseInt($person.css('left')) - 100 + 'px',
top = $person.css('top'),
direction = 'left';
check(left, top, direction);
});
$handle.on('click', '#right', function() {
var left = parseInt($person.css('left')) + 100 + 'px',
top = $person.css('top'),
direction = 'right';
check(left, top, direction);
});
$main.on('click', '.box', function() {
var $this = $(this),
left = $this.css('left'),
top = $this.css('top'),
elements = getElementsAroundThisPosition(left, top);
elements.each(function() {
if ($(this).hasClass('person')) {
if (left == $person.css('left')) {
if (parseInt(top) > parseInt($person.css('top'))) {
var l = left,
t = parseInt(top) + 100 + 'px',
direction = 'bottom';
if (getElementsInThisPosition(l, t).attr('data-type') === 'path' || getElementsInThisPosition(l, t).attr('data-type') === 'end') {
boxMove($this, left, top, direction);
personMove($person, left, top);
}
} else {
var l = left,
t = parseInt(top) - 100 + 'px',
direction = 'top';
if (getElementsInThisPosition(l, t).attr('data-type') === 'path' || getElementsInThisPosition(l, t).attr('data-type') === 'end') {
boxMove($this, left, top, direction);
personMove($person, left, top);
}
}
} else {
if (parseInt(left) > parseInt($person.css('left'))) {
var l = parseInt(left) + 100 + 'px',
t = top,
direction = 'right';
if (getElementsInThisPosition(l, t).attr('data-type') === 'path' || getElementsInThisPosition(l, t).attr('data-type') === 'end') {
boxMove($this, left, top, direction);
personMove($person, left, top);
}
} else {
var l = parseInt(left) - 100 + 'px',
t = top,
direction = 'left';
if (getElementsInThisPosition(l, t).attr('data-type') === 'path' || getElementsInThisPosition(l, t).attr('data-type') === 'end') {
boxMove($this, left, top, direction);
personMove($person, left, top);
}
}
}
}
});
});
$main.on('click', '.path,.end', function() {
var $this = $(this),
left = $this.css('left'),
top = $this.css('top'),
elements = getElementsAroundThisPosition(left, top);
elements.each(function() {
if ($(this).hasClass('person')) {
personMove($person, left, top);
}
});
});
function getElementsAroundThisPosition(left, top) {
return $('div').filter(function() {
var $this = $(this),
l = $this.css('left'),
t = $this.css('top');
return (l == (parseInt(left) - 100 + 'px') && t == top) ||
(l == (parseInt(left) + 100 + 'px') && t == top) ||
(l == left && t == (parseInt(top) - 100 + 'px')) ||
(l == left && t == (parseInt(top) + 100 + 'px'));
});
}
function getElementsInThisPosition(left, top) {
var ele, element = $('div').filter(function() {
return $(this).css('left') == left && $(this).css('top') == top;
});
if (element.length == 2) {
element.each(function() {
if ($(this).hasClass('box') || $(this).hasClass('end')) {
return ele = $(this);
}
})
} else if (element.length == 3) {
element.each(function() {
if ($(this).hasClass('box')) {
return ele = $(this);
}
})
} else {
return ele = $(element);
}
return ele;
}
function check(left, top, direction) {
var parameter = getElementsInThisPosition(left, top).attr('data-type');
if (parameter === 'path' || parameter === 'end') {
personMove($person, left, top);
}
if (parameter === 'box') {
count(direction, left, top);
var para = getElementsInThisPosition(l, t).attr('data-type');
if (para === 'path' || para === 'end') {
boxMove(getElementsInThisPosition(left, top), left, top, direction);
personMove($person, left, top);
}
}
}
function count(direction, left, top) {
switch (direction) {
case 'top':
return t = parseInt(top) - 100 + 'px',
l = left;
break;
case 'bottom':
return t = parseInt(top) + 100 + 'px',
l = left;
break;
case 'left':
return l = parseInt(left) - 100 + 'px',
t = top;
break;
case 'right':
return l = parseInt(left) + 100 + 'px',
t = top;
break;
}
}
function personMove(element, left, top) {
element.css({
left: left,
top: top
});
}
function boxMove(element, left, top, direction) {
count(direction, left, top);
element.css({
left: l,
top: t
});
isEnd();
}
function isEnd() {
var k = 0;
$('.box').each(function() {
var l = parseInt($(this).css('left')),
t = parseInt($(this).css('top'));
for (var i = 0; i < endArr.length; i++) {
if (endArr[i][0] == l && endArr[i][1] == t) {
k++;
if (k == 4) {
setTimeout(function() {
alert('end');
}, 0);
}
}
}
});
}