简介
嗯，由于登录注册等不是这次的重点，所以没有设计界面，丑着看吧。
主要是感受后端与前端的交互【分离】
先展示这丑陋的界面吧
登录页
[简单的登录操作,status是用来判断反馈登录是否成功的]
注册页
核心页
主要需要加载的数据也就登录的用户名+面盘二维数组+当前得分+排行
主要思路
面盘的二维数组在上一个博文已经写了，如何获得一个带有雷和数字的完整棋盘[指这个面盘]
获得二维数组后，一开始，所有的按钮都设置成空白内容，当点击时，获得点击的按钮的编号，
从而更改内容位面盘上该处的值，并且设置位enabled-false避免重复点刷分。
点按钮的同时判断是雷上传数据扣分，不是加分
至于排名啥的再熟悉不过了吧，不多赘述
一个核心：数组只要直接返回给用户就行，不同用户获得不同数组，由于用户已经获得自己
获得的数组，所以彼此不会干扰到，就不会出现彼此数据混乱的情况。
访问网址：http://www.dreamcenter.top/saolei/
可能不会留太久（服务器太贵）
前端源码[不包含登陆注册页了]
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8" /> 5 <script src="./js/jquery-3.4.1.js"></script> 6 <script> 7 $(function(){ 8 $.post("/saolei/usermanager",{"code":"1"},function(data){ 9 console.log(data); 10 if(data.code == "1"){ 11 $(".username").text(data.username+"!"); 12 $(".score").text(data.score); 13 $.post("/saolei/usermanager",{"code":"3"},function(data){ 14 for(var i = 0;i<data.length;i++){ 15 //<li><b>username</b>--<span>score</span></li> 16 $("#list").append("<li><b>"+data[i].name+"</b>>>><span>"+data[i].score+"</span></li>"); 17 } 18 }); 19 // $("#reset").click(function(){ 20 // var pw = $("#change").val(); 21 // $.post("/saolei/reset",{"pw":pw},function(data){ 22 // alert(data.tip); 23 // }); 24 // }); 25 $("#show").click(function(){ 26 //$.post("/saolei/reset",{"pw":"9981"}); 27 28 //扫完判断参数 29 var total = 90; 30 //开头三步计数器 31 var count = 3; 32 //错误计数 33 var fault = 0; 34 35 $.post("/saolei/show",function(data){ 36 var num = 10; 37 var value = data.show; 38 //var cover = [[0,0],[0,0]]; 39 $("table tr").empty(); 40 for(var i = 0;i<num;i++){ 41 $("table").append("<tr></tr>"); 42 for(var j = 0;j < num;j++){ 43 //显示 44 //if(cover[i][j]==0){ 45 $("table tr:nth-child("+(i+1)+")").append("<td><button data-place-x=""+j+"" data-place-y=""+i+"">?</button></td>"); 46 /*} 47 else{ 48 $("table tr:nth-child("+(i+1)+")").append("<td><button>"+value[i][j]+"</button></td>"); 49 }*/ 50 } 51 } 52 53 //设置样式 54 $("table td").css("width","20px"); 55 $("table td").css("height","20px"); 56 $("table td").css("padding","0"); 57 $("table td button").css("width","100%"); 58 $("table td button").css("height","100%"); 59 60 61 //添加事件 62 $("tr td button").click(function(){ 63 //坐标 64 var xt = $(this).attr("data-place-x"); 65 var yt = $(this).attr("data-place-y"); 66 67 //发送请求 68 //console.log("("+xt+","+yt+")"); 69 $(this).text(value[yt][xt]); 70 71 72 73 //翻面 74 $(this).attr("disabled","true"); 75 76 //显示效果 77 if(value[yt][xt]==-1){ 78 $(this).css("background-color","red"); 79 fault++; 80 81 if(count>0){ 82 $.post("/saolei/usermanager",{"code":"2","score":"-90"},function(data){ 83 $(".score").text(data.score); 84 $.post("/saolei/usermanager",{"code":"3"},function(data){ 85 $("#list").empty(); 86 for(var i = 0;i<data.length;i++){ 87 $("#list").append("<li><b>"+data[i].name+"</b>>>><span>"+data[i].score+"</span></li>"); 88 } 89 }); 90 }); 91 count--; 92 }else{ 93 $.post("/saolei/usermanager",{"code":"2","score":"-234"},function(data){ 94 $(".score").text(data.score); 95 $.post("/saolei/usermanager",{"code":"3"},function(data){ 96 $("#list").empty(); 97 for(var i = 0;i<data.length;i++){ 98 $("#list").append("<li><b>"+data[i].name+"</b>>>><span>"+data[i].score+"</span></li>"); 99 } 100 }); 101 }); 102 } 103 104 }else{ 105 total--; 106 count--; 107 $(this).css("background-color","greenyellow"); 108 $.post("/saolei/usermanager",{"code":"2","score":"1"},function(data){ 109 //console.log(total); 110 $(".score").text(data.score); 111 112 $.post("/saolei/usermanager",{"code":"3"},function(data){ 113 $("#list").empty(); 114 for(var i = 0;i<data.length;i++){ 115 $("#list").append("<li><b>"+data[i].name+"</b>>>><span>"+data[i].score+"</span></li>"); 116 } 117 if(total==0){ 118 if(fault==0){ 119 $.post("/saolei/usermanager",{"code":"2","score":"100"},function(data){ 120 $(".score").text(data.score); 121 $.post("/saolei/usermanager",{"code":"3"},function(data){ 122 $("#list").empty(); 123 for(var i = 0;i<data.length;i++){ 124 $("#list").append("<li><b>"+data[i].name+"</b>>>><span>"+data[i].score+"</span></li>"); 125 } 126 }); 127 }); 128 alert("雷已全部扫完，并且由于全对获得100积分，换张图继续吧!"); 129 }else{ 130 alert("雷已全部扫完，换张图吧!"); 131 } 132 total=90; 133 } 134 }); 135 // 136 }); 137 138 } 139 console.log(fault); 140 }); 141 }); 142 }); 143 }else{ 144 window.location.href="login.html"; 145 } 146 }); 147 }); 148 </script> 149 <style> 150 a{ 151 text-decoration: none; 152 color: blueviolet; 153 } 154 </style> 155 <title>在线扫雷</title> 156 </head> 157 <body> 158 <button id="show">加载</button> 159 <span>欢迎<span class="username" style="font-weight: bold;">游客!</span></span> 160 <a href="https://docs.qq.com/doc/DV2p4emllcnFTbWdY" target="_blank"> 更新状况 |</a> 161 <a href="https://docs.qq.com/doc/DV0JjSXZJQkdZR2pH" target="_blank"> 需求池 |</a> 162 <a href="https://docs.qq.com/form/fill/DV2FQb0NBbk5jQ0hp?_w_tencentdocx_form=1" target="_blank"> 建议&反馈 </a> 163 <!-- <input type="password" id="change" placeholder="输入正确指令重置"/> 164 <button id="reset" >重置</button> --> 165 <hr /> 166 <table border="1px" cellspacing="0" cellpadding=""> 167 168 </table> 169 <p style="color: blue;font-size: 12px;">规则0：点左上角加载按钮获得第一张图</p> 170 <p style="color: blue;font-size: 12px;">规则1：一张图有10个雷，一共100个格子</p> 171 <p style="color: blue;font-size: 12px;">规则2：没踩到雷+1分，踩到雷-234分</p> 172 <p style="color: blue;font-size: 12px;">规则3：可以再次点加载获得新图</p> 173 <p style="color: blue;font-size: 12px;">规则4：第一个挖的可能是雷(防止刷分：不断刷新挖一个)</p> 174 <p style="color: blue;font-size: 12px;">规则5：前三步如果踩到雷只扣90分<i style="color: red;font-size: 8px;"> NEW</i></p> 175 <p style="color: blue;font-size: 12px;">规则6：一局全对奖励100分<i style="color: red;font-size: 8px;"> NEW</i></p> 176 <p>您当前总得分:<span class="score">0</span></p> 177 178 <div> 179 <p>排行榜：</p> 180 <ol id="list"> 181 </ol> 182 </div> 183 </body> 184 </html>
View Code
至于后端返回的东西看这一个页面的源码应该都清楚了吧，不多展示，其它的都可自己动脑设计出来。
结束，啦啦啦。
不过最大的问题不是上面这些问题，是其平衡问题，就是扫雷加减分的平衡太难平衡了，
一伙儿负几百一伙儿正几千QAQ。
程序宅男
支付宝扫一扫
微信扫一扫
最新评论