From ce40697bc4798d8a2d89a85d10afdb47d8074433 Mon Sep 17 00:00:00 2001 From: Weslie0803 Date: Sat, 29 Oct 2022 17:17:21 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BA=8C=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 | 77 ++++++++++++++++-- change.js | 27 +++++- index.html | 68 ++++++++++++++-- index.js | 56 ++++++++++++- new3d.css | 25 ++++++ scripts.72999ec6.css | 10 +++ ...5\272\224RGB\350\211\262\345\217\267.xlsx" | Bin 0 -> 165 bytes 7 files changed, 240 insertions(+), 23 deletions(-) create mode 100644 "\346\212\275\345\245\226\350\275\257\344\273\266UI/~$\345\257\271\345\272\224RGB\350\211\262\345\217\267.xlsx" diff --git a/animate.css b/animate.css index 85bac71..0d49447 100644 --- a/animate.css +++ b/animate.css @@ -24,6 +24,7 @@ height: 580px; } .NumRolling>ul li { + position: relative; list-style-type: none; float: left; width: 290px; @@ -40,15 +41,14 @@ height: 100%; } .NumRolling>ul li img{ - width: 50%; - height: 50%; + max-width: 150px; + max-height: 150px; margin: auto; - margin-top: 30%; - text-align: center; - left: 0px; - right: 0px; - top: 0px; - bottom: 0px; + position: absolute; + left: 0; + right: 0; + top: 0; + bottom: 0; } .BondRolling>ul li img{ max-width: 50px; @@ -72,7 +72,7 @@ padding-left: 0px ; } .NumRolling>ul { - /* animation: runX 3s linear infinite; */ + animation: runX 3s linear infinite; padding-left: 0px ; width: 3190px; } @@ -234,6 +234,22 @@ width: 320px; height: 580px; } +#result1 { + transition: transform 2s; + transform-style: preserve-3d; + left: -10px; + width: 320px; + height: 580px; + position: absolute; +} +#result2 { + transition: transform 2s; + transform-style: preserve-3d; + right: -10px; + width: 320px; + height: 580px; + position: absolute; +} #result>.CardUndefined>img { position: absolute; @@ -244,4 +260,47 @@ bottom: 0; max-width: 150px; max-height: 150px; +} + +.bondbg { + background-color: hsla(0,0%,100%,.6); + position: absolute; + width: 50px; + height: 50px; +} +.bondbg2 { + background-color: transparent; + position: absolute; + width: 50px; + height: 50px; +} + +.lefttop { + left: 40px; + top: 40px; +} +.rightbottom { + right: 40px; + bottom: 40px; +} + +.centerNum { + position: absolute; + margin: auto; + left: 0; + right:0; + top: 0; + bottom: 0; + max-width: 150px; + max-height: 150px; +} + +.ring8>.plane { + height: 150px; + width: 150px +} + +.ring82>.plane { + height: 150px; + width: 150px } \ No newline at end of file diff --git a/change.js b/change.js index c90f8ec..7456cb7 100644 --- a/change.js +++ b/change.js @@ -1,14 +1,15 @@ var toggleThirdPrize = function () { $(".row").css("display", "none"); $("#result").parent().css("transform", "translateY(2500px)"); - $("#result").css("display", "none"); + // $("#result").css("display", "none"); $("#bg0").parent().parent().css("transform", "translateY(0px) translateZ(-250px)"); - $("#bond0").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)"); } var toggleExpand = function(){ //TODO $("#bg0").parent().toggleClass("ring8card").toggleClass("ring8card2"); + $("#bond0").parent().toggleClass("ring8").toggleClass("ring82"); $("#card0").parent().toggleClass("ringNum").toggleClass("cube"); } var toggleResult = function(num){ @@ -20,3 +21,25 @@ var toggleResult = function(num){ $("#result").css("display"," block"); $("#result").parent().css("transform"," translateY(0)"); } + +var toggleSecondPrize = function() { + $(".NumRolling").children("img").css("display", "none"); + $(".NumRolling").children("ul").css("display", "inherit"); + $(".row").css("display", "none"); + $("#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)"); +} + +var toggleFirstPrize = function() { + $(".NumRolling").children("img").css("display", "none"); + $(".NumRolling").children("ul").css("display", "inherit"); + $(".row").css("display", "none"); + $("#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)"); +} \ No newline at end of file diff --git a/index.html b/index.html index 2d8b296..4473355 100644 --- a/index.html +++ b/index.html @@ -32,7 +32,7 @@
-
+
@@ -68,16 +68,66 @@
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
    +
    • +
    • +
    • +
    • +
    • +
    • +
    • +
    • +
    • +
    • +
    • +
+
+
+
+
+
+
+
+
+
+
+
+
+ +
    +
    • +
    • +
    • +
    • +
    • +
    • +
    • +
    • +
    • +
    • +
    • +
+
+
+
-
+
diff --git a/index.js b/index.js index 5abfffd..990935a 100644 --- a/index.js +++ b/index.js @@ -216,22 +216,72 @@ $(document).ready(function () { pressTimes = 0; } } else if(prize === 2){ - if(event.which === 32 && pressTimes === 0){ + if(pressTimes === 0){ // 抽出家族 - pressTimes ++; + if(event.which === 80){ // press P :高分子 + $("#bg0").parent().parent().css("transform", "translateY(-1000px)"); + $("#bond0").parent().parent().css("transform", "translateY(-1000px)"); + $("#card0").parent().parent().css("transform", "translateY(-1000px)"); + $("#result1").parent().css("transform", "translateY(0px)"); + $("#2p1").css("background-image", "url(抽奖软件UI/底色/高分子/高分子1.png)"); + $("#2p2").css("background-image", "url(抽奖软件UI/底色/高分子/高分子2.png)"); + // $(".NumRolling").children("ul").children("li").children("img").css("filter", "drop-shadow(50px, 50px, #9d7a11)"); + // $(".bondbg2").css("filter", "dropshadow(50px, 50px ,#9d7a11)"); + pressTimes ++; + } else if(event.which === 77) { // press M: 金属 + $("#bg0").parent().parent().css("transform", "translateY(-1000px)"); + $("#bond0").parent().parent().css("transform", "translateY(-1000px)"); + $("#card0").parent().parent().css("transform", "translateY(-1000px)"); + $("#result1").parent().css("transform", "translateY(0px)"); + $("#2p1").css("background-image", "url(抽奖软件UI/底色/金属/金属1.png)"); + $("#2p2").css("background-image", "url(抽奖软件UI/底色/金属/金属2.png)"); + pressTimes ++; + } else if(event.which === 78) { // press N: 非金 + $("#bg0").parent().parent().css("transform", "translateY(-1000px)"); + $("#bond0").parent().parent().css("transform", "translateY(-1000px)"); + $("#card0").parent().parent().css("transform", "translateY(-1000px)"); + $("#result1").parent().css("transform", "translateY(0px)"); + $("#2p1").css("background-image", "url(抽奖软件UI/底色/非金/非金1.png)"); + $("#2p2").css("background-image", "url(抽奖软件UI/底色/非金/非金2.png)"); + pressTimes ++; + } else if(event.which === 67) { // press C: 复合 + $("#bg0").parent().parent().css("transform", "translateY(-1000px)"); + $("#bond0").parent().parent().css("transform", "translateY(-1000px)"); + $("#card0").parent().parent().css("transform", "translateY(-1000px)"); + $("#result1").parent().css("transform", "translateY(0px)"); + $("#2p1").css("background-image", "url(抽奖软件UI/底色/复合/复合1.png)"); + $("#2p2").css("background-image", "url(抽奖软件UI/底色/复合/复合2.png)"); + pressTimes ++; + } } else if(event.which === 32 && pressTimes === 1) { // 抽出数字 + $("#result1").toggleClass("jumpDown"); + $("#result2").toggleClass("jumpDown"); + $(".NumRolling").children("ul").css("display", "none"); + $(".NumRolling").children("img").css("display", "inherit"); + $(".NumRolling").children("img").attr("src", "抽奖软件UI/数字/"+numArr[2]+".png"); pressTimes++; } else if(event.which === 32 && pressTimes === 2) { // 重置 + $("#result1").toggleClass("jumpDown"); + $("#result2").toggleClass("jumpDown"); + clearNum(numArr); + numArr = getRandomNum(usedArr, config[0], config[1], config[2]); toggleSecondPrize(); pressTimes = 0; } } else if(prize === 1){ if(event.which === 32 && pressTimes === 0){ - // 一分为四 + // 扩张，出现卡池 pressTimes++; } else if(event.which === 32 && pressTimes === 1) { + // 抽键合奇偶 + } else if(event.which === 32 && pressTimes === 2) { + // 抽底色 + } else if(event.which === 32 && pressTimes === 3) { + // 抽数字 + // 生成最终卡片 + } else if(event.which === 32 && pressTimes === 4) { // 清空，重置 toggleFirstPrize(); pressTimes = 0; diff --git a/new3d.css b/new3d.css index 90c5a84..469ff13 100644 --- a/new3d.css +++ b/new3d.css @@ -23,6 +23,31 @@ transform: rotateY(315deg) translateZ(250px); } +.ring82>.eine { + transform: translateZ(350px); +} +.ring82>.zwei { + transform: rotateY(45deg) translateZ(350px); +} +.ring82>.drei { + transform: rotateY(90deg) translateZ(350px); +} +.ring82>.viel { + transform: rotateY(135deg) translateZ(350px); +} +.ring82>.funf { + transform: rotateY(180deg) translateZ(350px); +} +.ring82>.sechs { + transform: rotateY(225deg) translateZ(350px); +} +.ring82>.seben { + transform: rotateY(270deg) translateZ(350px); +} +.ring82>.acht { + transform: rotateY(315deg) translateZ(350px); +} + .ring8card>.plane img { max-width: 200px; max-height: 400px; diff --git a/scripts.72999ec6.css b/scripts.72999ec6.css index 2b92774..44ecadc 100644 --- a/scripts.72999ec6.css +++ b/scripts.72999ec6.css @@ -153,6 +153,16 @@ body { max-width: 100px; max-height: 100px; } +.ring8>.plane img{ + position: absolute; + margin: auto; + left: 0; + right:0; + top: 0; + bottom: 0; + max-width: 80px; + max-height: 80px; +} #shape.backfaces .plane { backface-visibility: visible diff --git "a/\346\212\275\345\245\226\350\275\257\344\273\266UI/~$\345\257\271\345\272\224RGB\350\211\262\345\217\267.xlsx" "b/\346\212\275\345\245\226\350\275\257\344\273\266UI/~$\345\257\271\345\272\224RGB\350\211\262\345\217\267.xlsx" new file mode 100644 index 0000000000000000000000000000000000000000..6e412d0ee66d5ec13ec3741c0abdb1d1079f6c62 GIT binary patch literal 165 acmZQcEG{ipAQ`YQBr+5;lmf8=9UuT=i4Xw* literal 0 HcmV?d00001