Merge pull request #34 from lidasong/master

Merge Puzzle8 from lidasong
ITEC-ELWG · Mar 17, 2014 · 8c4f4c5 · 8c4f4c5
2 parents 2faca04 + 423c3d8
commit 8c4f4c5
Show file tree

Hide file tree

Showing 3 changed files with 139 additions and 0 deletions.
diff --git a/lidasong/Puzzle8/Puzzle8.css 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
@@ -0,0 +1,45 @@
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xml:lang="en" xmlns="http://www.w3.org/1999/xhtml" lang="en">
+
+<head>
+    <title>拼图游戏</title>
+    <meta content="text/html; charset = UTF-8" http-equiv="Content-Type">
+    <script src="http://code.jquery.com/jquery-1.4.1.js"></script>
+    <link rel="stylesheet" type="text/css" href="Puzzle8.css" />
+    <script type="text/javascript" src="Puzzle8.js"></script>
+</head>
+
+<body>
+    <form action=" " method="post">
+        <div id="head">
+            <input id="commit" type="submit" value="重置"></input>
+        </div>
+    </form>
+    <div>
+        <table>
+            <tr>
+                <th>
+                    <button type="button" id="buttonOne" onclick="clickButton(1)">1</button>
+                    <button type="button" id="buttonTwo" onclick="clickButton(2)">2</button>
+                    <button type="button" id="buttonThree" onclick="clickButton(3)">3</button>
+                </th>
+            </tr>
+            <tr>
+                <th>
+                    <button type="button" id="buttonFour" onclick="clickButton(4)">4</button>
+                    <button type="button" id="buttonFive" onclick="clickButton(5)">5</button>
+                    <button type="button" id="buttonSix" onclick="clickButton(6)">6</button>
+                </th>
+            </tr>
+            <tr>
+                <th>
+                    <button type="button" id="buttonSeven" onclick="clickButton(7)">7</button>
+                    <button type="button" id="buttonEight" onclick="clickButton(8)">8</button>
+                    <button id="blank" name="moveLocation"></button>
+                </th>
+            </tr>
+        </table>
+    </div>
+</body>
+
+</html>
diff --git a/lidasong/Puzzle8/Puzzle8.js 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;
+}