1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
2 <HTML XMLNS:ELEMENT>
3 <html>
4 <head>
5 <title>mine</title>
6 <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
7 <style>
8 body{
9 margin:0px;
10 }
11 input{
12 width:50px;
13 border:solid 1px #5f5f5f;
14 }
15 #panel{
16 position:absolute;
17 top:30px;
18 left:30px;
19 z-index:999;
20 }
21 #gameover{
22 position:absolute;
23 color:red;
24 font-family:微软雅黑;
25 font-size:140px;
26 }
27 </style>
28 </head>
29 <body>
30 <!--x:--><input type="hidden" value="20" id="sx" /><!-- y:--><input type="hidden" value="20" id="sy" /> <button id="init">go</button>
31 <div id="panel"></div>
32 <div id="gameover" style="top:-500px;left:-500px;">game over:)</div>
33 </body>
34 </html>
35
36
37
38
39
40
41
42
43
44 <script type="text/javascript">
45
46 //格子
47 var boxX = 30;
48 var boxY = 30;
49 var border = "solid 1px #fcfcfc";
50 var bgcolor = "#7a9afa";
51 var bgcolor_ = "#cfcfcf";
52
53 var model = new Array();
54 var sizeX;
55 var sizeY;
56
57 var mine_img = "<img src='http://ctc.qzonestyle.gtimg.cn/qzone/em/e136.gif' />";
58
59 //初始化页面
60 window.onload = function(){
61 var inputObj = document.getElementsByTagName("input");
62 for(var i = 0;i < inputObj.length;i++){
63 with(inputObj[i]){
64 onkeyup = function(){
65 this.value=this.value.replace(/\D/g,'');
66 };
67 onafterpaste = function(){
68 this.value=this.value.replace(/\D/g,'');
69 };
70 }
71 }
72 sizeX = document.getElementById("sx").value;
73 sizeY = document.getElementById("sy").value;
74 for(var y_ = 0;y_ < sizeY;y_++){
75 model[y_] = new Array();
76 for(var x_ = 0;x_ < sizeX;x_++){
77 var t = (boxY + 1) * y_;
78 var l = (boxX + 1) * x_;
79 var id = y_ + "_" + x_;
80 var v = "";
81 var random = parseInt(Math.random() * 10);
82 if(random == 3 || random ==7)
83 v = mine_img;
84 else
85 v = "";
86 var b = new box(boxX,boxY,t,l,v,bgcolor,border,id);
87 model[y_][x_] = b;
88 b.draw();
89 addFun(id);
90 }
91 }
92 };
93
94
95 //初始化格子
96 document.getElementById("init").onclick = function() {
97 window.location.reload();
98 };
99
100
101 //填充 DFS
102 function fill(id) {
103 var y = parseInt(id.substring(0,id.indexOf("_")));
104 var x = parseInt(id.substring(id.indexOf("_") + 1,id.length));
105 var mine = 0;
106 if(model[y][x].getValue() != mine_img) {
107 model[y][x].setBgColor(bgcolor_);
108 mine = countMine(x,y);
109 if(mine == 0){
110 for(var i = y - 1;i <= y + 1;i++){
111 for(j = x - 1;j <= x + 1;j ++) {
112 //越界
113 if(document.getElementById(i + "_" + j) == null){
114 continue;
115 }
116 //自己
117 if(i == y && j == x){
118 continue;
119 }
120 //已遍历
121 if(model[i][j].getBgColor() == bgcolor_){
122 continue;
123 }
124 fill(model[i][j].getId());
125 }
126 }
127 } else {
128 model[y][x].setValue(mine);
129 }
130 } else {
131 gameover();
132 return 0;
133 }
134 }
135
136
137 //数雷的个数
138 function countMine(x,y) {
139 var count = 0;
140 for(var i = y - 1;i <= y + 1;i++){
141 for(var j = x - 1;j <= x + 1;j++) {
142 if(document.getElementById(i + "_" + j) != null) {
143 if(model[i][j].getValue() == mine_img)
144 count++;
145 }
146 }
147 }
148 return count;
149 }
150
151 //格子类
152 function box(x,y,top,left,value,bgcolor,border,id){
153 //private
154 var boxX = x + "px";
155 var boxY = y + "px";
156 var boxTop = top + "px";
157 var boxLeft = left + "px";
158 var bgcolor = bgcolor;
159 var id = id;
160 var border = border;
161 var value = value;
162 //public
163 this.getId = function() {
164 return id;
165 }
166 this.getValue = function() {
167 return value;
168 }
169 this.setValue = function(v){
170 value = v;
171 if(v == "1") value = "<font color='#0000ff'>" + v + "</font>";
172 if(v == "2") value = "<font color='#00cc00'>" + v + "</font>";
173 if(v == "3") value = "<font color='#ff0000'>" + v + "</font>";
174 if(v == "4") value = "<font color='#ee0000'>" + v + "</font>";
175 if(v == "5") value = "<font color='#dd0000'>" + v + "</font>";
176 if(v == "6") value = "<font color='#cc0000'>" + v + "</font>";
177 if(v == "7") value = "<font color='#bb0000'>" + v + "</font>";
178 if(v == "8") value = "<font color='#aa0000'>" + v + "</font>";
179 //
180 bgcolor = bgcolor_;
181 //
182 this.draw(value);
183 }
184 this.setBgColor = function(bg){
185 bgcolor = bg;
186 this.draw();
187 }
188 this.getBgColor = function() {
189 return bgcolor;
190 }
191 this.draw = function(v){
192 var boxObj = document.createElement("div");
193 boxObj.style.position = "absolute";
194 boxObj.style.width = boxX;
195 boxObj.style.height = boxY;
196 boxObj.style.top = boxTop;
197 boxObj.style.left = boxLeft;
198 boxObj.style.border = border;
199 boxObj.style.backgroundColor = bgcolor;
200 boxObj.style.cursor = "pointer";
201 boxObj.style.fontSize = "18px";
202 boxObj.style.fontWeight = "bold";
203 boxObj.style.fontFamily = "微软雅黑";
204 boxObj.style.textAlign = "center";
205 boxObj.style.lineHeight = boxX;
206 boxObj.id = id;
207 if(v != null){
208 boxObj.innerHTML = value;
209 }
210 //boxObj.innerHTML = value;
211 document.getElementById("panel").appendChild(boxObj);
212 };
213 }
214
215
216 //事件绑定
217 //eventUtil.addEventHandler =
218 function addFun(id){
219 var oTarget = document.getElementById(id);
220 //IE和FF的兼容性处理
221 if(oTarget.addEventListener){//如果是FF
222 oTarget.addEventListener("click",function() {
223 fill(id);
224 },false);
225 } else if(oTarget.attachEvent){//如果是IE
226 oTarget.attachEvent('onclick',function(){
227 fill(id);
228 });
229 } else{
230 //oTarget['on'+sEventType] = fnHandler;
231 }
232 }
233
234 //over
235 function gameover(){
236 for(var i = 0;i < sizeY;i++){
237 for(var j = 0;j < sizeX;j++){
238 if(model[i][j].getValue() == mine_img){
239 model[i][j].setValue(mine_img);
240 //document.getElementById(model[i][j].getId()).innerHTML = mine_img;
241 } else {
242 if(countMine(j,i) > 0){
243 model[i][j].setValue(countMine(j,i));
244 }
245 }
246 }
247 }
248 window.setTimeout(function(){
249 var o = document.getElementsByTagName("*");
250 var delay = window.setInterval(function() {
251 for(var i = 0;i < o.length;i++) {
252 var a = o[i].style.top.substring(0,o[i].style.top.indexOf("p"));
253 var b = o[i].style.left.substring(0,o[i].style.left.indexOf("p"));
254 o[i].style.top = parseInt(a) + parseInt(Math.random() * 30) + "px";
255 o[i].style.left = parseInt(b) + parseInt(Math.random() * 30) + "px";
256 }
257 },100);
258 },10000);
259 }
260 </script>
View Code
