起因
现在大家斗地主的时候往往喜欢在每局结束后进行微信转账，然而这样的转帐过程往往比较浪费时间，所以咱们可以自己写一个简单的斗地主计分器来提高我们 赢钱的效率🤪。
之前尝试过用python写脚本来实现计分功能，然而并不太好用，即使是再简陋的功能，也没有人喜欢对着黑框框不断输入，索性用js写一个这样的计分功能
实现
首先看下实现效果
上图中的操作说明能够大致描述我们的思路
1、页面html
html没什么好说的，用的ui框架是bootstrap
<html lang="en">
<head>
<meta charset="UTF-8">
<title>扑克计分器</title>
<link rel="stylesheet" href="../static/css/bootstrap.min.css">
<script src="../static/js/bootstrap.min.js"></script>
<script src="../static/js/jquery.min.js"></script>
<script src="../static/js/main.js"></script>
</head>
<body>
<div class="container">
<div class="row clearfix">
<div class="col-md-12 column">
<h2>扑克计分器</h2>
<p>操作说明:</p>
<p>1、首先输入三位玩家名称以及设置基础倍率，点击开启本轮开启计分器</p>
<p>2、每局结束在下拉框中选择本轮地主，获胜方（地主/农民）以及本轮倍率</p>
<p>3、点击确认按钮将本局信息加入到计分器中，计分器动态生成本轮总结果</p>
<br>
<!--f玩家用户名输入，以及基础倍率-->
<div class="base_info">
<div class="form-group">
<label for="exampleInputEmail1">Player1</label>
<input type="text" class="form-control" id="player1" />
</div>
<div class="form-group">
<label for="exampleInputEmail1">Player2</label>
<input type="text" class="form-control" id="player2" />
</div>
<div class="form-group">
<label for="exampleInputEmail1">Player3</label>
<input type="text" class="form-control" id="player3" />
</div>
<div class="form-group">
<label for="exampleInputEmail1">基础倍率（该输入框仅能输入数字）</label>
<input type="text" class="form-control" id="base" oninput="value=value.replace(/[^\d]/g,'')" value=1 />
</div>
<br><button type="submit" id="start_game" class="btn btn-primary" onclick="player_chose()">开启本轮</button> <br>
</div>
<!--每轮输入地主名称、地主是否胜利、本轮倍率-->
<br><br>
<div id="round">
<label for="lords">地主</label>
<select name="lords" id="lords"></select>
<label for="winner">获胜方</label>
<select name="winner" id="winner">
<option value="lord">地主</option>
<option value="farmer">农民</option>
</select>
<label for="multiply">本轮倍率</label>
<select name="multiply" id="multiply"></select>
</div>
<br>
<button type="submit" class="btn btn-primary" onclick="generate_log()">确认</button>
<button type="submit" class="btn btn-danger" onclick="back_log()" id="back_log">撤销</button>
<br><br>
<div id="result_info" style="overflow: auto">
</div>
<table class="table table-bordered" id="log_table">
<thead>
<tr id="headers">
<th>回合数</th>
</tr>
</thead>
<tbody id="log_body">
</tbody>
</table>
<br><button type="submit" class="btn btn-primary" onclick="round_over()">结束本轮</button> <br>
</div>
</div>
</div>
</body>
</html>
2、js操作–全局变量
var player1=''
var player2=''
var player3=''
var players=[]
var base=0
//总分数
var scores={}
// 每一轮的得分结果
var logs=[]
//回合数
var rounds=0
3、js操作–数据初始化
首先是初始化数据，在玩家输入完毕名称以后，将自动填充玩家列表到"开启本轮"下方的各个选项。同时，点击了开启本轮按钮后，玩家信息将变为不可编辑状态，需要点击"结束本轮"(页面刷新)按钮后才可恢复编辑
//点击开启本轮后初始化数据
var player_chose=function (){
//初始化数据
player1=$("#player1").val()
player2=$("#player2").val()
player3=$("#player3").val()
players=[player1,player2,player3]
for (var i in players){
scores[players[i]]=0
}
base=parseInt($("#base").val())
$("#player1").attr("disabled","disabled")
$("#player2").attr("disabled","disabled")
$("#player3").attr("disabled","disabled")
$("#base").attr("disabled","disabled")
$("#start_game").attr("disabled","disabled")
console.log("Players:"+players)
//初始化地主下拉框选项以及记录表格
for ( var index in players){
var text=' <option>'+players[index]+'</option>'
$("#lords").append(text)
text='<th>'+players[index]+'</th>'
$("#headers").append(text)
}
//初始化倍率下拉框
var temp=1
for (var i=1;i<9;i++){
var text=' <option>'+temp+'</option>'
$("#multiply").append(text)
temp=temp*2
}
}
4、js操作–每局结算
每局结算通过三个参数决定 ：本轮地主、获胜方(地主/农民)以及本轮倍率。根据结算结果生成提示信息以及每轮的表格
//计算结果,列表生成
//计算结果,列表生成
var generate_log=function (){
$("#result_info").html('')
var last={}
rounds+=1
var lord=$("#lords option:selected").text()
var winner=$("#winner option:selected").text()
var multiply=parseInt($("#multiply option:selected").text())
//本轮的分数为 基础倍率*本轮倍率
var score=base*multiply
//地主获胜
if (winner=="地主") {
scores[lord] += score * 2
last[lord]=score*2
for (var player of players) {
if (player != lord) {
scores[player] -= score
last[player]=-score
}
}
}
//农民获胜
else{
scores[lord] -= score * 2
last[lord]=-score*2
for (var player of players) {
if (player != lord) {
scores[player] += score
last[player]=score
}
}
}
// 动态生成总计得分信息
console.log("本轮得分:",last)
console.log("最新总分数:",scores)
console.log("=====================")
logs.push(last)
var column='<tr class="info"><td>'+rounds+'</td>'
for (var player of players){
var total_score=scores[player]
var this_round_score=last[player]
var text=player+"得分:"
if (total_score>0){
text+='<span style="color: red">'+total_score+'</span>; '
} else {
text += '<span style="color: green">' + total_score + '</span>; '
}
//每回合的表格记录，id为玩家姓名+回合数
if (this_round_score>0){
column+='<td style="color: red">'+last[player]+'</td>'
}
else {
column+='<td style="color: green">'+last[player]+'</td>'
}
$("#result_info").append(text)
}
$("#log_body").append(column)
}
}
5、js操作–撤销
我们在全局变量中定义的logs数组主要的用途就是在此处体现
var back_log=function () {
var len=$("#log_body").length
if (len<=0){
rounds=0
$("#back_log").attr("disabled","disabled")
console.log("无可撤销项")
return
}
$("#log_body tr:last").remove()
$("#result_info").html('')
var last=logs.pop()
for (var player of players){
var total_score=scores[player]
var last_round_score=last[player]
var new_score=total_score-last_round_score
var text=player+"得分:"
scores[player]=new_score
if (new_score>0){
text+='<span style="color: red">'+new_score+'</span>; '
} else {
text += '<span style="color: green">' + new_score + '</span>; '
}
$("#result_info").append(text)
console.log("新的上一轮得分",last)
}
console.log("撤销后的总分数:",scores)
rounds-=1
}
源码获取
完整源码以及演示web页面可以关注以下公众号回复"poke"即可获取演示网址以及完整源码
扫一扫
408
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
