白开心
  IT博客 :: 首页 ::  :: 联系 :: 聚合  :: 管理 ::
  9 随笔 :: 76 文章 :: 28 评论 :: 0 Trackbacks
JS扫雷游戏
  1<html>
  2<head>
  3
  4    <script language="javascript">
  5    var clickTime = "";
  6    var bombArray = new Array();  /// 对应表格，1 表示有雷，0 表示无雷
  7    var bombFlagArray  = new Array();  /// 对应表格，0 表示无标志，1 表示有雷，2 表示疑问，3 表示已经被打开
  8    var bombTable;
  9    var bombNumberImgArr = new Array();
 10    bombNumberImgArr[0] = "Images/bombNumber0.GIF";   /// 数字0的图片(空时的图片)
 11    bombNumberImgArr[1] = "Images/bombNumber1.GIF";   /// 数字1的图片
 12    bombNumberImgArr[2] = "Images/bombNumber2.GIF";   /// 数字2的图片
 13    bombNumberImgArr[3] = "Images/bombNumber3.GIF";   /// 数字3的图片
 14    bombNumberImgArr[4] = "Images/bombNumber4.GIF";   /// 数字4的图片
 15    bombNumberImgArr[5] = "Images/bombNumber5.GIF";   /// 数字5的图片
 16    bombNumberImgArr[6] = "Images/bombNumber6.GIF";   /// 数字6的图片
 17    bombNumberImgArr[7] = "Images/bombNumber7.GIF";   /// 数字7的图片
 18    bombNumberImgArr[8] = "Images/bombNumber8.GIF";   /// 数字8的图片
 19    var bombImgQuestion = "Images/bombImgQuestion.GIF";   /// 疑问的 Bomb 图片
 20    var bombImgFlag = "Images/bombImgFlag.GIF";       /// 标志为 Bomb 的图片
 21    var bombImgDisconvert = "Images/bombImgDisconvert.GIF"; /// Bomb 打开的图片
 22    var bombImgConvert = "Images//bombImgConvert.GIF";    /// 覆盖时的图片
 23    var bombImgOpened = "Images/bombImgOpened.GIF";     /// Bomb 爆炸时图片
 24    var bombImgError = "Images/bombImgError.GIF";     /// Bomb标记错误时图片
 25    var bombImgMouseDown = "Images/bombImgMouseDown.GIF";     /// 鼠标按下时图片
 26    var cellHeight = 20;        /// 单元格的高和宽
 27    var bombCount = 99;         /// 剩余 Bomb 数量
 28    var usedTime = 0;           /// 耗时
 29    var isFirstClick = true;    /// 是否第一次点击
 30    var isComplete = false;     /// 是否完成
 31    
 32    var lastUpTime,upClick;
 33    
 34    function mouseUp(x,y)
 35    {
 36        //debugger;
 37        if(isComplete) return;
 38        if(event.button == "2")
 39        {
 40            //alert("你点击的是鼠标右键事件");
 41            if(lastUpTime == null)
 42            {
 43                lastUpTime = new Date();
 44            }
 45            else if(upClick != null && upClick == 1 && lastUpTime.dateDiff("u",new Date()) <= 50)
 46            {
 47                mouseDoubleEvent(x,y);
 48            } 
 49            upClick = 2;
 50            lastUpTime = new Date();
 51        }
 52        else if(event.button == "1")
 53        {
 54            //alert("你点击的是鼠标左键事件");
 55            if(bombFlagArray[x][y] != 1)
 56            {
 57                mouseLeftEvent(x,y);
 58            }
 59            
 60            if(lastUpTime == null)
 61            {
 62                lastUpTime = new Date();
 63            }
 64            else if(upClick != null && upClick == 2 && lastUpTime.dateDiff("u",new Date()) <= 50)
 65            {
 66                mouseDoubleEvent(x,y);
 67            } 
 68            upClick = 1;
 69            lastUpTime = new Date();
 70        }
 71        
 72        if(isFirstClick)
 73        {
 74            isFirstClick = false;
 75            startRecord();
 76        }
 77    }
 78    
 79    function mouseDown(x,y)
 80    {
 81        if(isComplete) return;
 82        if(event.button == "2")
 83        {
 84            /// 右键事件
 85            mouseRightEvent(x,y);
 86        }
 87        else if(event.button == "1")
 88        {
 89            /// 左键事件
 90            mouseLeftDownEvent(x,y);
 91        }
 92        else if(event.button == "3")
 93        {
 94            /// 双击事件
 95        }
 96        
 97        document.getElementById("ShowBombCount").innerText = bombCount.toString();
 98    }
 99    
100    /// 鼠标按下事件，改变当前图片，显示按下动画效果
101    function mouseLeftDownEvent(x,y)
102    {
103        /*
104        if(bombFlagArray[x][y] == 0 || bombFlagArray[x][y] == 2)
105        {
106            var td = document.getElementById(x+"|"+y);
107            td.innerHTML = "<img src=\""+bombImgMouseDown+"\" style=\"border:0;\" width=\""+cellHeight+"px\" height=\""+cellHeight+"px\" onmousedown=\"mouseDown("+x+","+y+");\" onmouseup=\"mouseUp("+x+","+y+");\" oncontextmenu=\"return false;\">";
108        }
109        */
110    }
111    
112    /// 双键按下事件，改变周围图片，显示双键按下动画效果
113    function mouseDoubleDownEvent(x,y)
114    {
115        
116    }
117    
118    /// 鼠标右键事件，如果该单元格未打开，改变图片标识
119    function mouseRightEvent(x,y)
120    {
121        var td = document.getElementById(x+"|"+y);
122        if(bombFlagArray[x][y] == 0)
123        {
124            bombFlagArray[x][y] = 1;
125            td.innerHTML = "<img src=\""+bombImgFlag+"\" style=\"border:0;\" width=\""+cellHeight+"px\" height=\""+cellHeight+"px\" onmousedown=\"mouseDown("+x+","+y+");\" onmouseup=\"mouseUp("+x+","+y+");\" oncontextmenu=\"return false;\">";
126            bombCount --;
127        }
128        else if(bombFlagArray[x][y] == 1)
129        {
130            bombFlagArray[x][y] = 2;
131            td.innerHTML = "<img src=\""+bombImgQuestion+"\" style=\"border:0;\" width=\""+cellHeight+"px\" height=\""+cellHeight+"px\" onmousedown=\"mouseDown("+x+","+y+");\" onmouseup=\"mouseUp("+x+","+y+");\" oncontextmenu=\"return false;\">";
132            bombCount ++;
133        }
134        else 
135        {
136            bombFlagArray[x][y] = 0;
137            td.innerHTML = "<img src=\""+bombImgConvert+"\" style=\"border:0;\" width=\""+cellHeight+"px\" height=\""+cellHeight+"px\" onmousedown=\"mouseDown("+x+","+y+");\" onmouseup=\"mouseUp("+x+","+y+");\" oncontextmenu=\"return false;\" />";
138        }
139    }
140    
141    /// 鼠标左键事件
142    function mouseLeftEvent(x,y)
143    {
144        if(bombArray[x][y] == 1)
145        { /// 该单元格是 Bomb
146            showAllCells(x,y);
147        }
148        else
149        {
150            bombFlagArray[x][y] = 3;
151            var td = document.getElementById(x+"|"+y);
152            var bombNumber = getBombCount(x,y,bombArray);
153            if(bombNumber == 0)
154            {
155                openRoundCells(x,y);
156            }
157            td.innerHTML = "<img src=\""+bombNumberImgArr[bombNumber]+"\" style=\"border:0;\" width=\""+cellHeight+"px\" height=\""+cellHeight+"px\" onmouseup=\"mouseUp("+x+","+y+");\" oncontextmenu=\"return false;\">";
158            
159            if(checkIsComplete())
160            { /// 完成
161                isComplete = true;
162                alert("不错，母猪都能上树了，成绩："+usedTime+"秒");
163            }
164        }
165    }
166    
167    /// 鼠标双击事件
168    function mouseDoubleEvent(x,y)
169    {
170        var bombFlagCount = getBombCount(x,y,bombFlagArray);
171        var bombCount =  getBombCount(x,y,bombArray);
172        if(bombFlagCount != bombCount) return;
173        
174        for(var i=-1;i<2;i++)
175        {
176            for(var j=-1;j<2;j++)
177            {
178                if(0 == i && 0==j) continue;
179                if( ((x+i) < 0 || (y+j)< 0) ||  ((x+i) >= bombArray.length || (y+j)>= bombArray[0].length) )
180                {/// 超界
181                    continue;
182                }
183                if(bombFlagArray[x+i][y+j] == 1)
184                { /// 该单元格已经标记为地雷，则不打开
185                    continue;
186                }  
187                if(bombArray[x+i][y+j] == 1)
188                {
189                    showAllCells(x+i,y+j);
190                    return;
191                }
192                mouseLeftEvent(x+i,y+j);
193                if(isComplete) return;
194            }
195        }
196    }
197    
198    /// 打开空白周围的单元格
199    function openRoundCells(x,y)
200    {
201        for(var i=-1;i<2;i++)
202        {
203            for(var j=-1;j<2;j++)
204            {
205                if(0 == i && 0==j) continue;
206                if( ((x+i) < 0 || (y+j)< 0) ||  ((x+i) >= bombFlagArray.length || (y+j)>= bombFlagArray[0].length) )
207                {/// 超界
208                    continue;
209                }
210                
211                if(bombFlagArray[x+i][y+j] == 1)
212                {
213                    bombCount++;
214                    
215                }
216                else if(bombFlagArray[x+i][y+j] == 3)
217                {
218                    continue;
219                }
220                mouseLeftEvent(x+i,y+j);
221                if(isComplete) return;
222                if(getBombCount(x+i,y+j,bombArray) == 0)
223                {
224                    openRoundCells(x+i,y+j);
225                }
226            }
227        }
228    }
229    
230    /// 检测是否完成
231    function checkIsComplete()
232    {
233        for(var i=0;i<bombFlagArray.length;i++)
234        {
235            for(var j=0;j<bombFlagArray[0].length;j++)
236            {
237                if(bombFlagArray[i][j] == 0 || bombFlagArray[i][j] == 2)
238                {
239                    return false;
240                } 
241            }
242        }
243        return true;
244    }
245    
246    /// Bomb Open时，打开所有图形
247    function showAllCells(x,y)
248    {
249        var td,bombNumber;
250        for(var i=0;i<bombArray.length;i++)
251        {
252            for(var j=0;j<bombArray[0].length;j++)
253            {
254                td = document.getElementById(i+"|"+j);
255                if(x == i && y == j)
256                {
257                    /// 该单元格有 Bomb，并且被引暴
258                    td.innerHTML = "<img src=\""+bombImgOpened+"\" style=\"border:0;\" width=\""+cellHeight+"px\" height=\""+cellHeight+"px\" oncontextmenu=\"return false;\">";
259                }
260                else if(bombFlagArray[i][j] == 1 && bombArray[i][j] == 0)
261                { 
262                    /// 该单元格无雷，但被标记有雷
263                    td.innerHTML = "<img src=\""+bombImgError+"\" style=\"border:0;\" width=\""+cellHeight+"px\" height=\""+cellHeight+"px\" oncontextmenu=\"return false;\">";
264                }
265                else if(bombArray[i][j] == 1)
266                { /// 该单元格有 Bomb
267                    td.innerHTML = "<img src=\""+bombImgDisconvert+"\" style=\"border:0;\" width=\""+cellHeight+"px\" height=\""+cellHeight+"px\" oncontextmenu=\"return false;\">";
268                }
269                else 
270                {   
271                    /// 该单元格不是雷
272                    /// bombNumber = getBombCount(i,j,bombArray);
273                    /// td.innerHTML = "<img src=\""+bombNumberImgArr[bombNumber]+"\" style=\"border:0;\" width=\""+cellHeight+"px\" height=\""+cellHeight+"px\" oncontextmenu=\"return false;\">";
274                }
275            }
276        }
277        isComplete = true;
278    }
279    
280    /// 计算指定位置周围 Bomb Count
281    function getBombCount(x,y,arr)
282    {
283        var bombNumber = 0;
284        for(var i=-1;i<2;i++)
285        {
286            for(var j=-1;j<2;j++)
287            {
288                if(0 == i && 0==j) continue;
289                if( ((x+i) < 0 || (y+j)< 0) ||  ((x+i) >= arr.length || (y+j)>= arr[0].length) )
290                {/// 超界
291                    continue;
292                }
293                if(arr[x+i][y+j] == 1)
294                {
295                    bombNumber++;
296                }
297            }
298        }
299        return bombNumber;
300    }
301    
302    /// 初始化表格  rowCount = 16,colCount = 30;
303    function initialTable(rowCount,colCount)
304    {
305        isFirstClick = true;
306        isComplete = false;
307        usedTime = 0;
308        document.getElementById("ShowTimes").innerText = "000";
309        
310        if(bombTable == null)
311            bombTable = document.getElementById("bombTable");
312        deleteRows(bombTable);
313        bombTable.style.width = colCount * cellHeight;
314        bombTable.style.height = rowCount * cellHeight;
315        bombArray = getRandomPositions(rowCount,colCount,bombCount);
316        bombFlagArray = getArray(rowCount,colCount);
317        document.getElementById("bombTitle").colSpan = colCount - 4;
318        var row,td;
319        for(var i=0;i<rowCount;i++)
320        {
321            row = bombTable.insertRow(bombTable.rows.length);
322            row.style.height = cellHeight+"px";
323            for(var j=0;j<colCount;j++)
324            {
325                td = row.insertCell(j);
326                td.id = i+"|"+j;
327                td.style.width = cellHeight+"px";
328                td.innerHTML = "<img src=\""+bombImgConvert+"\" style=\"border:0;\" width=\""+cellHeight+"px\" height=\""+cellHeight+"px\" onmousedown=\"mouseDown("+i+","+j+");\" onmouseup=\"mouseUp("+i+","+j+");\" oncontextmenu=\"return false;\" />";
329            }
330        }
331    }
332    
333    /// 移除旧的数据，开始新的数据
334    function deleteRows(oTable)
335    {
336        var trs = oTable.childNodes[0].childNodes;
337        if(trs.length > 0)
338        {
339            for(var i = 0;i<trs.length;i++)
340            {
341                if(trs[i].id == "trTitle")
342                    continue;
343                oTable.deleteRow(i);
344                i--;
345            }
346        }
347    }
348    
349    /// 生成一个随机数组
350    function getRandomPositions(rowCount,colCount,nums)
351    {
352        var arr = new Array();
353        for(var i = 0;i< rowCount;i++)
354        {
355            arr[i] = new Array();
356            for(var j=0;j<colCount;j++)
357            {
358                arr[i][j] = 0;
359            }
360        }
361        
362        for(var i=0;i<nums;i++)
363        {
364            xValue = Math.round(Math.random() * (rowCount-1)).toString()
365            yValue = Math.round(Math.random() * (colCount-1)).toString()
366            if(arr[xValue][yValue] == 0)
367            {
368                arr[xValue][yValue] = 1;
369            }
370            else
371            {
372                i--;
373            }
374        }
375        return arr;
376    }
377    
378    function getArray(rowCount,colCount)
379    {
380        var arr = new Array();
381        for(var i = 0;i< rowCount;i++)
382        {
383            arr[i] = new Array();
384            for(var j=0;j<colCount;j++)
385            {
386                arr[i][j] = 0;
387            }
388        }
389        return arr;
390     }
391     
392     function startRecord()
393     {
394        if(isComplete) return;
395        var showTime = "";
396        if(usedTime.toString().length < 3)
397        {
398            for(var i=0;i<3 - usedTime.toString().length;i++)
399            {
400                showTime += "0";
401            }
402        }
403        showTime += usedTime.toString();
404        document.getElementById("ShowTimes").innerText = showTime;
405        usedTime ++;
406        setTimeout("startRecord()",1000);
407     }
408     
409     /// 游戏参数设置
410     function setGame()
411     {
412        var rows,cols;
413        cellHeight = document.getElementById("txtBombSize").value;
414        if(cellHeight == "")
415        {
416            alert("请设置一个尺寸");
417            document.getElementById("txtBombSize").focus();
418            return;
419        }
420        bombCount = document.getElementById("txtBombs").value;
421        if(bombCount == "")
422        {
423            alert("请设置地雷数量");
424            document.getElementById("txtBombs").focus();
425            return;
426        }
427        rows = document.getElementById("txtRows").value;
428        if(rows == "")
429        {
430            alert("请设置行数");
431            document.getElementById("txtRows").focus();
432            return;
433        }
434        cols = document.getElementById("txtCols").value;
435        if(cols == "")
436        {
437            alert("请设置列数");
438            document.getElementById("txtCols").focus();
439            return;
440        }
441        initialTable(rows,cols);
442     }
443     
444     Date.prototype.dateDiff = function(interval,objDate)
445     {
446        //若参数不足或 objDate 不是日期则返回 undefined
447        if(arguments.length<2||objDate.constructor!=Date) return undefined;
448        switch (interval) 
449        {
450              //计算毫秒
451              case "u":return parseInt((objDate-this)/1);
452              //计算秒差
453              case "s":return parseInt((objDate-this)/1000);
454              //计算分差
455              case "n":return parseInt((objDate-this)/60000);
456              //计算时差
457              case "h":return parseInt((objDate-this)/3600000);
458              //计算日差
459              case "d":return parseInt((objDate-this)/86400000);
460              //计算周差
461              case "w":return parseInt((objDate-this)/(86400000*7));
462              //计算月差
463              case "m":return (objDate.getMonth()+1)+((objDate.getFullYear()-this.getFullYear())*12)-(this.getMonth()+1);
464              //计算年差
465              case "y":return objDate.getFullYear()-this.getFullYear();
466              //输入有误
467              default:return undefined;
468        }
469    }
470    
471    //限制只能输入数字
472        function numberKeyDown(o)
473        {
474            var    k=window.event.keyCode;   
475
476            if ((k==46)||(k==8)||(k>=48 && k<=57)||(k>=96 && k<=105)||(k>=37 && k<=40)) 
477            {    
478                if(o.value != '')
479                {    if(o.value.indexOf('0')==0)
480                    {
481                        o.value='';
482                    }
483                }
484            }
485            else if(k==13){
486                 window.event.keyCode = 9;}
487            else{
488                 window.event.returnValue = false;}
489        }
490    </script>
491
492</head>
493<body onLoad="window.status='白开心*阿呆----->NCZerg'">
494    <!-- 16 * 30 的表格 -->
495    行：<input type="text" id="txtRows" value="16" size="3" maxlength="3" onKeyDown="return numberKeyDown(this);" />
496    列:
497    <input type="text" id="txtCols" value="30" size="3" maxlength="3" onKeyDown="return numberKeyDown(this);" />
498    地雷数量：<input type="text" id="txtBombs" value="99" size="3" maxlength="3" onKeyDown="return numberKeyDown(this);" />
499    地雷尺寸：<input type="text" id="txtBombSize" value="20" size="2" maxlength="2" onKeyDown="return numberKeyDown(this);" />PX
500    <input type="button" id="btSet" value="设置" onClick="setGame();" />
501    <table border="0" align="center" style="border-collapse: collapse" id="bombTable"
502        name="bombTable" cellpadding="0" cellspacing="0">
503        <tbody>
504            <tr id="trTitle">
505                <td colspan="2" align="center">
506                    <font color="red"><b><span id="ShowBombCount">99</span></b></font></td>
507                <td id="bombTitle" align="center">
508                    <a href="#" onClick="setGame();">Start A New Game—*·#￥·（*—……</a>
509                </td>
510                <td colspan="2" align="center">
511                    <font color="red"><b><span id="ShowTimes">000</span></b></font></td>
512            </tr>
513        </tbody>
514    </table>
515
516    <script language="javascript">
517        setGame();
518    </script>
519
520</body>
521</html>
posted on 2008-09-04 17:07 白开心 阅读(870) 评论(0)  编辑 收藏 引用 所属分类: JavaScript
只有注册用户登录后才能发表评论。