diff --git a/lidasong/Puzzle8/Puzzle8.css b/lidasong/Puzzle8/Puzzle8.css new file mode 100644 index 0000000..faf5be8 --- /dev/null +++ b/lidasong/Puzzle8/Puzzle8.css @@ -0,0 +1,26 @@ +body { + width:306px; + height:364px; + margin:0 auto; + margin-top:50px; + border:2px solid red; + background:gray; +} +#head { + background:green; + height:50px; + border-bottom:2px solid red; +} +#commit { + position:absolute; + width:200px; + height:50px; + margin-left:53px; +} +button { + position:relative; + float:left; + width:100px; + height:100px; + background:red; +} diff --git a/lidasong/Puzzle8/Puzzle8.html b/lidasong/Puzzle8/Puzzle8.html new file mode 100644 index 0000000..ad09d6a --- /dev/null +++ b/lidasong/Puzzle8/Puzzle8.html @@ -0,0 +1,45 @@ + + + + + 拼图游戏 + + + + + + + +
+ +
+
+ + + + + + + + + + +
+ + + +
+ + + +
+ + + +
+
+ + + diff --git a/lidasong/Puzzle8/Puzzle8.js b/lidasong/Puzzle8/Puzzle8.js new file mode 100644 index 0000000..fcda234 --- /dev/null +++ b/lidasong/Puzzle8/Puzzle8.js @@ -0,0 +1,68 @@ +var buttonType = ["#buttonOne", "#buttonTwo", "#buttonThree", "#buttonFour", "#buttonFive", "#buttonSix", "#buttonSeven", "#buttonEight"]; +var topButton, leftCheck, topBlank, leftBlank; + +function clickButton(value) { + buttonChoose = $(buttonType[value - 1]); + blankGet = $("#blank"); + move(); + suceessCheck(); +} + +function move() { + topButton = buttonChoose.offset().top; + leftCheck = buttonChoose.offset().left; + leftBlank = blankGet.offset().left; + topBlank = blankGet.offset().top; + if (leftCheck == leftBlank) { + if ((topButton + 104) == topBlank) { + blankGet.animate({ + top: '-=104px' + }); + buttonChoose.animate({ + top: '+=104px' + }); + } else if ((topButton - 104) == topBlank) { + blankGet.animate({ + top: '+=104px' + }); + buttonChoose.animate({ + top: '-=104px' + }); + } + } else if (topButton == topBlank) { + if ((leftCheck + 100) == leftBlank) { + blankGet.animate({ + left: '-=100px' + }); + buttonChoose.animate({ + left: '+=100px' + }); + } else if ((leftCheck - 100) == leftBlank) { + blankGet.animate({ + left: '+=100px' + }); + buttonChoose.animate({ + left: '-=100px' + }); + } + } +} + +function suceessCheck() { + if ($(buttonType[0]).offset().top > $(buttonType[3]).offset().top || $(buttonType[3]).offset().top > $(buttonType[6]).offset().top) + return; + if ($(buttonType[0]).offset().top == $(buttonType[1]).offset().top && $(buttonType[1]).offset().top == $(buttonType[2]).offset().top) + + { + if ($(buttonType[0]).offset().left + 100 == $(buttonType[1]).offset().left && $(buttonType[1]).offset().left + 100 == $(buttonType[2]).offset().left) {} else return; + } else return; + + if ($(buttonType[3]).offset().top == $(buttonType[4]).offset().top && $(buttonType[4]).offset().top == $(buttonType[5]).offset().top) { + if ($(buttonType[3]).offset().left + 100 == $(buttonType[4]).offset().left && $(buttonType[4]).offset().left + 100 == $(buttonType[5]).offset().left) {} else return; + } else return; + + if ($(buttonType[6]).offset().top == $(buttonType[7]).offset().top && $(buttonType[6]).offset().left + 100 == $(buttonType[7]).offset().left) + + alert("You succeed,Congratulations!"); + else return; +}