Skip to content

Commit

Permalink
二等奖基本完成
Browse files Browse the repository at this point in the history
  • Loading branch information
@Weslie0803
Weslie0803 committed Oct 29, 2022
1 parent 4db680e commit ce40697
Show file tree
Hide file tree
Showing 7 changed files with 240 additions and 23 deletions.
77 changes: 68 additions & 9 deletions animate.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,7 @@
height: 580px;
}
.NumRolling>ul li {
position: relative;
list-style-type: none;
float: left;
width: 290px;
Expand All @@ -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;
Expand All @@ -72,7 +72,7 @@
padding-left: 0px ;
}
.NumRolling>ul {
/* animation: runX 3s linear infinite; */
animation: runX 3s linear infinite;
padding-left: 0px ;
width: 3190px;
}
Expand Down Expand Up @@ -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;
Expand All @@ -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
}
27 changes: 25 additions & 2 deletions change.js
View file
Original file line number Diff line number Diff line change
@@ -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){
Expand All @@ -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)");
}
68 changes: 59 additions & 9 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,7 @@
</div>
</div>
<div id="container" class="container" >
<div id="stage" style="transform: translateZ(-250px);">
<div id="stage" style="transform: translateZ(-250px) rotateZ(45deg);">
<div id="shape" class="ring8 backfaces cubeShow_0">
<div id="bond0" class="plane eine"> <img src="抽奖软件UI/键和方式/1-H2.png"> </div>
<div id="bond1" class="plane zwei"> <img src="抽奖软件UI/键和方式/2-水.png"> </div>
Expand Down Expand Up @@ -68,16 +68,66 @@
<div class="showNum CardUndefined">
<img id="n1" src="抽奖软件UI/数字/0.png">
</div>
<div style="background-color: hsla(0,0%,100%,.6); position: absolute;width: 50px;
height: 50px;
left: 40px;
top: 40px;">
<div class="bondbg lefttop">
<div class="BondUndefined"></div>
</div>
<div class="bondbg rightbottom">
<div class="BondUndefined"></div>
</div>
</div>
</div>
</div>
<div id="container" class="container">
<div id="stage" style="transform: translateY(2500px);">
<div id="result1">
<div id="2p1" class="showNum">
<div class="NumRolling" >
<img class="centerNum" style="display: none;">
<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>
</ul>
</div>
</div>
<div class="bondbg2 lefttop">
<div class="BondUndefined"></div>
</div>
<div class="bondbg2 rightbottom">
<div class="BondUndefined"></div>
</div>
</div>
<div id="result2">
<div id="2p2" class="showNum">
<div class="NumRolling" >
<img class="centerNum">
<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>
</ul>
</div>
</div>
<div class="bondbg2 lefttop">
<div class="BondUndefined"></div>
</div>
<div style="background-color: hsla(0,0%,100%,.6); position: absolute;width: 50px;
height: 50px;
right: 40px;
bottom: 40px;">
<div class="bondbg2 rightbottom">
<div class="BondUndefined"></div>
</div>
</div>
Expand Down
56 changes: 53 additions & 3 deletions index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
25 changes: 25 additions & 0 deletions new3d.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
10 changes: 10 additions & 0 deletions scripts.72999ec6.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
Binary file added 抽奖软件UI/~$对应RGB色号.xlsx
View file
Binary file not shown.

0 comments on commit ce40697

Please sign in to comment.