From cfbe405b619bea8d4622108e13f7d9790e23c771 Mon Sep 17 00:00:00 2001
From: Weslie0803 <zhengsx19@mails.tsinghua.edu.cn>
Date: Sat, 29 Oct 2022 23:30:42 +0800
Subject: [PATCH] =?UTF-8?q?=E4=B8=80=E7=AD=89=E5=A5=96=E5=9F=BA=E6=9C=AC?=
 =?UTF-8?q?=E5=AE=8C=E6=88=90?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 animate.css          |  86 +++++++++++++++++++++++++++++++
 change.js            |   3 +-
 index.html           | 120 +++++++++++++++++++++++++++++++------------
 index.js             | 109 ++++++++++++++++++++++++++++++++++++---
 scripts.72999ec6.css |   3 +-
 5 files changed, 280 insertions(+), 41 deletions(-)

diff --git a/animate.css b/animate.css
index 0d49447..4073d61 100644
--- a/animate.css
+++ b/animate.css
@@ -250,6 +250,38 @@
     height: 580px;
     position: absolute;
 }
+#result11 {
+    transition: transform 2s;
+    transform-style: preserve-3d;
+    left: -350px;
+    width: 320px;
+    height: 580px;
+    position: absolute;
+}
+#result12 {
+    transition: transform 2s;
+    transform-style: preserve-3d;
+    left: 15px;
+    width: 320px;
+    height: 580px;
+    position: absolute;
+}
+#result13 {
+    transition: transform 2s;
+    transform-style: preserve-3d;
+    right: 15px;
+    width: 320px;
+    height: 580px;
+    position: absolute;
+}
+#result14 {
+    transition: transform 2s;
+    transform-style: preserve-3d;
+    right: -350px;
+    width: 320px;
+    height: 580px;
+    position: absolute;
+}
 
 #result>.CardUndefined>img {
     position: absolute;
@@ -261,6 +293,16 @@
     max-width: 150px;
     max-height: 150px;
 }
+img.prize1 {
+    position: absolute;
+    margin: auto;
+    left: 0;
+    right:0;
+    top: 0;
+    bottom: 0;
+    max-width: 150px;
+    max-height: 150px;
+}
 
 .bondbg {
     background-color: hsla(0,0%,100%,.6); 
@@ -274,6 +316,16 @@
     width: 50px;
     height: 50px;
 }
+.bondbg>img {
+    position: absolute;
+    margin: auto;
+    left: 0;
+    right:0;
+    top: 0;
+    bottom: 0;
+    max-width: 50px;
+    max-height: 50px;
+}
 
 .lefttop {
     left: 40px;
@@ -303,4 +355,38 @@
 .ring82>.plane {
     height: 150px;
     width: 150px
+}
+
+.col-xs-4>.showNum {
+    height: 320px;
+}
+
+#num1>ul li {
+    position: relative;
+    list-style-type: none;
+    float: left;
+    width: 60px;
+    height: 60px;
+}
+#num1>ul {
+    position: absolute;
+    margin: auto;
+    left: 0;
+    right:0;
+    top: 0;
+    bottom: 0;
+    width: 60px;
+    height:240px;
+    padding-left: 0;
+}
+#num1>ul li >img {
+    max-width: 50px;
+    max-height: 50px;
+    /* display: block; */
+    position: absolute;
+    margin: auto;
+    left: 0;
+    right:0;
+    top: 0;
+    bottom: 0;
 }
\ No newline at end of file
diff --git a/change.js b/change.js
index 7456cb7..49c9429 100644
--- a/change.js
+++ b/change.js
@@ -36,10 +36,11 @@ var toggleSecondPrize = function() {
 var toggleFirstPrize = function() {
     $(".NumRolling").children("img").css("display", "none");
     $(".NumRolling").children("ul").css("display", "inherit");
-    $(".row").css("display", "none");
+    $(".row").css("transform", "translateY(2500px)");
     $("#result1").parent().css("transform", "translateY(2500px)");
     // $("#result").css("display", "none");
     $("#bg0").parent().parent().css("transform", "translateY(0px) translateZ(-250px)");
     $("#bond0").parent().parent().css("transform", "translateY(0px) translateZ(-250px) rotateZ(45deg)");
     $("#card0").parent().parent().css("transform", "translateY(0px) translateZ(-380px)");
+    $("#result11").parent().css("transform", "translateY(2250px)");
 }
\ No newline at end of file
diff --git a/index.html b/index.html
index 4473355..4dcbec2 100644
--- a/index.html
+++ b/index.html
@@ -77,6 +77,54 @@
                 </div>
             </div>
         </div>
+        <div id="container" class="container">
+            <div id="stage" style="transform: translateY(2250px);">
+                <div id="result11">
+                    <div class="showNum">
+                        <img id="n11" class="prize1" src="抽奖软件UI/数字/0.png">
+                    </div>
+                    <div class="bondbg lefttop">
+                        <img id="b11l" src="抽奖软件UI/键和方式/1-H2.png">
+                    </div>
+                    <div class="bondbg rightbottom">
+                        <img id="b11r" src="抽奖软件UI/键和方式/1-H2.png">
+                    </div>
+                </div>
+                <div id="result12">
+                    <div class="showNum">
+                        <img id="n12" class="prize1" src="抽奖软件UI/数字/0.png">
+                    </div>
+                    <div class="bondbg lefttop">
+                        <img id="b12l" src="抽奖软件UI/键和方式/1-H2.png">
+                    </div>
+                    <div class="bondbg rightbottom">
+                        <img id="b12r" src="抽奖软件UI/键和方式/1-H2.png">
+                    </div>
+                </div>
+                <div id="result13">
+                    <div class="showNum">
+                        <img id="n13" class="prize1" src="抽奖软件UI/数字/0.png">
+                    </div>
+                    <div class="bondbg lefttop">
+                        <img id="b13l" src="抽奖软件UI/键和方式/1-H2.png">
+                    </div>
+                    <div class="bondbg rightbottom">
+                        <img id="b13r" src="抽奖软件UI/键和方式/1-H2.png">
+                    </div>
+                </div>
+                <div id="result14">
+                    <div class="showNum">
+                        <img id="n14" class="prize1" src="抽奖软件UI/数字/0.png">
+                    </div>
+                    <div class="bondbg lefttop">
+                        <img id="b14l" src="抽奖软件UI/键和方式/1-H2.png">
+                    </div>
+                    <div class="bondbg rightbottom">
+                        <img id="b14r" src="抽奖软件UI/键和方式/1-H2.png">
+                    </div>
+                </div>
+            </div>
+        </div>
         <div id="container" class="container">
             <div id="stage" style="transform: translateY(2500px);">
                 <div id="result1">
@@ -98,10 +146,10 @@
                             </ul>
                         </div>
                     </div>
-                    <div class="bondbg2 lefttop">
+                    <div class="bondbg lefttop">
                         <div class="BondUndefined"></div>
                     </div>
-                    <div class="bondbg2 rightbottom">
+                    <div class="bondbg rightbottom">
                         <div class="BondUndefined"></div>
                     </div>
                 </div>
@@ -124,57 +172,63 @@
                             </ul>
                         </div>
                     </div>
-                    <div class="bondbg2 lefttop">
+                    <div class="bondbg lefttop">
                         <div class="BondUndefined"></div>
                     </div>
-                    <div class="bondbg2 rightbottom">
+                    <div class="bondbg rightbottom">
                         <div class="BondUndefined"></div>
                     </div>
                 </div>
             </div>
         </div>
         <div id="container" class="container">
-            <div class="row" style="display: none;">
+            <div class="row" style="transform: translateY(2500px);">
                 <div class="col-xs-4">
                     <div id="num1" class="showNum">
-                        <div class="CardRolling" >
+                        <ul>
+                            <li><img id="br1" ></li>
+                            <li><img id="br2" ></li>
+                            <li><img id="br3" ></li>
+                            <li><img id="br4" ></li>
+                        </ul>
+                        <!-- <div class="CardRolling">
                             <ul>
-                            <li><img src="抽奖软件UI/底色/复合/复合1.png" width="100%" height="100%" style="display: block;"></li>
-                            <li><img src="抽奖软件UI/底色/复合/复合2.png" width="100%" height="100%"></li>
-                            <li><img src="抽奖软件UI/底色/金属/金属1.png" width="100%" height="100%"></li>
-                            <li><img src="抽奖软件UI/底色/金属/金属2.png" width="100%" height="100%"></li>
-                            <li><img src="抽奖软件UI/底色/非金/非金1.png" width="100%" height="100%"></li>
-                            <li><img src="抽奖软件UI/底色/非金/非金2.png" width="100%" height="100%"></li>
-                            <li><img src="抽奖软件UI/底色/高分子/高分子1.png" width="100%" height="100%"></li>
-                            <li><img src="抽奖软件UI/底色/高分子/高分子2.png" width="100%" height="100%"></li>
-                            <li><img src="抽奖软件UI/底色/复合/复合1.png" width="100%" height="100%" style="display: block;"></li>
+                                <li><img src="抽奖软件UI/底色/复合/复合1.png" width="100%" height="100%" style="display: block;"></li>
+                                <li><img src="抽奖软件UI/底色/复合/复合2.png" width="100%" height="100%"></li>
+                                <li><img src="抽奖软件UI/底色/金属/金属1.png" width="100%" height="100%"></li>
+                                <li><img src="抽奖软件UI/底色/金属/金属2.png" width="100%" height="100%"></li>
+                                <li><img src="抽奖软件UI/底色/非金/非金1.png" width="100%" height="100%"></li>
+                                <li><img src="抽奖软件UI/底色/非金/非金2.png" width="100%" height="100%"></li>
+                                <li><img src="抽奖软件UI/底色/高分子/高分子1.png" width="100%" height="100%"></li>
+                                <li><img src="抽奖软件UI/底色/高分子/高分子2.png" width="100%" height="100%"></li>
+                                <li><img src="抽奖软件UI/底色/复合/复合1.png" width="100%" height="100%" style="display: block;"></li>
                             </ul>
-                        </div>
-                        
+                        </div> -->
                     </div>
                 </div>
                 <div class="col-xs-4">
                     <div id="num2" class="showNum">
-                        <div class="NumRolling" >
+                        <!-- <div class="NumRolling" >
                             <ul>
-                            <li><img src="抽奖软件UI/数字/0.png" style="display: block;"></li>
-                            <li><img src="抽奖软件UI/数字/1.png" style="display: block;"></li>
-                            <li><img src="抽奖软件UI/数字/2.png" style="display: block;"></li>
-                            <li><img src="抽奖软件UI/数字/3.png" style="display: block;"></li>
-                            <li><img src="抽奖软件UI/数字/4.png" style="display: block;"></li>
-                            <li><img src="抽奖软件UI/数字/5.png" style="display: block;"></li>
-                            <li><img src="抽奖软件UI/数字/6.png" style="display: block;"></li>
-                            <li><img src="抽奖软件UI/数字/7.png" style="display: block;"></li>
-                            <li><img src="抽奖软件UI/数字/8.png" style="display: block;"></li>
-                            <li><img src="抽奖软件UI/数字/9.png" style="display: block;"></li>
-                            <li><img src="抽奖软件UI/数字/0.png" style="display: block;"></li>
+                                <li><img src="抽奖软件UI/数字/0.png" style="display: block;"></li>
+                                <li><img src="抽奖软件UI/数字/1.png" style="display: block;"></li>
+                                <li><img src="抽奖软件UI/数字/2.png" style="display: block;"></li>
+                                <li><img src="抽奖软件UI/数字/3.png" style="display: block;"></li>
+                                <li><img src="抽奖软件UI/数字/4.png" style="display: block;"></li>
+                                <li><img src="抽奖软件UI/数字/5.png" style="display: block;"></li>
+                                <li><img src="抽奖软件UI/数字/6.png" style="display: block;"></li>
+                                <li><img src="抽奖软件UI/数字/7.png" style="display: block;"></li>
+                                <li><img src="抽奖软件UI/数字/8.png" style="display: block;"></li>
+                                <li><img src="抽奖软件UI/数字/9.png" style="display: block;"></li>
+                                <li><img src="抽奖软件UI/数字/0.png" style="display: block;"></li>
                             </ul>
-                        </div>
+                        </div> -->
                     </div>
                 </div>
                 <div class="col-xs-4">
                     <div id="num3" class="showNum">
-                        <div class="BondRolling">
+                        <img class="centerNum">
+                        <!-- <div class="BondRolling">
                             <ul>
                                 <li><img src="抽奖软件UI/键和方式/1-H2.png"></li>
                                 <li><img src="抽奖软件UI/键和方式/2-水.png"></li>
@@ -185,7 +239,7 @@
                                 <li><img src="抽奖软件UI/键和方式/7-简单立方.png"></li>
                                 <li><img src="抽奖软件UI/键和方式/8-BCC.png"></li>
                             </ul>
-                        </div>
+                        </div> -->
                     </div>
                 </div>
                 <div class="col-xs-4">
@@ -193,7 +247,7 @@
                 </div>
             </div>
         </div>
-        </div>
+    </div>
         <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
         <script>
             !function(e, a, t, n, g, c) {
diff --git a/index.js b/index.js
index 990935a..780a14f 100644
--- a/index.js
+++ b/index.js
@@ -16,7 +16,7 @@ $(document).ready(function () {
     maxNum = parseInt(url.searchParams.get("max") || "779");
     if (maxNum<1000) {
       $("#num4").parent().remove();
-      $(".col-xs-4").css("width","50%");
+      $(".col-xs-4").css("width","33.333333333%");
       size=3;
       if (maxNum < 100) {
         $("#num3").parent().remove();
@@ -211,7 +211,6 @@ $(document).ready(function () {
           // 重置
           toggleExpand();
           toggleThirdPrize();
-          clearNum(numArr);
           numArr = getRandomNum(usedArr, config[0], config[1], config[2]);
           pressTimes = 0;
         }
@@ -265,7 +264,6 @@ $(document).ready(function () {
           // 重置
           $("#result1").toggleClass("jumpDown");
           $("#result2").toggleClass("jumpDown");
-          clearNum(numArr);
           numArr = getRandomNum(usedArr, config[0], config[1], config[2]);
           toggleSecondPrize();
           pressTimes = 0;
@@ -273,27 +271,126 @@ $(document).ready(function () {
       } else if(prize === 1){
         if(event.which === 32 && pressTimes === 0){
           // 扩张，出现卡池
+          toggleExpand();
+          $(".row").css("transform", "translateY(0px)");
+          $("#bg0").parent().parent().css("transform", "translateY(-100px) translateZ(-500px)");
+          $("#bond0").parent().parent().css("transform", "translateY(-100px) translateZ(-500px) rotateZ(45deg)");
+          $("#card0").parent().parent().css("transform", "translateY(-100px) translateZ(-760px)");
           pressTimes++;
         } else if(event.which === 32 && pressTimes === 1) {
           // 抽键合奇偶
+          if(numArr[0] % 2 === 0){// 偶数
+            $("#br1").attr("src", "抽奖软件UI/键和方式/2-水.png");
+            $("#b11l").attr("src", "抽奖软件UI/键和方式/2-水.png");
+            $("#b11r").attr("src", "抽奖软件UI/键和方式/2-水.png");
+            $("#br2").attr("src", "抽奖软件UI/键和方式/4-正四面体.png");
+            $("#b12l").attr("src", "抽奖软件UI/键和方式/4-正四面体.png");
+            $("#b12r").attr("src", "抽奖软件UI/键和方式/4-正四面体.png");
+            $("#br3").attr("src", "抽奖软件UI/键和方式/6-丙炔.png");
+            $("#b13l").attr("src", "抽奖软件UI/键和方式/6-丙炔.png");
+            $("#b13r").attr("src", "抽奖软件UI/键和方式/6-丙炔.png");
+            $("#br4").attr("src", "抽奖软件UI/键和方式/8-BCC.png");
+            $("#b14l").attr("src", "抽奖软件UI/键和方式/8-BCC.png");
+            $("#b14r").attr("src", "抽奖软件UI/键和方式/8-BCC.png");
+          } else {
+            $("#br1").attr("src", "抽奖软件UI/键和方式/1-H2.png");
+            $("#b11l").attr("src", "抽奖软件UI/键和方式/1-H2.png");
+            $("#b11r").attr("src", "抽奖软件UI/键和方式/1-H2.png");
+            $("#br2").attr("src", "抽奖软件UI/键和方式/3-乙炔.png");
+            $("#b12l").attr("src", "抽奖软件UI/键和方式/3-乙炔.png");
+            $("#b12r").attr("src", "抽奖软件UI/键和方式/3-乙炔.png");
+            $("#br3").attr("src", "抽奖软件UI/键和方式/5-石墨.png");
+            $("#b13l").attr("src", "抽奖软件UI/键和方式/5-石墨.png");
+            $("#b13r").attr("src", "抽奖软件UI/键和方式/5-石墨.png");
+            $("#br4").attr("src", "抽奖软件UI/键和方式/7-简单立方.png");
+            $("#b14l").attr("src", "抽奖软件UI/键和方式/7-简单立方.png");
+            $("#b14r").attr("src", "抽奖软件UI/键和方式/7-简单立方.png");
+          }
+          $("#num1").toggleClass("jumpDown");
+          pressTimes++;
         } else if(event.which === 32 && pressTimes === 2) {
           // 抽底色
+          if(numArr[1] === '0'){
+            $("#num2").css("background-image", "url(抽奖软件UI/底色/金属/金属1.png)");
+            $("#result11").parent().children().children(".showNum").css("background-image", "url(抽奖软件UI/底色/金属/金属1.png)");
+            // $("#num2").css("background-size", "contain");
+          } else if(numArr[1] === '1'){
+            $("#num2").css("background-image", "url(抽奖软件UI/底色/金属/金属2.png)");
+            $("#result11").parent().children().children(".showNum").css("background-image", "url(抽奖软件UI/底色/金属/金属2.png)");
+            // $("#num2").css("background-size", "contain");
+          } else if(numArr[1] === '2'){
+            $("#num2").css("background-image", "url(抽奖软件UI/底色/复合/复合1.png)");
+            $("#result11").parent().children().children(".showNum").css("background-image", "url(抽奖软件UI/底色/复合/复合1.png)");
+            // $("#num2").css("background-size", "contain");
+          } else if(numArr[1] === '3'){
+            $("#num2").css("background-image", "url(抽奖软件UI/底色/复合/复合2.png)");
+            $("#result11").parent().children().children(".showNum").css("background-image", "url(抽奖软件UI/底色/复合/复合2.png)");
+            // $("#num2").css("background-size", "contain");
+          } else if(numArr[1] === '4'){
+            $("#num2").css("background-image", "url(抽奖软件UI/底色/非金/非金1.png)");
+            $("#result11").parent().children().children(".showNum").css("background-image", "url(抽奖软件UI/底色/非金/非金1.png)");
+            // $("#num2").css("background-size", "contain");
+          } else if(numArr[1] === '5'){
+            $("#num2").css("background-image", "url(抽奖软件UI/底色/非金/非金2.png)");
+            $("#result11").parent().children().children(".showNum").css("background-image", "url(抽奖软件UI/底色/非金/非金2.png)");
+            // $("#num2").css("background-size", "contain");
+          } else if(numArr[1] === '6'){
+            $("#num2").css("background-image", "url(抽奖软件UI/底色/高分子/高分子1.png)");
+            $("#result11").parent().children().children(".showNum").css("background-image", "url(抽奖软件UI/底色/高分子/高分子1.png)");
+            // $("#num2").css("background-size", "contain");
+          } else if(numArr[1] === '7'){
+            $("#num2").css("background-image", "url(抽奖软件UI/底色/高分子/高分子2.png)");
+            $("#result11").parent().children().children(".showNum").css("background-image", "url(抽奖软件UI/底色/高分子/高分子2.png)");
+            // $("#num2").css("background-size", "contain");
+          }
+          $("#num2").toggleClass("jumpDown");
+          pressTimes++;
         } else if(event.which === 32 && pressTimes === 3) {
           // 抽数字
-          // 生成最终卡片
+          $("#num3").children("img").attr("src", "抽奖软件UI/数字/"+numArr[2]+".png");
+          $(".prize1").attr("src", "抽奖软件UI/数字/"+numArr[2]+".png");
+          $("#num3").toggleClass("jumpDown");
+          pressTimes++;
         } else if(event.which === 32 && pressTimes === 4) {
+          // 生成最终卡片
+          $("#result11").parent().css("transform", "translateY(0px)");
+          $(".row").css("transform", "translateY(2500px)");
+          $("#bg0").parent().parent().css("transform", "translateY(-1000px)");
+          $("#bond0").parent().parent().css("transform", "translateY(-1000px) rotateZ(45deg)");
+          $("#card0").parent().parent().css("transform", "translateY(-1000px) ");
+          pressTimes++;
+        } else if(event.which === 32 && pressTimes === 5) {
           // 清空，重置
+          $("#num1").toggleClass("jumpDown");
+          $("#num2").toggleClass("jumpDown");
+          $("#num3").toggleClass("jumpDown");
+          numArr = getRandomNum(usedArr, config[0], config[1], config[2]);
+          toggleExpand()
           toggleFirstPrize();
           pressTimes = 0;
         }
       } else if(prize === 0){
         if(event.which === 32 && pressTimes === 0){
-          // 开始闪动
+          // 扩张，出现卡池
+          toggleExpand();
+          $(".row").css("transform", "translateY(0px)");
+          $("#bg0").parent().parent().css("transform", "translateY(-100px) translateZ(-500px)");
+          $("#bond0").parent().parent().css("transform", "translateY(-100px) translateZ(-500px) rotateZ(45deg)");
+          $("#card0").parent().parent().css("transform", "translateY(-100px) translateZ(-760px)");
           pressTimes++;
         } else if(event.which === 32 && pressTimes === 1){
-          // 抽出全部
+          // 抽键合
           pressTimes++;
         } else if(event.which === 32 && pressTimes === 2){
+          // 抽背底
+          pressTimes++;
+        } else if(event.which === 32 && pressTimes === 3){
+          // 抽数字
+          pressTimes++;
+        } else if(event.which === 32 && pressTimes === 4){
+          // 最终卡片
+          pressTimes++;
+        } else if(event.which === 32 && pressTimes === 5){
           // 清空，重置
           toggleSpecialPrize();
           pressTimes = 0;
diff --git a/scripts.72999ec6.css b/scripts.72999ec6.css
index 44ecadc..bb0e026 100644
--- a/scripts.72999ec6.css
+++ b/scripts.72999ec6.css
@@ -841,7 +841,8 @@ body {
 .row {
     margin-right: 0;
     margin-left: 0;
-    margin-top: 50px;
+    margin-top: 400px;
+    transition: transform 2s;
 }
 
 body {