分享一个用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邮箱登陆入口在哪里

7476

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

超级人类（superpeople）游戏下载安装方法介绍 Mar 30, 2024 pm 04:01 PM

超级人类（superpeople）游戏可以通过steam客户端下载游戏，这款游戏的大小在28G左右，下载到安装通常需要一个半小时，下面为大家带来具体的下载安装教程！新的申请全球封闭测试方法1)在Steam商店（steam客户端下载）搜索“SUPERPEOPLE”2)点击“SUPERPEOPLE”商店页面下方的“请求SUPERPEOPLE封闭测试访问权限”3)点击请求访问权限按钮后，将在Steam库中可确认“SUPERPEOPLECBT”游戏4)在“SUPERPEOPLECBT”中点击安装按钮并下

英伟达上线 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

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版

热门话题