Skip to content

Commit c7f1c79

Browse files
leoncoolmoonleoncoolmoon
committed
24 point Game
1 parent ad6bd7a commit c7f1c79

File tree

2 files changed

+206
-0
lines changed

2 files changed

+206
-0
lines changed

‎32-24 Point Poker Game/index.html

Lines changed: 204 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,204 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<title>24点</title>
8+
<style>
9+
.card-container {
10+
display: flex;
11+
justify-content: flex-start;
12+
margin-top: 20px;
13+
width: 80%;
14+
flex-wrap: wrap;
15+
16+
}
17+
18+
.card {
19+
width: 100px;
20+
height: 150px;
21+
background-color: #f0f0f0;
22+
border-radius: 15px;
23+
display: flex;
24+
justify-content: center;
25+
align-items: center;
26+
font-size: 24px;
27+
font-weight: bold;
28+
box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.2);
29+
margin: 1vmin;
30+
}
31+
32+
button {
33+
margin-top: 20px;
34+
padding: 10px 20px;
35+
font-size: 16px;
36+
cursor: pointer;
37+
}
38+
</style>
39+
</head>
40+
41+
<body>
42+
<div>
43+
<button onclick="drawCards()">抽牌</button>
44+
<button onclick="cal()" style="display: none;">算牌</button>
45+
<button onclick="showResult(true)">显示结果</button>
46+
47+
</div>
48+
49+
<div>
50+
<div class="card-container" id="cardContainer"> <!-- 这里将显示抽出的牌 --> </div>
51+
<div id="outputs" style="display: none;font-size: 1.5em;"></div>
52+
<div id="inputs"></div>
53+
</div>
54+
<script type="text/javascript" src="str.js"></script>
55+
56+
<script>
57+
58+
var cards;
59+
// 扑克牌的数组（去掉大小王）
60+
const suits = ['♠', '♥', '♣', '♦'];
61+
const values = ['A', '2', '3', '4', '5', '6', '7', '8', '9', '10', 'J', 'Q', 'K'];
62+
const deck = [];
63+
64+
// 创建扑克牌数组
65+
for (let suit of suits) {
66+
for (let value of values) {
67+
deck.push(value + suit);
68+
}
69+
}
70+
//显示结果
71+
function showResult(show) {
72+
document.getElementById("outputs").style.display = show ? "block" : "none";
73+
}
74+
function drawCards() {
75+
// 清空上次输出
76+
document.getElementById("outputs").innerHTML = " ";
77+
showResult(false);
78+
// 随机抽取4张不重复的牌
79+
let drawnCards = [];
80+
while (drawnCards.length < 4) {
81+
const randomIndex = Math.floor(Math.random() * deck.length);
82+
const card = deck[randomIndex];
83+
if (!drawnCards.includes(card)) {
84+
drawnCards.push(card);
85+
}
86+
}
87+
88+
// 显示抽出的牌
89+
const cardContainer = document.getElementById('cardContainer');
90+
cardContainer.innerHTML = ''; // 清空容器
91+
92+
drawnCards.forEach(card => {
93+
const color = getColorForSuit(card.slice(-1)); // 根据花色获取颜色
94+
// 使用SVG绘制圆角矩形并显示牌
95+
const svg = `
96+
<svg width="100" height="150">
97+
<rect width="100" height="150" rx="15" ry="15" style="fill:#f0f0f0;stroke:${color};stroke-width:2" />
98+
<text x="50%" y="50%" alignment-baseline="middle" fill="${color}" text-anchor="middle" font-size="24" font-weight="bold">${card}</text>
99+
</svg>
100+
`;
101+
const div = document.createElement('div');
102+
div.className = 'card';
103+
div.innerHTML = svg;
104+
cardContainer.appendChild(div);
105+
});
106+
cards = drawnCards;
107+
cal();
108+
}
109+
function getColorForSuit(suit) {
110+
switch (suit) {
111+
case '♠': return '#1e1e1e'; // 黑色
112+
case '♥': return '#e60026'; // 红色
113+
case '♣': return '#1e1e1e'; // 黑色
114+
case '♦': return '#e60026'; // 红色
115+
default: return '#1e1e1e'; // 黑色
116+
}
117+
}
118+
function cal() {
119+
if (cards && cards.length == 4) {
120+
for (var i = 0; i < cards.length; i++) {
121+
go_to(cardToNumber(cards[i]));
122+
}
123+
124+
}
125+
126+
}
127+
var total_click = 0;
128+
// number of clicks so far, will be reset when it reaches 4, it never goes below 0
129+
var input_data = [];
130+
function sortNumber(a, b) {
131+
return a - b;
132+
}
133+
function cardToNumber(card) {
134+
135+
// 提取牌面的字符部分（去掉花色）
136+
const cardValue = card.slice(0, -1); // 获取除去最后一个字符（花色）的部分
137+
const cardIndex = values.indexOf(cardValue);
138+
139+
// 如果找到，输出其对应的数字（索引+2，因为'2'对应索引0）
140+
if (cardIndex !== -1) {
141+
return cardIndex + 1; // 索引转成对应的数字值
142+
} else {
143+
// 错误处理（如果没有找到对应的值，可以输出错误信息）
144+
console.error(`Invalid card value: ${cardValue}`);
145+
}
146+
147+
return -1;
148+
}
149+
150+
function find_solution(fnum) {
151+
fnumsted = fnum.slice();
152+
fnumsted.sort(sortNumber);
153+
begin = the_string.indexOf("[" + fnumsted + "]");
154+
begin1 = the_string.indexOf("]", begin);
155+
end1 = the_string.indexOf("[", begin1);
156+
solution_F = 0;
157+
if (end1 - begin1 < 4) {
158+
// no solutions
159+
output_str = "[ <font color =blue>" + fnum.toString().replace(/,/g, " ") + "</font> ]没有解法.";
160+
} else {
161+
sol_str = the_string.substr(begin1 + 2, end1 - begin1 - 3);
162+
sol_str = sol_str.replace(/x/g, "&times;");
163+
sol_vec = sol_str.split(" ");
164+
f_str = "";
165+
for (ii = 0; ii < sol_vec.length; ii++) {
166+
f_str += "&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;[" + (ii + 1) + "]解法：" + sol_vec[ii] + "<br>";
167+
}
168+
output_str = "[ <font color =blue>" + fnum.toString().replace(/,/g, " ") + "</font> ]共有解法：<br><font color = green>" + f_str + "</font> ";
169+
solution_F = 1;
170+
}
171+
172+
document.getElementById("outputs").innerHTML = output_str;
173+
174+
}
175+
176+
177+
function go_to(x) {
178+
179+
if (x == -1) // backspace
180+
{
181+
if (total_click > 0) {
182+
total_click--;
183+
input_data.pop();
184+
}
185+
} else {
186+
total_click++;
187+
input_data.push(x);
188+
if (total_click == 1)
189+
document.getElementById("outputs").innerHTML = " ";
190+
if (total_click == 4) {
191+
find_solution(input_data);
192+
input_data = [];
193+
total_click = 0;
194+
}
195+
}
196+
197+
str1 = input_data.toString().replace(/,/g, " ");
198+
document.getElementById("inputs").innerHTML = str1 + "<br>";
199+
// display the inputs
200+
}
201+
</script>
202+
</body>
203+
204+
</html>

0 commit comments

Comments
 (0)