簡介
嗯，由於登錄注冊等不是這次的重點，所以沒有設計界面，丑着看吧。
主要是感受后端與前端的交互【分離】
先展示這丑陋的界面吧
登錄頁
[簡單的登錄操作,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>
至於后端返回的東西看這一個頁面的源碼應該都清楚了吧，不多展示，其它的都可自己動腦設計出來。
結束，啦啦啦。
不過最大的問題不是上面這些問題，是其平衡問題，就是掃雷加減分的平衡太難平衡了，
一伙兒負幾百一伙兒正幾千QAQ。