扫雷网页版
簡介
嗯，由于登錄注冊等不是這次的重點，所以沒有設計界面，丑著看吧。
主要是感受后端與前端的交互【分離】
先展示這丑陋的界面吧
登錄頁
[簡單的登錄操作,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">游客!</span></span>
160 <a target="_blank"> 更新狀況 |</a>
161 <a target="_blank"> 需求池 |</a>
162 <a 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>規則0：點左上角加載按鈕獲得第一張圖</p>
170 <p>規則1：一張圖有10個雷，一共100個格子</p>
171 <p>規則2：沒踩到雷+1分，踩到雷-234分</p>
172 <p>規則3：可以再次點加載獲得新圖</p>
173 <p>規則4：第一個挖的可能是雷(防止刷分：不斷刷新挖一個)</p>
174 <p>規則5：前三步如果踩到雷只扣90分<i> NEW</i></p>
175 <p>規則6：一局全對獎勵100分<i> 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。
程序宅男
總結
- 上一篇： 囧囧挑战3第一关怎么过
- 下一篇： UE4笔记-UMG和Slate记录