-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
481 lines (480 loc) · 24.2 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>BlackJack Game</title>
<link href="css/style.css" type="text/css" rel="stylesheet">
<script src="js/poker.js"></script>
<script src="js/player.js"></script>
<script src="js/modal_frame.js"></script>
<script>
window.onload = function () {
var players = [],
banker = new Player("庄家"),
container = document.getElementsByClassName("container")[0],
main = document.getElementsByClassName("main")[0],
buttonArea = document.getElementById("buttonArea"),
mask = document.getElementById("mask"),
chips = document.getElementById("chip"),
sumChip = document.getElementById("sumChip"),
sumScore = document.getElementById("sumScore"),
bankerScore = document.getElementById("bankerScore"),
enterGameBtn = document.getElementById("enterGameBtn"),
gameRuleBtn = document.getElementById("gameRuleBtn"),
closeRuleBtn = document.getElementById("closeRuleBtn"),
newGameBtn = document.getElementById("newGame"),
hitBtn = document.getElementById("hit"),
standBtn = document.getElementById("stand"),
doubleBtn = document.getElementById("double"),
insurBtn = document.getElementById("insurance"),
surrenBtn = document.getElementById("surrender"),
cardsArea = document.getElementById("playerCards"),
playerCards = cardsArea.children[0],
bankerCards = document.getElementById("bankerCards"),
playerMoney = document.getElementById("playerMoney"),
//winSize = Modal.getViewportSize(),
bodySize = document.getElementsByTagName("body")[0].getBoundingClientRect(),
sclSize = Modal.getScrollOffsets(),
playerCardAmount, bankerCardAmount;
// 重写庄家与玩家不同的属性
banker.money = 100000;
banker.getScore = function () {
if (this.isBlackJack) {
this.score[0] = "BlackJack";
}
if (this.isBust) {
this.score[0] = "Bust";
}
return this.score[0];
};
// 初始化按钮，设置出play外按钮为不可用状态
disableAllBtn();
// 结束游戏，根据玩家状态结算金钱，并展示结果
function endGame() {
switch (String(players[0].status)) {
case "1":
if (players[0].isBlackJack) {
players[0].money = players[0].money + players[0].wager * 3;
banker.money = banker.money - players[0].wager * 2;
} else {
players[0].money = players[0].money + players[0].wager * 2;
banker.money -= players[0].wager;
}
document.getElementById("dialog").style.backgroundImage = "url(" + "\"./image/win.png\"" + ")";
initDialog();
Modal.fadeIn("dialog", 500);
break;
case "2":
players[0].money += players[0].wager;
document.getElementById("dialog").style.backgroundImage = "url(" + "\"./image/tie.png\"" + ")";
initDialog();
Modal.fadeIn("dialog", 500);
break;
case "3":
if (banker.isBlackJack) {
banker.money = banker.money + players[0].wager * 2;
players[0].money -= players[0].wager;
} else {
banker.money += players[0].wager;
}
document.getElementById("dialog").style.backgroundImage = "url(" + "\"./image/lose.png\"" + ")";
initDialog();
Modal.fadeIn("dialog", 500);
break;
}
players[0].wager = 0; // 清空筹码，重新开始一局
sumChip.innerHTML = "0"; // 清空当前筹码
// 设置play按钮之外的其他按钮为不可用状态
disableAllBtn();
newGameBtn.disabled = false;
}
// 实现向某元素中添加类
function addBtnClass (e, classNameToAdd) {
e.className = e.className + " " + classNameToAdd;
}
// 实现向按钮元素中移除所有后来添加的类
function recoverBtnClass (e) {
e.className = e.className.split(" ")[0];
}
// 遍历功能按钮，设置除play外所有按钮不可用
function disableAllBtn () {
var buttons = document.getElementsByClassName("normalBtn");
for (var i in buttons) {
buttons[i].disabled = true;
addBtnClass(buttons[i], "btn-disabled");
}
}
// 初始化展示结果模态框
function initDialog() {
var dialog = document.getElementById("dialog");
var mask = document.getElementById("mask");
mask.style.display = "block";
dialog.style.display = "block";
var curSize = dialog.getBoundingClientRect();
var btnAreaSize = document.getElementById("buttonArea").getBoundingClientRect();
dialog.style.bottom = String(sclSize.h + btnAreaSize.height) + "px";
dialog.style.left = String(sclSize.w + (bodySize.width - curSize.right + curSize.left) / 2) + "px";
dialog.style.opacity = 0;
}
// 初始化提示下注的模态框
function initChipDialog() {
var dialog = document.getElementById("chipDialog");
var mask = document.getElementById("mask");
mask.style.display = "block";
dialog.style.display = "block";
var curSize = dialog.getBoundingClientRect(); // 获取当前元素尺寸信息
var height = dialog.style.height,
width = dialog.style.width;
console.log(bodySize.height + " " + bodySize.width + " " + curSize.height + " " + sclSize.h);
dialog.style.top = String((bodySize.height - curSize.height) / 2) + "px";
dialog.style.left = String(sclSize.w + (bodySize.width - curSize.right + curSize.left) / 2) + "px";
dialog.style.opacity = 0;
}
// 进入游戏按钮事件
enterGameBtn.onclick = function () {
Modal.fadeOut("mask", 500);
Modal.fadeOut("startDialog", 500);
players[0] = new Player();
};
// 展示游戏规则按钮事件
gameRuleBtn.onclick = function () {
Modal.slideIn("gameRule", 500);
};
// 关闭游戏规则按钮事件
closeRuleBtn.onclick = function () {
Modal.slideOut("gameRule", 500);
};
// play按钮事件
newGameBtn.onclick = function () {
// 判断是否下注，若未下注，需下注
if (players[0].wager == 0) {
initChipDialog();
Modal.fadeIn("chipDialog", 500);
return;
}
// 重新洗牌
Poker.init();
// 初始化玩家
playerCardAmount = 0;
players[0].init();
// 删除上局的牌堆
while (playerCards.children.length > 0) {
playerCards.removeChild(playerCards.children[0]);
}
// 展示玩家的牌以及当前点数信息
var card = document.createElement("li"); // 创建新的牌
var cardImg = document.createElement("img");
cardImg.src = "image/pokers/" + players[0].cards[0].color + String(players[0].cards[0].num) + ".jpg";
card.appendChild(cardImg);
playerCardAmount++;
card.id = "card" + String(playerCardAmount);
playerCards.appendChild(card);
changePosition(card.id, playerCardAmount);
Modal.fadeIn(card.id, 500);
card = document.createElement("li");
cardImg = document.createElement("img");
cardImg.src = "image/pokers/" + players[0].cards[1].color + String(players[0].cards[1].num) + ".jpg";
card.appendChild(cardImg);
playerCardAmount++;
card.id = "card" + String(playerCardAmount);
playerCards.appendChild(card);
changePosition(card.id, playerCardAmount);
Modal.fadeIn(card.id, 500);
sumScore.innerHTML = String(players[0].getScore());
// 初始化庄家
banker.init();
bankerCardAmount = 0;
// 移除上局庄家的牌
while (bankerCards.children.length > 0) {
bankerCards.removeChild(bankerCards.children[0]);
}
// 展示庄家的一张明牌一张暗牌，并展示明牌的点数
card = document.createElement("li");
cardImg = document.createElement("img");
cardImg.src = "image/pokers/cardBackground.jpg";
card.appendChild(cardImg);
bankerCardAmount++;
card.id = "bankerCard" + String(bankerCardAmount);
bankerCards.appendChild(card);
changePosition(card.id, bankerCardAmount);
Modal.fadeIn(card.id, 500);
card = document.createElement("li");
cardImg = document.createElement("img");
cardImg.src = "image/pokers/" + banker.cards[1].color + String(banker.cards[1].num) + ".jpg";
card.appendChild(cardImg);
bankerCardAmount++;
card.id = "bankerCard" + String(bankerCardAmount);
bankerCards.appendChild(card);
changePosition(card.id, bankerCardAmount);
Modal.fadeIn(card.id, 500);
bankerScore.innerHTML = String(banker.showScore());
// 设置按钮状态
if (players[0].isBlackJack) { // 如果自己是BlackJack，用按钮状态告诉玩家只能停牌
standBtn.disabled = false;
recoverBtnClass(standBtn);
} else {
hitBtn.disabled = false;
recoverBtnClass(hitBtn);
doubleBtn.disabled = false;
recoverBtnClass(doubleBtn);
standBtn.disabled = false;
recoverBtnClass(standBtn);
// 判断是否可投降或买保险
if (banker.cards[1].num == 1) {
insurBtn.disabled = false;
recoverBtnClass(insurBtn);
} else {
surrenBtn.disabled = false;
recoverBtnClass(surrenBtn);
}
}
// 设置play按钮不可用，发牌之后不结束牌局不可换牌
newGameBtn.disabled = false;
};
// 设定牌的位置
function changePosition(id, num) {
var e = document.getElementById(id);
if (num > 1) {
e.style.left = String(-(20*(num-1))) + "px";
e.style.zIndex = num;
}
e.parentNode.children[0].style.marginLeft = String(20*(num-1)) + "px";
};
// 点击模糊层的时间
mask.onclick = function () {
if (document.getElementById("startDialog").style.display != "none") {
return;
}
if (document.getElementById("dialog").style.display == "block") {
Modal.fadeOut("dialog", 500);
} else {
Modal.fadeOut("chipDialog", 500);
}
mask.style.display = "none";
};
// 利用事件委托，来完成筹码的点击事件
if (chips.addEventListener) {
chips.addEventListener("click",
function (e) {
if (e.target && e.target.nodeName == "IMG") {
var chip = e.target.id;
var sum = parseInt(sumChip.innerHTML);
sum += parseInt(chip);
sumChip.innerHTML = sum;
players[0].wager = parseInt(sum);
players[0].money -= parseInt(chip);
playerMoney.innerHTML = players[0].money;
}
}
);
} else {
chips.attachEvent("onclick",
function (e) {
if (e.target && e.target.nodeName == "IMG") {
var chip = e.target.id;
var sum = parseInt(sumChip.innerHTML);
sum += parseInt(chip);
sumChip.innerHTML = sum;
players[0].wager = parseInt(sum);
players[0].money -= parseInt(chip);
playerMoney.innerHTML = players[0].money;
}
}
);
}
// 拿牌按钮事件
hitBtn.onclick = function () {
// 若玩家开始拿牌，便不能选择投降以及双倍
surrenBtn.disabled = true;
addBtnClass(surrenBtn, "btn-disabled");
doubleBtn.disabled = true;
addBtnClass(doubleBtn, "btn-disabled");
// 拿牌操作
players[0].getCard();
var length = players[0].cards.length;
var card = document.createElement("li");
var cardImg = document.createElement("img");
cardImg.src = "image/pokers/" + players[0].cards[length-1].color + String(players[0].cards[length-1].num) + ".jpg";
card.appendChild(cardImg);
playerCardAmount++;
card.id = "card" + String(playerCardAmount);
playerCards.appendChild(card);
changePosition(card.id, playerCardAmount);
Modal.fadeIn(card.id);
sumScore.innerHTML = String(players[0].getScore());
if (players[0].score[0] == "Bust") {
players[0].status = 3;
endGame();
playerMoney.innerHTML = players[0].money;
}
};
// 停牌按钮事件，庄家拿牌，并根据庄家的牌与玩家的牌的比较给出玩家的输赢状态
standBtn.onclick = function () {
document.getElementById("bankerCard1").children[0].src = "image/pokers/" + banker.cards[0].color + String(banker.cards[0].num) + ".jpg";
bankerScore.innerHTML = String(banker.getScore());
// 判断输赢
if (banker.isBlackJack) {
if (players[0].isBlackJack) {
players[0].status = 2;
} else {
players[0].status = 3;
}
} else {
while ((banker.score[0] < players[0].showScore() || banker.score[0] < 17) && !banker.isBust) {
if (banker.score[0] > (parseInt(players[0].showScore()) + 11)) {
break;
}
banker.getCard();
// 庄家区域的dom处理
var card = document.createElement("li");
var cardImg = document.createElement("img");
cardImg.src = "image/pokers/" + banker.cards[banker.cards.length-1].color + String(banker.cards[banker.cards.length-1].num) + ".jpg";
card.appendChild(cardImg);
//card.innerHTML = banker.cards[banker.cards.length-1].color + banker.cards[banker.cards.length-1].num;
bankerCardAmount++;
card.id = "bankerCard" + String(bankerCardAmount);
bankerCards.appendChild(card);
changePosition(card.id, bankerCardAmount);
Modal.fadeIn(card.id, 500);
bankerScore.innerHTML = String(banker.getScore());
}
if (banker.isBust) {
players[0].status = 1;
} else {
if (players[0].isBlackJack) {
players[0].status = 1;
} else if (banker.score[0] > players[0].score[0]) {
players[0].status = 3;
} else if (banker.score[0] == players[0].score[0]) {
players[0].status = 2;
} else {
players[0].status = 1;
}
}
}
endGame();
playerMoney.innerHTML = players[0].money;
};
// 双倍按钮点击事件
doubleBtn.onclick = function () {
players[0].money -= players[0].wager;
players[0].wager *= 2;
playerMoney.innerHTML = players[0].money;
sumChip.innerHTML = players[0].wager;
hitBtn.onclick();
if (!players[0].isBust) {
standBtn.onclick();
}
};
// 买保险事件
insurBtn.onclick = function () {
var insurance = players[0].wager / 2;
if (banker.isBlackJack) {
// 买保险成功，玩家直接获得游戏胜利，并拿回双倍保险金
banker.money -= (insurance*2);
players[0].money += (insurance*2);
//document.getElementById("dialog").style.backgroundImage = "url(" + "\"./image/win.png\"" + ")";
players[0].status = 1;
endGame();
} else {
banker.money += insurance;
players[0].money -= insurance;
document.getElementById("dialog").style.backgroundImage = "url(" + "\"./image/lose.png\"" + ")";
initDialog();
Modal.fadeIn("dialog", 500);
playerMoney.innerHTML = players[0].money;
// 买保险失败，玩家不能再买，游戏继续
insurBtn.disabled = true;
addBtnClass(insurBtn, "btn-disabled");
}
};
// 投降事件，投降即视为结束当前一局
surrenBtn.onclick = function () {
players[0].money += (players[0].wager/2);
banker.money = (players[0].wager/2);
document.getElementById("dialog").style.backgroundImage = "url(" + "\"./image/lose.png\"" + ")";
initDialog();
Modal.fadeIn("dialog", 500);
playerMoney.innerHTML = players[0].money;
// 投降之后，清空筹码，除play外所有按钮不可用，重新开牌
players[0].wager = 0;
sumChip.innerHTML = "0";
disableAllBtn();
newGameBtn.disabled = false;
}
}
</script>
</head>
<body>
<div class="container">
<img class="bgImg" src="image/main.jpg">
<div class="main">
<img class="bgImg" src="image/table.jpg">
<div id="table-board">
<div class="bankerArea">
<div id="banker">庄家</div>
<div class="bankerCards">
<ul id="bankerCards"></ul>
</div>
<div class="scoreArea">
<p><span id="bankerScore">0</span></p>
</div>
</div>
<div class="playerArea">
<div class="scoreArea">
<p><span id="sumScore">0</span></p>
</div>
<div class="chipArea">
<p><span><span class="smCoin"><img src="image/smCoin.png"></span><span id="sumChip">0</span></span></p>
</div>
<div id="playerCards">
<ul>
</ul>
</div>
<div class="chip">
<ul id="chip">
<li><img id="100" src="image/wager100.jpg"></li>
<li><img id="200" src="image/wager200.jpg"></li>
<li><img id="500" src="image/wager500.jpg"></li>
</ul>
</div>
<div id="player">玩家</div>
</div>
</div>
</div>
<div id="buttonArea">
<p>
<button id="newGame"></button>
<button class="normalBtn" id="hit">拿 牌</button>
<button class="normalBtn" id="double">双 倍</button>
<button class="normalBtn" id="stand">停 牌</button>
<button class="normalBtn" id="insurance">保 险</button>
<button class="normalBtn" id="surrender">投 降</button>
<span class="bgCoin"><img src="image/bgCoin.png"> </span><span id="playerMoney">10000</span>
</p>
</div>
</div>
<div id="mask"></div>
<div id="dialog"></div>
<div id="chipDialog">
<div id="chipBtn"><img src="image/chipButton.png"></div>
<div class="chipDiaContent"><p>请先点击下方筹码下注</p></div>
</div>
<div id="startDialog">
<div id="gameRule">
<div class="ruleTitle"><span>BlackJack 21点游戏规则</span><span id="closeRuleBtn"></span></div>
<div class="ruleContent"><p>21点又名黑杰克（英文：Blackjack），是一款极具趣味性的牌类游戏。游戏共有一副牌，首先
进行下注，然后点击play按钮进行发牌。系统会给庄家和玩家各发两张牌，一张暗牌，一张明牌。大家手中扑克点数的计算是:
K、Q、J 和 10 牌都算作 10 点。A 牌既可算作1 点也可算作11 点，由玩家自己决定。其余所有2 至9 牌均按其原面值计算。
首先玩家开始要牌，如果玩家拿到的前两张牌是一张 A 和一张10点牌，就拥有黑杰克(Blackjack);此时，如果庄家没有黑杰克，
玩家就能赢得2倍的赌金(1赔2)。如果庄家的明牌有一张A，则玩家可以考虑买不买保险，金额是赌筹的一半。如果庄家是blackjack，
那么玩家拿回保险金并且直接获胜;如果庄家没有blackjack则玩家输掉保险继续游戏。没有黑杰克的玩家可以继续拿牌，可以随意要多少张。
目的是尽量往21点靠，靠得越近越好，最好就是21点了。在要牌的过程中，如果所有的牌加起来超过21点，玩家就输了--叫爆掉(Bust)，
游戏也就结束了。假如玩家没爆掉，又决定不再要牌了，点击停牌按钮停止要牌，这时庄家开始要牌，并最终给出结果。假如庄家爆掉，
那庄家输。假如庄家没爆掉，庄家与玩家比点数大小，大为赢。一样的点数为平手，堵住返回给玩家。</p></div>
</div>
<div id="enterGameBtn">进入游戏</div>
<span id="gameRuleBtn">游戏规则</span>
</div>
</body>
</html>