分享一個用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 id="扫雷游戏">扫雷游戏</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

H5代碼：Web開發人員的最佳實踐Apr 16, 2025 am 12:14 AM

H5代碼的最佳實踐包括：1.使用正確的DOCTYPE聲明和字符編碼；2.採用語義化標籤；3.減少HTTP請求；4.使用異步加載；5.優化圖像。這些實踐能提升網頁的效率、可維護性和用戶體驗。

H5：網絡標準和技術的發展Apr 15, 2025 am 12:12 AM

Web标准和技术从HTML4、CSS2和简单的JavaScript演变至今，经历了显著的发展。1)HTML5引入了Canvas、WebStorage等API，增强了Web应用的复杂性和互动性。2)CSS3增加了动画和过渡功能，使页面效果更加丰富。3)JavaScript通过Node.js和ES6的现代化语法，如箭头函数和类，提升了开发效率和代码可读性，这些变化推动了Web应用的性能优化和最佳实践的发展。

H5是HTML5的速記嗎？探索細節Apr 14, 2025 am 12:05 AM

H5不僅僅是HTML5的簡稱，它代表了一個更廣泛的現代網頁開發技術生態：1.H5包括HTML5、CSS3、JavaScript及相關API和技術；2.它提供更豐富、互動、流暢的用戶體驗，能在多設備上無縫運行；3.使用H5技術棧可以創建響應式網頁和復雜交互功能。

H5和HTML5：網絡開發中常用的術語Apr 13, 2025 am 12:01 AM

H5與HTML5指的是同一個東西，即HTML5。 HTML5是HTML的第五個版本，帶來了語義化標籤、多媒體支持、畫布與圖形、離線存儲與本地存儲等新功能，提升了網頁的表現力和交互性。

H5指的是什麼？探索上下文Apr 12, 2025 am 12:03 AM

H5referstoHTML5,apivotaltechnologyinwebdevelopment.1)HTML5introducesnewelementsandAPIsforrich,dynamicwebapplications.2)Itsupportsmultimediawithoutplugins,enhancinguserexperienceacrossdevices.3)SemanticelementsimprovecontentstructureandSEO.4)H5'srespo

H5：工具，框架和最佳實踐Apr 11, 2025 am 12:11 AM

H5開發需要掌握的工具和框架包括Vue.js、React和Webpack。 1.Vue.js適用於構建用戶界面，支持組件化開發。 2.React通過虛擬DOM優化頁面渲染，適合複雜應用。 3.Webpack用於模塊打包，優化資源加載。

HTML5的遺產：當前了解H5Apr 10, 2025 am 09:28 AM

HTML5hassignificantlytransformedwebdevelopmentbyintroducingsemanticelements,enhancingmultimediasupport,andimprovingperformance.1)ItmadewebsitesmoreaccessibleandSEO-friendlywithsemanticelementslike,,and.2)HTML5introducednativeandtags,eliminatingthenee