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;
+}