Javascript----实现21点游戏
Posted SunLike阿理旺旺
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Javascript----实现21点游戏相关的知识,希望对你有一定的参考价值。
1、效果
洗牌:
要牌:
亮牌:
2、html代码
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>21点游戏</title> <link rel="stylesheet" type="text/css" href="css/21pointGame.less"> </head> <body> <div class="container"> <div class="header"> <div class="nav"> <h2>21点游戏</h2> </div> </div> <div class="banker"> <div class="banker-point point" id=\'banker-point\'>12</div> <div class="box" id=\'zhaungjia-box\'> </div> <div class="img"> <img src="/imgs/banker.png"> </div> </div> <div class="player"> <div class="player-point point" id=\'player-point\'>21</div> <div class="box" id=\'player-box\'> </div> <div class="img"> <img src="/imgs/player.png"> </div> </div> <div class=\'option\'> <fieldset> <legend>玩家</legend> <a href="#" class=\'player-add\' id=\'player-add\'>要牌</a> <a href="#" class=\'player-show\' id=\'player-show\'>亮牌</a> <a href="#" class=\'refresh\' id=\'refresh\'>洗牌</a> </fieldset> </div> <div class="winner"> <span>赢家:</span> <span class=\'winner-val\' id=\'winner-val\'></span> </div> </div> <script type="text/javascript" src = \'js/21pointGame.js\'></script> </body> </html>
3、less代码
.container { width: 1080px; height: 700px; box-shadow: 0 0 100px 10px gray; margin: 0 auto; } .header { width: 100%; height: 150px; line-height: 30px; text-align: right; background-image: url("/imgs/nav.jpg"); background-size: 1080px 100%; } .header span { margin: 0 20px 0 0; } .nav { height: 150px; line-height: 150px; text-align: center; font-weight: bold; font-size: 40px; } .img{ position: absolute; left: 0; height: 160px; width: 120px; overflow: hidden; img{ height: 100%; width: 120px; } } .banker, .player { width: 100%; height: 200px; position: relative; margin: 0 20px 0 20px; top: 0; left: 0; } .box{ position: absolute; top: 20px; left: 140px; } .point { height: 40px; line-height: 40px; width: 100px; text-align: center; font-size: 20px; } .puke-list1 { position: absolute; top: 40px; left: 0; width: 72px; height: 107px; overflow: hidden; box-shadow: 0 0 10px 3px gray; img { width: 72px; height: 107px; } } .puke-list2 { position: absolute; top: 40px; left: 0; width: 72px; height: 107px; overflow: hidden; box-shadow: 0 0 10px 1px gray; img { width: 72px; height: 107px; } } .option {} .winner-val { color: red; font-size: 30px; }
4、js代码
var timeSpan = document.getElementById("time"); var point1 = document.getElementById("banker-point"); var point2 = document.getElementById("player-point"); var box1 = document.getElementById("zhaungjia-box"); var box2 = document.getElementById("player-box"); var add = document.getElementById("player-add"); var show = document.getElementById("player-show"); var refresh = document.getElementById("refresh"); var winnerVal = document.getElementById("winner-val"); var left1 = 0; var left2 = 0; var left3 = 0; var bankerPoint = 0; var playerPoint = 0; var is_finish = false; var is_over = false; ////console.log(show); init(); //初始化 function init() { box1.innerHTML = ""; box2.innerHTML = ""; var pai1 = getPai(); var n1 = pai1.number > 9 ? 10 : pai1.number; bankerPoint += n1; point1.innerText = "庄家:"+bankerPoint+"点"; var obj = "<div class=\'puke-list1\' style = \'left: 0px\'>" + "<img src=\'static/imgs/" + pai1.url + ".jpg\'>" + "</div>"; box1.innerHTML += obj; var pai2 = getPai(); var n2 = pai2.number > 9 ? 10 : pai2.number; playerPoint += n2; point2.innerText = "玩家:"+playerPoint+"点"; var obj = "<div class=\'puke-list1\' style = \'left: 0px\'>" + "<img src=\'static/imgs/" + pai2.url + ".jpg\'>" + "</div>"; box2.innerHTML += obj; //console.log("洗牌:"+bankerPoint + "," + playerPoint); } //玩家要牌 add.addEventListener("click", function() { if (!is_finish) { left2 += 40; var pai = getPai(); var n = pai.number > 9 ? 10 : pai.number; playerPoint += n; point2.innerText = "玩家:"+playerPoint+"点"; //console.log("玩家:"+bankerPoint + "," + playerPoint); var obj = "<div class=\'puke-list2\' style = \'left:" + left2 + "px\'>" + "<img src=\'static/imgs/" + pai.url + ".jpg\'>" + "</div>"; box2.innerHTML += obj; if (playerPoint > 21) { winnerVal.innerText = "玩家已爆,庄家赢!"; is_finish = true; } } }) //亮牌 var clock; show.addEventListener("click", function() { clock = setInterval(function() { if (bankerPoint <= 21 && bankerPoint < playerPoint) { var pai = getPai(); var n = pai.number > 9 ? 10 : pai.number; bankerPoint += n; point1.innerText = "庄家:"+bankerPoint+"点"; //console.log("庄家:"+bankerPoint + "," + playerPoint); left1 += 40; var obj = "<div class=\'puke-list1\' style = \'left:" + left1 + "px\'>" + "<img src=\'static/imgs/" + pai.url + ".jpg\'>" + "</div>"; box1.innerHTML += obj; if (bankerPoint > 21) { winnerVal.innerHTML = "庄家已爆,玩家赢!"; clearInterval(clock); is_over = true; } } else { if (bankerPoint > playerPoint) { winnerVal.innerText = "庄家点数大,庄家赢!"; } else if (bankerPoint == playerPoint) { winnerVal.innerText = "点数相同,平局!"; } else { winnerVal.innerText = "玩家点数大,玩家赢!"; } } }, 1000) }) //洗牌 refresh.addEventListener("click", function() { bankerPoint = 0; playerPoint = 0; init(); is_finish = false; left1 = 0; left2 = 0; winnerVal.innerText = ""; clearInterval(clock); }) //获取随机牌 function getPai() { var ran = parseInt(Math.random() * 51) + 1; //console.log("ran:" + ran); var imgUrl = ""; var number; if (ran >= 1 && ran <= 52) { if (ran < 10) { imgUrl = "0" + ran; } else { imgUrl = ran; } if(ran>13){ number = ran % 13; if(number == 0){ number = 13; } } else{ number = ran; } } else { return -1; } var pai = { "number": number, "url": imgUrl } return pai; } function getTime() { var date = new Date(); var year = date.getFullYear(); var month = date.getMonth(); var day = date.getDate(); var hour = date.getHours(); var minute = date.getMinutes(); var second = date.getSeconds(); var weekday = date.getDay(); switch (weekday) { case "1": "星期一"; break; case "2": "星期二"; break; case "3": "星期三"; break; case "4": "星期四"; break; case "5": "星期五"; break; case "6": "星期六"; break; case "7": "星期日"; break; } var s = year + "年" + month + "月" + day + "日 " + hour + ":" + minute + ":" + second; return s; }
3、总结:
游戏规则还不能灵活设定
以上是关于Javascript----实现21点游戏的主要内容,如果未能解决你的问题,请参考以下文章