Maison interface Web Tutoriel H5 Partagez un exemple de code d'une version Web d'un jeu de dragueur de mines réalisé avec h5

Partagez un exemple de code d'une version Web d'un jeu de dragueur de mines réalisé avec h5

May 11, 2017 pm 02:26 PM

Je n'ai rien à faire pour écrire un dragueur de mines. L'algorithme n'est pas très bon... C'est juste bien, mais c'est vraiment bien. Vous pouvez y jeter un oeil

<!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>
Copier après la connexion

[Recommandations associées]<.>

1.

Tutoriel vidéo en ligne gratuit h5

2

Manuel de la version complète HTML5

3. tutoriel vidéo html5 original

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Outils d'IA chauds

Undresser.AI Undress

Undresser.AI Undress

Application basée sur l'IA pour créer des photos de nu réalistes

AI Clothes Remover

AI Clothes Remover

Outil d'IA en ligne pour supprimer les vêtements des photos.

Undress AI Tool

Undress AI Tool

Images de déshabillage gratuites

Clothoff.io

Clothoff.io

Dissolvant de vêtements AI

AI Hentai Generator

AI Hentai Generator

Générez AI Hentai gratuitement.

Article chaud

R.E.P.O. Crystals d'énergie expliqués et ce qu'ils font (cristal jaune)
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Meilleurs paramètres graphiques
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Comment réparer l'audio si vous n'entendez personne
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
WWE 2K25: Comment déverrouiller tout dans Myrise
4 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌

Outils chauds

Bloc-notes++7.3.1

Bloc-notes++7.3.1

Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise

SublimeText3 version chinoise

Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1

Envoyer Studio 13.0.1

Puissant environnement de développement intégré PHP

Dreamweaver CS6

Dreamweaver CS6

Outils de développement Web visuel

SublimeText3 version Mac

SublimeText3 version Mac

Logiciel d'édition de code au niveau de Dieu (SublimeText3)

Nvgpucomp64.dll provoque le crash des jeux PC Windows ; Nvgpucomp64.dll provoque le crash des jeux PC Windows ; Mar 26, 2024 am 08:20 AM

Si Nvgpucomp64.dll provoque des plantages fréquents de votre jeu, les solutions fournies ici peuvent vous aider. Ce problème est généralement dû à des pilotes de carte graphique obsolètes ou corrompus, à des fichiers de jeu corrompus, etc. La résolution de ces problèmes peut vous aider à résoudre les plantages du jeu. Le fichier Nvgpucomp64.dll est associé aux cartes graphiques NVIDIA. Lorsque ce fichier plante, votre jeu plante également. Cela se produit généralement dans des jeux comme LordsoftheFallen, LiesofP, RocketLeague et ApexLegends. Nvgpucomp64.dll plante les jeux sur un PC Windows si N

Introduction à la façon de télécharger et d'installer le jeu superpeople Introduction à la façon de télécharger et d'installer le jeu superpeople Mar 30, 2024 pm 04:01 PM

Le jeu superpeople peut être téléchargé via le client Steam. La taille de ce jeu est d'environ 28 Go. Le téléchargement et l'installation prennent généralement une heure et demie. Voici un tutoriel de téléchargement et d'installation spécifique pour vous ! Nouvelle méthode pour postuler aux tests fermés globaux 1) Recherchez "SUPERPEOPLE" dans la boutique Steam (téléchargement du client Steam) 2) Cliquez sur "Demander l'accès aux tests fermés SUPERPEOPLE" en bas de la page de la boutique "SUPERPEOPLE" 3) Après avoir cliqué sur le bouton de demande d'accès, le jeu "SUPERPEOPLECBT" peut être confirmé dans la bibliothèque Steam 4) Cliquez sur le bouton d'installation dans "SUPERPEOPLECBT" et téléchargez

NVIDIA lance la fonction RTX HDR : les jeux non pris en charge utilisent des filtres AI pour obtenir de superbes effets visuels HDR NVIDIA lance la fonction RTX HDR : les jeux non pris en charge utilisent des filtres AI pour obtenir de superbes effets visuels HDR Feb 24, 2024 pm 06:37 PM

Selon les informations de ce site Web du 23 février, NVIDIA a mis à jour et lancé hier soir l'application NVIDIA‏‏, offrant aux joueurs un nouveau centre de contrôle GPU unifié, permettant aux joueurs de capturer des moments merveilleux grâce au puissant outil d'enregistrement fourni par le flotteur du jeu. fenêtre. Dans cette mise à jour, NVIDIA a également introduit la fonction RTXHDR. L'introduction officielle est jointe à ce site : RTXHDR est un nouveau filtre Freestyle basé sur l'IA qui peut introduire de manière transparente les superbes effets visuels de la plage dynamique élevée (HDR) dans les jeux qui ne le font pas. prend en charge à l'origine le HDR. Tout ce dont vous avez besoin est un moniteur compatible HDR pour utiliser cette fonctionnalité avec une large gamme de jeux basés sur DirectX et Vulkan. Une fois que le lecteur a activé la fonction RTXHDR, le jeu fonctionnera même s'il ne prend pas en charge la HD.

Où est Spider Solitaire dans Win11 Comment jouer au jeu Spider Solitaire dans Win11 Où est Spider Solitaire dans Win11 Comment jouer au jeu Spider Solitaire dans Win11 Mar 01, 2024 am 11:37 AM

Amis qui ont joué suffisamment de chefs-d’œuvre AAA et de jeux mobiles, vous souhaitez revivre les jeux informatiques de votre enfance ? Alors cherchons ensemble Spider Solitaire dans Windows 11 ! Cliquez sur le menu Démarrer de l'interface, cliquez sur le bouton « Toutes les applications » ; cliquez sur « Toutes les applications ». Recherchez et sélectionnez « MicrosoftSolitaireCollection », qui est l'application de jeu de la série Solitaire de Microsoft ; Une fois le chargement terminé, entrez dans l'interface de sélection et recherchez « Spider Solitaire » ; sélectionnez « Spider Solitaire ». Même si l'interface a légèrement changé, elle est toujours la même qu'avant

ASUS publie une mise à jour du BIOS pour améliorer la stabilité des jeux sur les processeurs Intel de 13e et 14e génération ASUS publie une mise à jour du BIOS pour améliorer la stabilité des jeux sur les processeurs Intel de 13e et 14e génération Apr 20, 2024 pm 05:01 PM

Selon les informations de ce site du 20 avril, ASUS a récemment publié une mise à jour du BIOS, qui améliore l'instabilité telle que les plantages lors de l'exécution de jeux sur les processeurs Intel de 13e/14e génération. Ce site avait précédemment signalé que des joueurs avaient signalé des problèmes, notamment lors de l'exécution de la version démo PC du jeu de combat « Tekken 8 » de Bandai Namco, même si l'ordinateur dispose de suffisamment de mémoire et de mémoire vidéo, le système plante et affiche un message d'erreur indiquant une mémoire insuffisante. Des problèmes de crash similaires sont également apparus dans de nombreux jeux tels que "Battlefield 2042", "Remnant 2", "Fortnite", "Lord of the Fallen", "Hogwarts Legacy" et "The Finals". RAD a publié un long article en février de cette année, expliquant que le problème de crash du jeu est une combinaison de paramètres du BIOS, d'une fréquence d'horloge élevée et d'une consommation d'énergie élevée des processeurs Intel.

Comment ajouter des jeux achetés sur Little Black Box à Steam Comment ajouter des jeux achetés sur Little Black Box à Steam Feb 23, 2024 pm 05:30 PM

Divers jeux peuvent être achetés dans la petite boîte noire, alors comment ajouter les jeux achetés à Steam ? Les utilisateurs doivent activer le produit sur Steam dans Steam, puis copier le code d'activation dans la petite boîte noire pour l'activer. Cette introduction à la méthode de stockage des jeux achetés dans Steam vous expliquera la méthode spécifique. Ce qui suit est une introduction détaillée. dépêchez-vous Venez jeter un oeil ! Comment ajouter des jeux achetés sur Little Black Box à Steam Réponse : Activez le produit sur Steam dans Steam pour l'ajouter à l'entrepôt Méthodes spécifiques : 1. Tout d'abord, cliquez sur le bouton de jeu sur Steam. 2. Cliquez sur Activer le produit sur Steam. 3. Cliquez ensuite sur Suivant dans la fenêtre qui apparaît. 4. Collez le code d'achat dans la petite case noire lors de l'activation du produit. 5. Cliquez ensuite sur Suivant pour ajouter

Comment désactiver la méthode de saisie lors de la lecture de jeux sous Win11 Comment désactiver la méthode de saisie lors de la lecture de jeux sous Win11 Mar 15, 2024 pm 02:40 PM

Récemment, certains amis ont signalé qu'ils appuyaient souvent sur la méthode de saisie lorsqu'ils jouaient à des jeux, ce qui affecte grandement l'expérience de jeu. Ici, je vais vous donner une introduction détaillée à la méthode de désactivation de la méthode de saisie lors de la lecture de jeux dans Win11. Les amis peuvent venir jeter un œil. Méthode de désactivation : 1. Cliquez avec le bouton droit sur l'icône de la méthode de saisie dans la barre des tâches dans le coin inférieur droit et sélectionnez « Préférences de langue » dans la liste. 2. Après avoir accédé à la nouvelle interface, cliquez sur l'option « Ajouter une langue préférée ». 3. Dans la fenêtre contextuelle, sélectionnez « Anglais (États-Unis) ». 4. Cliquez à nouveau sur "Suivant". 5. Choisissez ensuite d'installer ou non certaines options en fonction de vos besoins. 6. Cliquez ensuite sur « Installer » et attendez la fin de l'installation. 7. Cliquez ensuite sur la barre d'état de la méthode de saisie dans le coin inférieur droit et sélectionnez l'option "Anglais (

Ouvrant la voie à la PS5 Pro, le code de mise à jour 'No Man's Sky' a 'surpris' le nom de code de développement de la console de jeu 'Trinity' et le fichier de configuration de la qualité d'image Ouvrant la voie à la PS5 Pro, le code de mise à jour 'No Man's Sky' a 'surpris' le nom de code de développement de la console de jeu 'Trinity' et le fichier de configuration de la qualité d'image Jul 22, 2024 pm 01:10 PM

Selon les informations de ce site le 22 juillet, les médias étrangers twistedvoxel ont découvert le nom de code de développement PS5 "Trinity" et les fichiers de configuration de la qualité d'image associés dans le dernier code de mise à jour "World Part 1" de "No Man's Sky", ce qui prouve que Sony est attendu Le modèle PS5Pro a été récemment lancé. Bien que "No Man's Sky" ait amélioré les performances graphiques du jeu dans les mises à jour récentes, de nombreux joueurs pensent toujours que cela pourrait être HelloGames ouvrant la voie à de nouveaux modèles, selon les derniers préréglages graphiques, sous la résolution dynamique du jeu PS5 Pro. la mise à l'échelle a été augmentée de 0,6 à 0,8, ce qui signifie que le jeu a une résolution moyenne plus élevée et que certains détails graphiques sont mis à niveau du niveau « Élevé » au niveau « Ultra », mais depuis chaque jeu

See all articles