h5 で作成されたマインスイーパゲームの Web バージョンのサンプルコードを共有する-H5 チュートリアル-php.cn

ホームページ

ウェブフロントエンド

H5 チュートリアル

h5 で作成されたマインスイーパゲームの Web バージョンのサンプルコードを共有する

零下一度

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 で作成されたマインスイーパゲームの Web バージョンのサンプルコードを共有するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

ホットツール

ホットトピック

Gmailメールのログイン入り口はどこですか？

7493

CakePHP チュートリアル

1377

Steamのアカウント名の形式は何ですか

Win11 Activation Key Permanent

NYTの接続はヒントと回答です

Related knowledge

Nvgpucomp64.dll は Windows PC ゲームをクラッシュさせます。 Mar 26, 2024 am 08:20 AM

Nvgpucomp64.dll が原因でゲームが頻繁にクラッシュする場合は、ここで提供される解決策が役立つ可能性があります。この問題は通常、グラフィックカードドライバーが古いか破損していること、ゲームファイルが破損していることなどが原因で発生します。これらの問題を修正すると、ゲームのクラッシュに対処するのに役立ちます。 Nvgpucomp64.dll ファイルは、NVIDIA グラフィックスカードに関連付けられています。このファイルがクラッシュすると、ゲームもクラッシュします。これは通常、LordsofttheFallen、LiesofP、RocketLeague、ApexLegends などのゲームで発生します。 N の場合、Nvgpucomp64.dll が Windows PC 上のゲームをクラッシュさせる

スーパーピープルゲームのダウンロードとインストール方法の紹介 Mar 30, 2024 pm 04:01 PM

superpeople ゲームは、steam クライアントを通じてダウンロードできます。このゲームのサイズは約 28G です。ダウンロードとインストールには通常 1 時間半かかります。ここでは、具体的なダウンロードとインストールのチュートリアルを紹介します。グローバルクローズドテストへの新しい申請方法 1) Steamストア(Steamクライアントダウンロード)で「SUPERPEOPLE」を検索 2) 「SUPERPEOPLE」ストアページ下部にある「SUPERPEOPLEクローズドテストへのアクセスをリクエスト」をクリック 3) request accessボタン、Steamライブラリで「SUPERPEOPLECBT」ゲームが確認できます 4)「SUPERPEOPLECBT」内のインストールボタンをクリックしてダウンロード

NVIDIA が RTX HDR 機能を開始: サポートされていないゲームは AI フィルターを使用して HDR の豪華な視覚効果を実現します Feb 24, 2024 pm 06:37 PM

2 月 23 日のこの Web サイトのニュースによると、NVIDIA は昨夜 NVIDIA アプリケーションを更新してリリースし、プレイヤーに新しい統合 GPU コントロールセンターを提供し、プレイヤーはゲーム内フローティングによって提供される強力な記録ツールを通じて素晴らしい瞬間をキャプチャできるようになりました。窓。このアップデートでは、NVIDIA も RTXHDR 機能を導入しました。公式の紹介文はこのサイトに添付されています: RTXHDR は、ハイダイナミックレンジ (HDR) のゴージャスな視覚効果をゲームにシームレスに導入できる、AI を活用した新しいフリースタイルフィルターです。もともとHDRをサポートしています。この機能をさまざまな DirectX および Vulkan ベースのゲームで使用するには、HDR 互換モニターが必要です。プレーヤーが RTXHDR 機能を有効にすると、HD をサポートしていなくてもゲームが実行されます。

win11のスパイダーソリティアはどこにありますか win11でスパイダーソリティアゲームをプレイする方法 Mar 01, 2024 am 11:37 AM

AAA の傑作やモバイルゲームを十分にプレイした友人の皆さん、子供の頃のコンピューターゲームを追体験してみませんか?それでは、Windows 11 のスパイダーソリティアを一緒に探してみましょう!インターフェイスの [スタート] メニューをクリックし、[すべてのアプリ] ボタンをクリックし、[すべてのアプリ] をクリックします。 Microsoft のソリティアシリーズゲームアプリケーションである「MicrosoftSolitaireCollection」を見つけて選択します; ソリティアシリーズゲームの選択。ロードが完了したら、選択インターフェイスに入り、「スパイダーソリティア」を見つけて、「スパイダーソリティア」を選択します。インターフェースは若干変更されていますが、以前と同じです。

ASUS、Intelの第13/14世代プロセッサーでのゲームの安定性を向上させるBIOSアップデートをリリース Apr 20, 2024 pm 05:01 PM

4月20日の当サイトのニュースによると、ASUSは最近、Intelの第13/14世代プロセッサでゲームを実行する際のクラッシュなどの不安定性を改善するBIOSアップデートをリリースしたとのこと。同サイトは以前、バンダイナムコの格闘ゲーム「鉄拳8」のPCデモ版を実行すると、コンピュータに十分なメモリとビデオメモリがある場合でもシステムがクラッシュし、メモリ不足を示すエラーメッセージが表示されるなどの問題がプレイヤーから報告されたと報告していた。同様のクラッシュの問題は、「バトルフィールド 2042」、「レムナント 2」、「フォートナイト」、「ロードオブザフォールン」、「ホグワーツレガシー」、「ザファイナル」などの多くのゲームでも発生しています。 RADは今年2月に長い記事を公開し、ゲームクラッシュの問題はBIOS設定、高いクロック周波数、Intelプロセッサの高い消費電力の組み合わせであると説明した。

Little Black Box から購入したゲームを Steam に追加する方法 Feb 23, 2024 pm 05:30 PM

小さな黒い箱にはさまざまなゲームが購入できますが、購入したゲームをSteamに追加するにはどうすればよいですか?ユーザーは、Steam で Steam 上で製品をアクティベートし、小さな黒いボックス内のアクティベーションコードをコピーしてアクティベートする必要があります。購入したゲームを Steam に保存する方法のこの紹介では、具体的な方法を説明します。以下は詳細な紹介です。急いで見に来てください！ Little Black Box から購入したゲームを 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への道筋をつける『No Man's Sky』アップデートコードがゲーム機の開発コード名「Trinity」と画質設定ファイルに「驚いた」 Jul 22, 2024 pm 01:10 PM

7月22日の当サイトのニュースによると、海外メディアtwistedvoxelは、『No Man's Sky』の最新「World Part 1」アップデートコード内に噂のPS5開発コードネーム「Trinity」と関連画質設定ファイルを発見し、ソニーがPS5Proモデルが最近発売されました。「No Man's Sky」は最近のアップデートでゲームのグラフィックス性能を強化しましたが、多くのプレイヤーは、これがHelloGamesが事前に新しいモデルへの道を切り開いているのではないかとまだ信じています。最新のグラフィックスプリセットによると、PS5 Proのゲームの動的解像度は異なります。スケーリングは 0.6 から 0.8 に増加しました。これは、ゲームの平均解像度が高く、一部のグラフィックの詳細が「高」レベルから「超」レベルにアップグレードされていることを意味します。

See all articles

h5 で作成されたマインスイーパゲームの Web バージョンのサンプルコードを共有する

ホットAIツール

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

AI Hentai Generator

人気の記事

ホットツール

メモ帳++7.3.1

SublimeText3 中国語版

ゼンドスタジオ 13.0.1

ドリームウィーバー CS6

SublimeText3 Mac版

ホットトピック

h5 で作成されたマインスイーパ ゲームの Web バージョンのサンプル コードを共有する

ホットAIツール

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

AI Hentai Generator

人気の記事

ホットツール

メモ帳++7.3.1

SublimeText3 中国語版

ゼンドスタジオ 13.0.1

ドリームウィーバー CS6

SublimeText3 Mac版

ホットトピック

h5 で作成されたマインスイーパゲームの Web バージョンのサンプルコードを共有する