文章目录
- 起因
- 实现
- 1、页面html
- 2、js操作--全局变量
- 3、js操作--数据初始化
- 4、js操作--每局结算
- 5、js操作--撤销
- 源码获取
起因
现在大家斗地主的时候往往喜欢在每局结束后进行微信转账，然而这样的转帐过程往往比较浪费时间，所以咱们可以自己写一个简单的斗地主计分器来提高我们 赢钱的效率🤪。
之前尝试过用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=1for (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+=1var 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 * 2last[lord]=score*2for (var player of players) {if (player != lord) {scores[player] -= scorelast[player]=-score}}}//农民获胜else{scores[lord] -= score * 2last[lord]=-score*2for (var player of players) {if (player != lord) {scores[player] += scorelast[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").lengthif (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_scorevar text=player+"得分:"scores[player]=new_scoreif (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"即可获取演示网址以及完整源码
