扫雷网页版
簡(jiǎn)介
嗯，由于登錄注冊(cè)等不是這次的重點(diǎn)，所以沒(méi)有設(shè)計(jì)界面，丑著看吧。
主要是感受后端與前端的交互【分離】
先展示這丑陋的界面吧
登錄頁(yè)
[簡(jiǎn)單的登錄操作,status是用來(lái)判斷反饋登錄是否成功的]
注冊(cè)頁(yè)
核心頁(yè)
主要需要加載的數(shù)據(jù)也就登錄的用戶名+面盤(pán)二維數(shù)組+當(dāng)前得分+排行
主要思路
面盤(pán)的二維數(shù)組在上一個(gè)博文已經(jīng)寫(xiě)了，如何獲得一個(gè)帶有雷和數(shù)字的完整棋盤(pán)[指這個(gè)面盤(pán)]
獲得二維數(shù)組后，一開(kāi)始，所有的按鈕都設(shè)置成空白內(nèi)容，當(dāng)點(diǎn)擊時(shí)，獲得點(diǎn)擊的按鈕的編號(hào)，
從而更改內(nèi)容位面盤(pán)上該處的值，并且設(shè)置位enabled-false避免重復(fù)點(diǎn)刷分。
點(diǎn)按鈕的同時(shí)判斷是雷上傳數(shù)據(jù)扣分，不是加分
至于排名啥的再熟悉不過(guò)了吧，不多贅述
一個(gè)核心：數(shù)組只要直接返回給用戶就行，不同用戶獲得不同數(shù)組，由于用戶已經(jīng)獲得自己
獲得的數(shù)組，所以彼此不會(huì)干擾到，就不會(huì)出現(xiàn)彼此數(shù)據(jù)混亂的情況。
訪問(wèn)網(wǎng)址：http://www.dreamcenter.top/saolei/
可能不會(huì)留太久（服務(wù)器太貴）
前端源碼[不包含登陸注冊(cè)頁(yè)了]
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 //掃完判斷參數(shù)
29 var total = 90;
30 //開(kāi)頭三步計(jì)數(shù)器
31 var count = 3;
32 //錯(cuò)誤計(jì)數(shù)
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 //設(shè)置樣式
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 //坐標(biāo)
64 var xt = $(this).attr("data-place-x");
65 var yt = $(this).attr("data-place-y");
66
67 //發(fā)送請(qǐng)求
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("雷已全部掃完，并且由于全對(duì)獲得100積分，換張圖繼續(xù)吧!");
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"> 更新?tīng)顩r |</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>規(guī)則0：點(diǎn)左上角加載按鈕獲得第一張圖</p>
170 <p>規(guī)則1：一張圖有10個(gè)雷，一共100個(gè)格子</p>
171 <p>規(guī)則2：沒(méi)踩到雷+1分，踩到雷-234分</p>
172 <p>規(guī)則3：可以再次點(diǎn)加載獲得新圖</p>
173 <p>規(guī)則4：第一個(gè)挖的可能是雷(防止刷分：不斷刷新挖一個(gè))</p>
174 <p>規(guī)則5：前三步如果踩到雷只扣90分<i> NEW</i></p>
175 <p>規(guī)則6：一局全對(duì)獎(jiǎng)勵(lì)100分<i> NEW</i></p>
176 <p>您當(dāng)前總得分:<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
至于后端返回的東西看這一個(gè)頁(yè)面的源碼應(yīng)該都清楚了吧，不多展示，其它的都可自己動(dòng)腦設(shè)計(jì)出來(lái)。
結(jié)束，啦啦啦。
不過(guò)最大的問(wèn)題不是上面這些問(wèn)題，是其平衡問(wèn)題，就是掃雷加減分的平衡太難平衡了，
一伙兒負(fù)幾百一伙兒正幾千QAQ。
程序宅男
總結(jié)
- 上一篇： 囧囧挑战3第一关怎么过
- 下一篇： UE4笔记-UMG和Slate记录