Skip to content

Commit dcf68c5

Browse files
leoncoolmoonleoncoolmoon
committed
improve looking
1 parent b59cb5b commit dcf68c5

File tree

1 file changed

+92
-30
lines changed

1 file changed

+92
-30
lines changed

‎32-24-Point-Poker-Game/index.html

Lines changed: 92 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -6,63 +6,111 @@
66
<meta name="viewport" content="width=device-width, initial-scale=1.0">
77
<title>24点</title>
88
<style>
9+
body {
10+
font-family: Arial, sans-serif;
11+
display: flex;
12+
flex-direction: column;
13+
align-items: center;
14+
background-color: #f0f8ff;
15+
margin: 0;
16+
padding: 20px;
17+
}
18+
h1 {
19+
color: #333;
20+
margin-bottom: 10px;
21+
}
22+
.game-info {
23+
display: flex;
24+
justify-content: space-between;
25+
width: 100%;
26+
max-width: 600px;
27+
margin-bottom: 20px;
28+
}
929
.card-container {
1030
display: flex;
11-
justify-content: flex-start;
12-
margin-top: 20px;
13-
width: 80%;
31+
justify-content: center;
1432
flex-wrap: wrap;
15-
33+
gap: 10px;
34+
margin-top: 20px;
35+
width: 100%;
36+
max-width: 600px;
1637
}
17-
1838
.card {
1939
width: 100px;
2040
height: 150px;
21-
background-color: #f0f0f0;
41+
background-color: #fff;
2242
border-radius: 15px;
2343
display: flex;
2444
justify-content: center;
2545
align-items: center;
2646
font-size: 24px;
2747
font-weight: bold;
28-
box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.2);
29-
margin: 1vmin;
48+
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
49+
transition: transform 0.2s;
50+
}
51+
.card:hover {
52+
transform: translateY(-5px);
3053
}
31-
3254
button {
33-
margin-top: 20px;
55+
margin: 10px;
3456
padding: 10px 20px;
3557
font-size: 16px;
3658
cursor: pointer;
59+
background-color: #4CAF50;
60+
color: white;
61+
border: none;
62+
border-radius: 5px;
63+
transition: background-color 0.3s;
64+
}
65+
button:hover {
66+
background-color: #45a049;
67+
}
68+
#operation {
69+
display: none;
70+
position: fixed;
71+
top: 50%;
72+
left: 50%;
73+
transform: translate(-50%, -50%);
74+
background-color: white;
75+
padding: 20px;
76+
border-radius: 10px;
77+
box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
78+
z-index: 1000;
79+
}
80+
#overlay {
81+
display: none;
82+
position: fixed;
83+
top: 0;
84+
left: 0;
85+
width: 100%;
86+
height: 100%;
87+
background-color: rgba(0, 0, 0, 0.5);
88+
z-index: 999;
3789
}
3890
</style>
3991
</head>
4092

4193
<body>
42-
<h1>24点</h1>
43-
<div id = "score" style="font-size: 2em;font-weight: bold;">得分: 0</div>
44-
<div style="display:flex;justify-content:space-between">
45-
46-
47-
<button onclick="drawCards()">抽牌</button>
48-
<button onclick="cal()" style="display: none;">算牌</button>
49-
<button onclick="gaveup()" >放弃牌</button>
50-
<button onclick="showResult(true)" style="display: none;">显示结果</button>
51-
<div id="counter" style="font-size: 2em;font-weight: bold;"></div>
94+
<h1>24点游戏</h1>
95+
<div class="game-info">
96+
<div id="score" style="font-size: 1.5em; font-weight: bold;">得分: 0</div>
97+
<div id="counter" style="font-size: 1.5em; font-weight: bold;"></div>
5298
</div>
53-
5499
<div>
55-
<div class="card-container" id="cardContainer"> <!-- 这里将显示抽出的牌 --> </div>
56-
<div id="outputs" style="display: none;font-size: 1.5em;" onclick="drawCards()"></div>
57-
<div id="inputs" ></div>
100+
<button onclick="drawCards()">开始</button>
101+
<button onclick="unhide()" id="calButton" style="display: none;">算牌</button>
102+
<button onclick="gaveup()">放弃牌</button>
103+
<button onclick="showResult(true)" style="display: none;">显示结果</button>
58104
</div>
105+
<div class="card-container" id="cardContainer"></div>
106+
<div id="outputs" style="display: none; font-size: 1.5em;" onclick="drawCards()"></div>
107+
<div id="inputs"></div>
108+
<div id="overlay" onclick="hide()"></div>
59109
<div id="operation">
60-
<!-- 显示四个按钮，代表四则运算，点击后赋值selectedMethod 0:+,1:-,2:*,3:/-->
61-
62-
<button onclick="selectedMethod(0)">+</button>
63-
<button onclick="selectedMethod(1)">-</button>
64-
<button onclick="selectedMethod(2)">*</button>
65-
<button onclick="selectedMethod(3)">/</button>
110+
<button onclick="selectedMethod(0)">＋</button>
111+
<button onclick="selectedMethod(1)">－</button>
112+
<button onclick="selectedMethod(2)">×</button>
113+
<button onclick="selectedMethod(3)">÷</button>
66114
</div>
67115
<script type="text/javascript" src="str.js"></script>
68116

@@ -79,6 +127,16 @@ <h1>24点</h1>
79127
const method = ['+', '-', '*', '/'];
80128
var interval;
81129
var score = 0;
130+
function unhide() {
131+
document.getElementById('operation').style.display = 'block';
132+
document.getElementById('overlay').style.display = 'block';
133+
}
134+
135+
function hide() {
136+
document.getElementById('operation').style.display = 'none';
137+
document.getElementById('overlay').style.display = 'none';
138+
}
139+
82140
function gaveup() {
83141
clearInterval(interval); // 停止计时器
84142
fail(); // 倒计时结束，触发fail函数
@@ -116,6 +174,7 @@ <h1>24点</h1>
116174
function selectedMethod(i) {
117175
selMethod = i;
118176
if (selectedCards.length == 2) {
177+
hide();
119178
var cd = calc(checkCardSourceReturnCardNumber(selectedCards[0]), selMethod, checkCardSourceReturnCardNumber(selectedCards[1]));
120179
document.getElementById(`card${selectedCards[0]}`).style.display = "none";
121180
document.getElementById(`card${selectedCards[1]}`).style.display = "none";
@@ -199,6 +258,9 @@ <h1>24点</h1>
199258
if (selectedCards.length < 2) {
200259
selectedCards.push(index);
201260
document.getElementById(`card${index}`).style.border = "2px solid blue";
261+
if(selectedCards.length == 2){
262+
unhide();
263+
}
202264
} else if (selectedCards.length == 2) {
203265
if (selMethod != -1) {
204266
var cd = calc(checkCardSourceReturnCardNumber(selectedCards[0]), selMethod, checkCardSourceReturnCardNumber(selectedCards[1]));

0 commit comments

Comments
 (0)