分享一個用h5製作的網頁版掃雷遊戲實例代碼-H5教程-PHP中文網

首頁

web前端

H5教程

分享一個用h5製作的網頁版掃雷遊戲實例代碼

零下一度

May 11, 2017 pm 02:26 PM

閒的沒事寫個掃雷，演算法不太好·····湊合，還真的不錯，可以看一下

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>扫雷</title>
</head>
<body>
    <script>
        function Set(r,c,hard){
            var data = new Array();
            for(var i=0;i<r;i++){data[i]=new Array(c);}
            for (var i = 0; i < r*c; i++)
            {
                var ran=Math.floor(Math.random()*100);
                data[Math.floor(i / c)][i % c] =ran<hard?1:0;    
            }
            return data;
        }
        
        function GetNewData(data,r,c){
            var newdata = new Array();
            for(var i=0;i<r;i++){newdata[i]=new Array(c);}
            for (var i = 0; i < r * c; i++)
            {
                if (data[Math.floor(i / c)][i % c] == 1)
                {
                    newdata[Math.floor(i / c)][i % c] = 9;
                }
                else
                {
                    var d = 0;
                    for (var j = 0; j < 9; j++)
                    {
                        if (Math.floor(i / c) + (Math.floor(j / 3) - 1)>=0 && i % c + (j % 3 - 1) >= 0 &&
                            Math.floor(i / c) + (Math.floor(j / 3) - 1) < r && i % c + (j % 3 - 1) < c &&
                            data[Math.floor(i / c) + Math.floor(j / 3 - 1)][i % c + (j % 3 - 1)] == 1)
                        {
                            d++;
                        }
                    }
                    newdata[Math.floor(i / c)][i % c] = d;
                }
            }
            return newdata;
        }
        function GetRegion(rr,cc,data,list){
            if (data[rr][cc]!=0)
            {
                return;
            }
            else
            {
                for (var j = 0; j < 9; j++)
                {
                    if (rr+ (Math.floor(j / 3) - 1)>=0 && cc + (j % 3 - 1) >= 0 &&
                        rr + (Math.floor(j / 3) - 1) < r && cc + (j % 3 - 1) < c &&
                        data[rr+ Math.floor(j / 3 - 1)][cc+ (j % 3 - 1)] == 0)
                    {
                        var pr=rr+ Math.floor(j / 3 - 1);
                        var pc=cc+ (j % 3 - 1);
                        console.log(pr,pc);
                        if(contains(list,{r:pr,c:pc}))continue;
                        list.push({r:pr,c:pc});
                        GetRegion(pr,pc,data,list);
                    }
                }
                return; 
            }
        }
    </script>
    <!--<iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width=330 height=86 src="//music.163.com/outchain/player?type=2&id=22654542&auto=1&height=66"></iframe>-->
    <h2>扫雷游戏</h2>
    <!--<audio src="http://music.163.com/style/swf/widget.swf?sid=26569168" controls="controls"></audio>-->
    <p>难度:
        <select NAME="Difficulty" onchange="load(this.value)" id="Difficulty">
        <option value></option>
        <option value="1" selected="selected">初9*9</option>
        <option value="2" >中16*16</option>
        <option value="3">高30*16</option>
        </select>
        <button onclick="timedCount()">开始</button>
        <button onclick="stop()">停止</button>
        <button onclick="reload()">重置</button>
        <button onclick="Drawall()">显示所有</button>
        <input type="text" readonly="readonly" id="time">
    </p>
    <p>
        <canvas id="myCanvas" oncontextmenu=self.event.returnvalue=false width="180" height="180" style="border:1px solid #000000;background:lightgray;"></canvas>
    </p>
    <script>
        var r=9;//99 1616 3016
        var c=9;
        var difficulty=15
        var tempdata;
        var minedata;
        var signdata = new Array();
        var checkSigndata=new Array
        document.write("<br/>");
        var Difficulty=document.getElementById("Difficulty");
        Difficulty.options[1].selected = true;  
        
        var canvas=document.getElementById("myCanvas");
        canvas.addEventListener("mousedown", doMouseDown, false); 
        canvas.oncontextmenu=function(){return false;}
        load(1);
        redraw();
        //test();
        
        //Drawall();
        var t;
        var tick=0;
        function timedCount(){
            document.getElementById(&#39;time&#39;).value=tick
            tick=tick+1
            t=setTimeout("timedCount()",1000)
        }
        function stop(){
            if(t!=null)clearTimeout(t);
            tick=0;
        }
        function loadsigndata(){
            for(var i=0;i<r;i++){signdata[i]=new Array(c);}
            for(var i=0;i<r;i++){checkSigndata[i]=new Array(c);    }
            for (var i = 0; i < r*c; i++)
            {
                switch(minedata[Math.floor(i / c)][i % c])
                {
                    case 9:checkSigndata[Math.floor(i / c)][i % c]=2;
                        break;
                    case 0:checkSigndata[Math.floor(i / c)][i % c]=3;
                        break;
                    default:checkSigndata[Math.floor(i / c)][i % c]=1;
                        break;
                }
            }
            
        }
        function test(){
            for (var i = 0; i < r*c; i++)
            {
                document.write(minedata[Math.floor(i / c)][i % c]+"&nbsp");
                if(i%c==c-1)document.write("<br/>");
            }
        }
        function load(v){
            switch(parseInt(v))
            {
                case 1:
                    r=9;
                    c=9;
                    break;
                case 2:
                    r=16;
                    c=16;
                    break;
                case 3:
                    r=30;
                    c=16;
                    break;
            }
            reload();
            //Drawall();
        }
        function reload(){
            redraw();
            tempdata=Set(r,c,difficulty);
            minedata=GetNewData(tempdata,r,c);
            loadsigndata();
        }
        function redraw(){
            canvas.setAttribute(&#39;width&#39;,c*30);
            canvas.setAttribute(&#39;height&#39;,r*30);
            var ctx=canvas.getContext("2d");
            for(var i=0;i<r+1;i++)
            {
                ctx.moveTo(0,i*30);
                ctx.lineTo(c*30,i*30);
                ctx.stroke();        
            }
            for(var i=0;i<c+1;i++)
            {
                ctx.moveTo(i*30,0);
                ctx.lineTo(i*30,r*30);
                ctx.stroke();        
            }
            
        }
        function contains(arr, obj) {  
            var i = arr.length;  
            while (i--) {  
                if (arr[i].r==obj.r&&arr[i].c==obj.c) {  
                    return true;  
                }  
            }  
            return false;  
        }
        var plist=new Array();
        function doMouseDown(event){
            var btnNum = event.button;
            var x = event.pageX;
            var y = event.pageY;
            var loc = getPointOnCanvas(canvas, x, y);
            var xx=Math.floor(loc.x/30);
            var yy=Math.floor(loc.y/30);
            if(signdata[yy]!=null&&signdata[yy][xx]!=null&&(signdata[yy][xx]==3||signdata[yy][xx]==1))return;
            if (btnNum==0)
            {
                drawCell(xx,yy);
                plist.splice(0,plist.length);
                GetRegion(yy,xx,minedata,plist);
                for(var l=0;l<plist.length;l++){drawCell(plist[l].c,plist[l].r);}
            }
            else if(btnNum==2)
            {
                drawCellr(xx,yy);
            }
            if(check())alert("成功："+tick);
        }
        function check(){
            for (var i = 0; i < r*c; i++)
            {
                if(checkSigndata[Math.floor(i / c)][i % c]!=signdata[Math.floor(i / c)][i % c])
                {
                    return false;
                }
            }
            return true;
        }
        function drawCell(xx,yy){
            var ctx = canvas.getContext("2d");
            ctx.textAlign = "start";
            ctx.fillStyle = "red";
            ctx.font = "30px Arial";
            if(signdata[yy][xx]!=null && signdata[yy][xx]==    2)
            {
                ctx.fillStyle = "lightgray";
                ctx.fillRect(xx*30,yy*30,29,29);
            }
            ctx.fillStyle = "red";
            if(minedata[yy][xx]==9){
                //ctx.fillText("×",xx*30,(yy+1)*30);
                alert("失败");
                Drawall();
                //signdata[yy][xx]=2;
            }
            else if(minedata[yy][xx]==0){
                //ctx.fillText("0",xx*30,(yy+1)*30);
                ctx.fillStyle = "green";
                ctx.fillRect(xx*30,yy*30,29,29);
                signdata[yy][xx]=3;
            }
            else{
                ctx.fillText(minedata[yy][xx].toString(),xx*30,(yy+1)*30);
                signdata[yy][xx]=1;
            }
        }
        function drawCellr(xx,yy){
            var ctx = canvas.getContext("2d");
            ctx.textAlign = "start";
            ctx.fillStyle = "red";
            ctx.font = "30px Arial";
            if(signdata[yy][xx]==0||signdata[yy][xx]==null)
            {
                ctx.fillText("√",xx*30,(yy+1)*30);
                signdata[yy][xx]=2;
            }
            else
            {
                ctx.fillStyle = "lightgray";
                ctx.fillRect(xx*30,yy*30,29,29);
                //ctx.fillText("√",xx*30,(yy+1)*30);
                signdata[yy][xx]=0;
            }
            ctx.stroke();
            
        }
        function getPointOnCanvas(canvas, x, y) {  
            var bbox = canvas.getBoundingClientRect();  
            return { x: x - bbox.left * (canvas.width  / bbox.width),  
                    y: y - bbox.top  * (canvas.height / bbox.height)  
                    };  
        } 
        function Drawall(){
            redraw();
            var ctx = canvas.getContext("2d");
            ctx.textAlign = "start";
            ctx.fillStyle = "red";
            ctx.font = "30px Arial";
            for(var i=0;i<r*c;i++)
            {
                var x=i%c*30;
                var y=(Math.floor(i/c)+1)*30;
                if(minedata[Math.floor(i/c)][i%c]==9){ctx.fillText("×",x,y);}
                else if(minedata[Math.floor(i/c)][i%c]==0){ctx.fillText("0",x,y);}
                else{ctx.fillText(minedata[Math.floor(i/c)][i%c].toString(),x,y);}
            
            }
        }
    </script>
</body>

</html>

登入後複製

【相關推薦】

1. 免費h5線上影片教學

2. HTML5 完整版手冊

3. php.cn原始html5影片教學

以上是分享一個用h5製作的網頁版掃雷遊戲實例代碼的詳細內容。更多資訊請關注PHP中文網其他相關文章！

本網站聲明

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

熱AI工具

熱工具

熱門話題

gmail信箱登陸入口在哪裡

7488

CakePHP 教程

1377

steam的賬戶名稱是什麼格式

win11激活密鑰永久

NYT連接提示和答案

Related knowledge

Nvgpucomp64.dll導致Windows PC遊戲崩潰; Mar 26, 2024 am 08:20 AM

如果Nvgpucomp64.dll導致遊戲經常崩潰，這裡提供的解決方案可能會對您有所幫助。這種問題通常是由於過時或損壞的顯示卡驅動程式、遊戲檔案損壞等原因引起的。修復這些問題可以幫助您解決遊戲崩潰的困擾。 Nvgpucomp64.dll檔案與NVIDIA顯示卡關聯。當這個檔案崩潰時，你的遊戲也會崩潰。這通常發生在《LordsoftheFallen》、《LiesofP》、《RocketLeague》和《ApexLegends》等遊戲中。 Nvgpucomp64.dll使WindowsPC上的遊戲崩潰如果N

英偉達上線 RTX HDR 功能：不支援的遊戲透過 AI 濾鏡達到 HDR 艷麗視覺效果 Feb 24, 2024 pm 06:37 PM

本站2月23日消息，英偉達昨晚更新推出了NVIDIA‏‏應用程序，為玩家提供了全新的統一GPU控制中心，便於玩家透過遊戲內懸浮窗提供的強大錄影工具捕捉精彩時刻。在本次更新中，英偉達也引入了RTXHDR功能，本站附上官方介紹如下：RTXHDR是一款AI賦能的全新Freestyle濾鏡，可以將高動態範圍(HDR)的艷麗視覺效果無縫引入到原本不支援HDR的遊戲中。你只需擁有相容HDR的顯示器，即可對大量基於DirectX和Vulkan的遊戲使用此功能。玩家在啟用RTXHDR功能之後，運行即便不支援HD

超級人類（superpeople）遊戲下載安裝方法介紹 Mar 30, 2024 pm 04:01 PM

超級人類（superpeople）遊戲可以透過steam客戶端下載遊戲，這款遊戲的大小在28G左右，下載到安裝通常需要一個半小時，以下為大家帶來具體的下載安裝教學！新的申請全球封閉測試方法1)在Steam商店（steam客戶端下載）搜尋“SUPERPEOPLE”2)點擊“SUPERPEOPLE”商店頁面下方的“請求SUPERPEOPLE封閉測試訪問權限”3)點擊請求訪問權限按鈕後，將在Steam庫中可確認「SUPERPEOPLECBT」遊戲4)在「SUPERPEOPLECBT」中點選安裝按鈕並下

win11蜘蛛紙牌在哪 win11玩蜘蛛紙牌遊戲的方法 Mar 01, 2024 am 11:37 AM

在玩夠3A大作以及手遊的小夥伴們，是不是想重溫一下兒時的電腦遊戲呀？那我們一起在windows11中尋找蜘蛛紙牌吧！點選介面上的開始選單，點選「所有應用」按鈕；點選「所有應用」。找到並選擇“MicrosoftSolitaireCollection”，這是微軟的紙牌系列遊戲應用程式；紙牌系列遊戲選擇。載入完成後，進入選擇介面，找到“蜘蛛紙牌”；選擇“蜘蛛紙牌”。雖然介面有些許變化，但還是以前的

華碩發表 BIOS 更新，提升英特爾第 13/14 代處理器遊戲穩定性 Apr 20, 2024 pm 05:01 PM

本站4月20日消息，華碩公司近日發布了BIOS更新，改善了英特爾第13/14代處理器運行遊戲時崩潰等不穩定情況。本站先前報導，玩家回饋的問題包括運行萬代南夢宮格鬥遊戲《鐵拳8》PC演示版時，即便電腦擁有充足的記憶體和顯存，也會出現系統崩潰並提示記憶體不足的錯誤訊息。類似的崩潰問題也出現在《戰地風雲2042》、《遺跡2》、《要塞英雄》、《墮落之主》、《霍格華茲之遺》以及《TheFinals》等多款遊戲中。 RAD公司今年2月發布長文，解釋遊戲崩潰問題是BIOS設定、英特爾處理器的高時脈頻率和高功耗共同

小黑盒買的遊戲怎麼入庫steam Feb 23, 2024 pm 05:30 PM

小黑盒中可以購買各種遊戲，那麼買的遊戲怎麼入庫steam呢？用戶需要在steam裡的在Steam上激活產品，然後複製小黑盒裡的激活碼來激活，這篇買的遊戲入庫steam方法介紹就能夠告訴大家具體的方法，下面就是詳細的介紹，趕緊來看看吧！小黑盒買的遊戲怎麼入庫steam答：在steam裡的在Steam上啟動產品來入庫具體方法：1、先點選steam上面的遊戲按鍵。 2.點選裡面的在Steam上啟動產品。 3、之後點選出現視窗的下一步。 4.在產品啟動裡貼上小黑盒購買的代碼。 5.之後點選下一步，就能夠添

Win11玩遊戲怎麼停用輸入法 Mar 15, 2024 pm 02:40 PM

最近有一些小夥伴反映自己在打遊戲的過程中，常常會把輸入法按出來，非常的影響遊戲體驗，這裡小編就給大家詳細介紹一下Win11玩遊戲禁用輸入法的方法，有需要的小夥伴可以來看看。停用方法：1、右鍵右下角工作列中的輸入法圖標，選擇清單中的"語言首選項"。 2、進入到新的介面後，點擊其中的"新增首選的語言"選項。 3.在彈出的視窗中，選擇"英文(美國)"。 4、再點擊"下一步"。 5、隨後根據需求選擇是否安裝一些可選項。 6、然後點選"安裝"，等待安裝完成。 7.然後點選右下角的輸入法狀態欄，選擇剛安裝的"英文(

為 PS5 Pro 鋪路，《無人深空》更新代碼「驚現」遊戲機開發代號「Trinity」及畫質設定檔 Jul 22, 2024 pm 01:10 PM

本站7月22日消息，外媒twistedvoxel在《無人深空》最新的「世界第一部分」更新代碼中發現了傳聞中PS5的開發代號「Trinity」及相關畫質配置文件，佐證了索尼有望近期推出PS5Pro機種。雖然《無人深空》在近期的更新中已為遊戲加強了畫質表現，但仍有不少玩家認為這可能是HelloGames為新機型所提前鋪路，根據最新的圖形預設，在PS5Pro下這款遊戲的動態解析度縮放從0.6增加到0.8，這代表遊戲平均解析度更高，一些圖形細節從「High」級別升級到「Ultra」級別，不過由於每款遊戲

See all articles

分享一個用h5製作的網頁版掃雷遊戲實例代碼

熱AI工具

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

AI Hentai Generator

熱門文章

熱工具

記事本++7.3.1

SublimeText3漢化版

禪工作室 13.0.1

Dreamweaver CS6

SublimeText3 Mac版

熱門話題