Web-Frontend
H5-Tutorial
Teilen Sie einen Beispielcode einer mit h5 erstellten Webversion des Minesweeper-Spiels
Teilen Sie einen Beispielcode einer mit h5 erstellten Webversion des Minesweeper-Spiels
Ich habe nichts zu tun, um einen Minensucher zu schreiben ... Er ist einfach in Ordnung, aber er ist wirklich gut
<!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('time').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]+" ");
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('width',c*30);
canvas.setAttribute('height',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>[Verwandte Empfehlungen]
1. Kostenloses h5-Online-Video-Tutorial
3 Original-HTML5-Video-Tutorial
Das obige ist der detaillierte Inhalt vonTeilen Sie einen Beispielcode einer mit h5 erstellten Webversion des Minesweeper-Spiels. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
Heiße KI -Werkzeuge
Undresser.AI Undress
KI-gestützte App zum Erstellen realistischer Aktfotos
AI Clothes Remover
Online-KI-Tool zum Entfernen von Kleidung aus Fotos.
Undress AI Tool
Ausziehbilder kostenlos
Clothoff.io
KI-Kleiderentferner
AI Hentai Generator
Erstellen Sie kostenlos Ai Hentai.
Heißer Artikel
Heiße Werkzeuge
Notepad++7.3.1
Einfach zu bedienender und kostenloser Code-Editor
SublimeText3 chinesische Version
Chinesische Version, sehr einfach zu bedienen
Senden Sie Studio 13.0.1
Leistungsstarke integrierte PHP-Entwicklungsumgebung
Dreamweaver CS6
Visuelle Webentwicklungstools
SublimeText3 Mac-Version
Codebearbeitungssoftware auf Gottesniveau (SublimeText3)
Heiße Themen
1377
52
Nvgpucomp64.dll führt zum Absturz von Windows-PC-Spielen;
Mar 26, 2024 am 08:20 AM
Wenn Nvgpucomp64.dll dazu führt, dass Ihr Spiel häufig abstürzt, können Ihnen die hier bereitgestellten Lösungen helfen. Dieses Problem wird normalerweise durch veraltete oder beschädigte Grafikkartentreiber, beschädigte Spieledateien usw. verursacht. Das Beheben dieser Probleme kann Ihnen dabei helfen, Spielabstürze zu beheben. Die Datei Nvgpucomp64.dll ist mit NVIDIA-Grafikkarten verknüpft. Wenn diese Datei abstürzt, stürzt auch Ihr Spiel ab. Dies geschieht normalerweise in Spielen wie LordsoftheFallen, LiesofP, RocketLeague und ApexLegends. Nvgpucomp64.dll stürzt Spiele auf Windows-PCs ab, wenn N
Einführung in das Herunterladen und Installieren des Superpeople-Spiels
Mar 30, 2024 pm 04:01 PM
Das Superpeople-Spiel kann über den Steam-Client heruntergeladen werden. Die Größe dieses Spiels beträgt normalerweise eineinhalb Stunden. Hier ist ein spezielles Download- und Installations-Tutorial. Neue Methode zur Beantragung globaler geschlossener Tests 1) Suchen Sie nach „SUPERPEOPLE“ im Steam-Store (Steam-Client-Download) 2) Klicken Sie unten auf der „SUPERPEOPLE“-Store-Seite auf „Zugriff auf geschlossene SUPERPEOPLE-Tests anfordern“ 3) Nachdem Sie auf geklickt haben Schaltfläche „Zugriff anfordern“. Das Spiel „SUPERPEOPLECBT“ kann in der Steam-Bibliothek bestätigt werden. 4) Klicken Sie auf die Schaltfläche „Installieren“ in „SUPERPEOPLECBT“ und laden Sie es herunter
NVIDIA führt RTX HDR-Funktion ein: Nicht unterstützte Spiele nutzen KI-Filter, um wunderschöne visuelle HDR-Effekte zu erzielen
Feb 24, 2024 pm 06:37 PM
Laut Nachrichten dieser Website vom 23. Februar hat NVIDIA gestern Abend die NVIDIA-Anwendung aktualisiert und gestartet und bietet Spielern ein neues einheitliches GPU-Kontrollzentrum, das es Spielern ermöglicht, wunderbare Momente durch das leistungsstarke Aufzeichnungstool des In-Game-Floating festzuhalten Fenster. In diesem Update hat NVIDIA auch die RTXHDR-Funktion eingeführt. Die offizielle Einführung ist wie folgt beigefügt: RTXHDR ist ein neuer KI-gestützter Freestyle-Filter, der die großartigen visuellen Effekte von High Dynamic Range (HDR) nahtlos in Spiele einführen kann, die dies ursprünglich nicht tun unterstützt HDR. Sie benötigen lediglich einen HDR-kompatiblen Monitor, um diese Funktion mit einer Vielzahl von DirectX- und Vulkan-basierten Spielen nutzen zu können. Nachdem der Player die RTXHDR-Funktion aktiviert hat, läuft das Spiel auch dann, wenn es HD nicht unterstützt
Wo ist Spider Solitaire in Win11? Wie spielt man das Spider Solitaire-Spiel in Win11?
Mar 01, 2024 am 11:37 AM
Freunde, die genug AAA-Meisterwerke und Handyspiele gespielt haben, möchten Sie die Computerspiele Ihrer Kindheit noch einmal erleben? Dann lasst uns gemeinsam nach Spider Solitaire in Windows 11 suchen! Klicken Sie auf der Benutzeroberfläche auf das Startmenü und dann auf die Schaltfläche „Alle Apps“. Suchen und wählen Sie „MicrosoftSolitaireCollection“, die Spieleanwendung der Solitaire-Serie von Microsoft. Nachdem der Ladevorgang abgeschlossen ist, rufen Sie die Auswahloberfläche auf und suchen Sie nach „Spider Solitaire“. Wählen Sie „Spider Solitaire“. Obwohl sich die Benutzeroberfläche geringfügig geändert hat, ist sie immer noch dieselbe wie zuvor
ASUS veröffentlicht BIOS-Update zur Verbesserung der Spielestabilität auf Intels Prozessoren der 13./14. Generation
Apr 20, 2024 pm 05:01 PM
Laut Nachrichten dieser Website vom 20. April hat ASUS kürzlich ein BIOS-Update veröffentlicht, das Instabilitäten wie Abstürze beim Ausführen von Spielen auf Intel-Prozessoren der 13./14. Generation verbessert. Diese Seite berichtete zuvor, dass Spieler Probleme gemeldet hätten, unter anderem, dass beim Ausführen der PC-Demoversion von Bandai Namcos Kampfspiel „Tekken 8“ das System abstürzte und eine Fehlermeldung über unzureichenden Speicher ausgab, selbst wenn der Computer über ausreichend Arbeits- und Videospeicher verfügte. Ähnliche Absturzprobleme traten auch in vielen Spielen wie „Battlefield 2042“, „Remnant 2“, „Fortnite“, „Lord of the Fallen“, „Hogwarts Legacy“ und „The Finals“ auf. RAD veröffentlichte im Februar dieses Jahres einen langen Artikel, in dem erklärt wurde, dass das Spielabsturzproblem eine Kombination aus BIOS-Einstellungen, hoher Taktfrequenz und hohem Stromverbrauch von Intel-Prozessoren ist.
So fügen Sie bei Little Black Box gekaufte Spiele zu Steam hinzu
Feb 23, 2024 pm 05:30 PM
In der kleinen schwarzen Box können verschiedene Spiele gekauft werden. Wie fügt man die gekauften Spiele zu Steam hinzu? Benutzer müssen das Produkt auf Steam in Steam aktivieren und dann den Aktivierungscode in das kleine schwarze Kästchen kopieren, um es zu aktivieren. Diese Einführung in die Methode zum Speichern gekaufter Spiele in Steam erklärt Ihnen die spezifische Methode. Beeilen Sie sich. Schauen Sie vorbei! Wie füge ich bei Little Black Box gekaufte Spiele zu Steam hinzu? Antwort: Aktivieren Sie das Produkt auf Steam, um es zu Steam hinzuzufügen. Die spezifische Methode ist: 1. Klicken Sie zunächst auf die Spielschaltfläche auf Steam. 2. Klicken Sie auf Produkt auf Steam aktivieren. 3. Klicken Sie dann im angezeigten Fenster auf Weiter. 4. Fügen Sie den Kaufcode in das kleine schwarze Feld in der Produktaktivierung ein. 5. Klicken Sie dann zum Hinzufügen auf Weiter
So deaktivieren Sie die Eingabemethode beim Spielen von Spielen unter Win11
Mar 15, 2024 pm 02:40 PM
Kürzlich haben einige Freunde berichtet, dass sie beim Spielen häufig die Eingabemethode drücken, was das Spielerlebnis stark beeinträchtigt. Hier gebe ich Ihnen eine detaillierte Einführung in die Methode zum Deaktivieren der Eingabemethode beim Spielen in Win11 Freunde können vorbeikommen und einen Blick darauf werfen. Methode deaktivieren: 1. Klicken Sie mit der rechten Maustaste auf das Eingabemethodensymbol in der Taskleiste in der unteren rechten Ecke und wählen Sie „Spracheinstellungen“ in der Liste aus. 2. Nachdem Sie die neue Benutzeroberfläche aufgerufen haben, klicken Sie auf die Option „Bevorzugte Sprache hinzufügen“. 3. Wählen Sie im Popup-Fenster „Englisch (USA)“ aus. 4. Klicken Sie erneut auf „Weiter“. 5. Wählen Sie dann, ob Sie einige Optionen entsprechend Ihren Anforderungen installieren möchten. 6. Klicken Sie dann auf „Installieren“ und warten Sie, bis die Installation abgeschlossen ist. 7. Klicken Sie dann auf die Statusleiste der Eingabemethode in der unteren rechten Ecke und wählen Sie „Englisch (
Der Update-Code „No Man's Sky' ebnete den Weg für die PS5 Pro und „überraschte' den Entwicklungscodenamen der Spielekonsole „Trinity' und die Konfigurationsdatei für die Bildqualität
Jul 22, 2024 pm 01:10 PM
Laut Nachrichten dieser Website vom 22. Juli entdeckten ausländische Medien, Twistedvoxel, den gemunkelten PS5-Entwicklungscodenamen „Trinity“ und zugehörige Konfigurationsdateien für die Bildqualität im neuesten „World Part 1“-Updatecode von „No Man’s Sky“, was beweist, dass Sony es ist voraussichtlich Das PS5Pro-Modell wurde kürzlich auf den Markt gebracht. Obwohl „No Man’s Sky“ in den letzten Updates die Grafikleistung des Spiels verbessert hat, glauben viele Spieler immer noch, dass HelloGames den Weg für neue Modelle ebnen könnte. Laut den neuesten Grafikvoreinstellungen wird die dynamische Auflösung des Spiels unter PS5 Pro steigen Die Skalierung wurde von 0,6 auf 0,8 erhöht, was bedeutet, dass das Spiel eine höhere durchschnittliche Auflösung hat und einige grafische Details von „Hoch“ auf „Ultra“ angehoben wurden, aber seit jedem Spiel
