分享一个用h5制作的网页版扫雷游戏实例代码
闲的没事 写个扫雷， 算法 不太好·····凑合，还真的不错，可以看一下
<!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>【相关推荐】
1. 免费h5在线视频教程
2. HTML5 完整版手册
Atas ialah kandungan terperinci 分享一个用h5制作的网页版扫雷游戏实例代码. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Alat AI Hot
Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik
AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.
Undress AI Tool
Gambar buka pakaian secara percuma
Clothoff.io
Penyingkiran pakaian AI
AI Hentai Generator
Menjana ai hentai secara percuma.
Artikel Panas
Alat panas
Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma
SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan
Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa
Dreamweaver CS6
Alat pembangunan web visual
SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)
Topik panas
1377
52
Nvgpucomp64.dll menyebabkan permainan Windows PC ranap;
Mar 26, 2024 am 08:20 AM
Jika Nvgpucomp64.dll menyebabkan permainan anda kerap ranap, penyelesaian yang disediakan di sini boleh membantu anda. Masalah ini biasanya disebabkan oleh pemacu kad grafik yang lapuk atau rosak, fail permainan yang rosak, dsb. Membetulkan isu ini boleh membantu anda menangani ranap permainan. Fail Nvgpucomp64.dll dikaitkan dengan kad grafik NVIDIA. Apabila fail ini ranap, permainan anda juga akan ranap. Ini biasanya berlaku dalam permainan seperti LordsoftheFallen, LiesofP, RocketLeague dan ApexLegends. Nvgpucomp64.dll ranap permainan pada Windows PC jika N
Pengenalan kepada cara memuat turun dan memasang permainan superpeople
Mar 30, 2024 pm 04:01 PM
Permainan superpeople boleh dimuat turun melalui klien wap Saiz permainan ini ialah kira-kira 28G Ia biasanya mengambil masa satu setengah jam untuk memuat turun dan memasang Berikut ialah tutorial muat turun dan pemasangan khusus untuk anda. Kaedah baharu untuk memohon ujian tertutup global 1) Cari "SUPERPEOPLE" dalam kedai Steam (muat turun klien stim) 2) Klik "Minta akses kepada ujian tertutup SUPERPEOPLE" di bahagian bawah halaman kedai "SUPERPEOPLE" 3) Selepas mengklik butang minta butang akses, Permainan "SUPERPEOPLECBT" boleh disahkan dalam perpustakaan Steam 4) Klik butang pasang dalam "SUPERPEOPLECBT" dan muat turun
NVIDIA melancarkan fungsi RTX HDR: permainan yang tidak disokong menggunakan penapis AI untuk mencapai kesan visual HDR yang cantik
Feb 24, 2024 pm 06:37 PM
Menurut berita dari laman web ini pada 23 Februari, NVIDIA mengemas kini dan melancarkan aplikasi NVIDIA malam tadi, menyediakan pemain dengan pusat kawalan GPU bersatu baharu, membolehkan pemain merakam detik indah melalui alat rakaman berkuasa yang disediakan oleh terapung dalam permainan. tingkap. Dalam kemas kini ini, NVIDIA turut memperkenalkan fungsi RTXHDR Pengenalan rasmi dilampirkan seperti berikut: RTXHDR ialah penapis Freestyle baharu yang diperkasakan AI yang boleh memperkenalkan kesan visual cantik julat dinamik tinggi (HDR) ke dalam permainan yang tidak pada asalnya. menyokong HDR. Apa yang anda perlukan ialah monitor serasi HDR untuk menggunakan ciri ini dengan pelbagai jenis permainan berasaskan DirectX dan Vulkan. Selepas pemain mendayakan fungsi RTXHDR, permainan akan berjalan walaupun ia tidak menyokong HD
Di manakah Spider Solitaire dalam win11 Bagaimana untuk bermain permainan Spider Solitaire dalam win11
Mar 01, 2024 am 11:37 AM
Rakan-rakan yang telah cukup bermain karya AAA dan permainan mudah alih, adakah anda ingin menghidupkan semula permainan komputer zaman kanak-kanak anda? Kemudian mari kita cari Spider Solitaire dalam Windows 11 bersama-sama! Klik menu Mula pada antara muka, klik butang "Semua Apl"; Cari dan pilih "MicrosoftSolitaireCollection", iaitu aplikasi permainan siri Solitaire Microsoft; Selepas pemuatan selesai, masukkan antara muka pemilihan dan cari "Spider Solitaire"; Walaupun antara muka telah berubah sedikit, ia masih sama seperti dahulu
ASUS mengeluarkan kemas kini BIOS untuk meningkatkan kestabilan permainan pada pemproses generasi ke-13/14 Intel
Apr 20, 2024 pm 05:01 PM
Menurut berita dari laman web ini pada 20 April, ASUS baru-baru ini mengeluarkan kemas kini BIOS, yang meningkatkan ketidakstabilan seperti ranap ketika menjalankan permainan pada pemproses generasi ke-13/14 Intel. Tapak ini sebelum ini melaporkan bahawa pemain melaporkan masalah termasuk apabila menjalankan versi demo PC permainan pertempuran Bandai Namco "Tekken 8", walaupun jika komputer mempunyai memori dan memori video yang mencukupi, sistem akan ranap dan menggesa mesej ralat yang menunjukkan memori tidak mencukupi. Isu ranap yang sama juga muncul dalam banyak permainan seperti "Battlefield 2042", "Remnant 2", "Fortnite", "Lord of the Fallen", "Hogwarts Legacy" dan "The Finals". RAD menerbitkan artikel panjang pada Februari tahun ini, menjelaskan bahawa masalah ranap permainan adalah gabungan tetapan BIOS, frekuensi jam tinggi dan penggunaan kuasa tinggi pemproses Intel.
Bagaimana untuk menambah permainan yang dibeli dari Little Black Box ke Steam
Feb 23, 2024 pm 05:30 PM
Pelbagai permainan boleh dibeli dalam kotak hitam kecil, jadi bagaimana anda menambah permainan yang dibeli ke Steam? Pengguna perlu mengaktifkan produk pada Steam dalam Steam, dan kemudian menyalin kod pengaktifan dalam kotak hitam kecil untuk mengaktifkan Pengenalan kepada kaedah menyimpan permainan yang dibeli ke dalam Steam akan memberitahu anda kaedah khusus. cepat Datang dan lihat! Cara menambah permainan yang dibeli dari Little Black Box ke Steam Jawapan: Aktifkan produk pada Steam dalam Steam untuk menambahkannya ke gudang Kaedah khusus: 1. Pertama, klik butang permainan pada Steam. 2. Klik Aktifkan produk pada Steam. 3. Kemudian klik Seterusnya dalam tetingkap yang muncul. 4. Tampal kod pembelian dalam kotak hitam kecil dalam pengaktifan produk. 5. Kemudian klik Seterusnya untuk menambah
Bagaimana untuk melumpuhkan kaedah input semasa bermain permainan dalam Win11
Mar 15, 2024 pm 02:40 PM
Baru-baru ini, beberapa rakan telah melaporkan bahawa mereka sering menekan kaedah input semasa bermain permainan, yang sangat mempengaruhi pengalaman permainan Kawan-kawan boleh datang tengok. Melumpuhkan kaedah: 1. Klik kanan ikon kaedah input dalam bar tugas di penjuru kanan sebelah bawah dan pilih "Keutamaan Bahasa" dalam senarai. 2. Selepas memasuki antara muka baharu, klik pilihan "Tambah bahasa pilihan". 3. Dalam tetingkap pop timbul, pilih "Bahasa Inggeris (Amerika Syarikat)". 4. Klik "Seterusnya" sekali lagi. 5. Kemudian pilih sama ada untuk memasang beberapa pilihan mengikut keperluan anda. 6. Kemudian klik "Pasang" dan tunggu pemasangan selesai. 7. Kemudian klik pada bar status kaedah input di sudut kanan bawah dan pilih "Bahasa Inggeris (
Membuka jalan untuk PS5 Pro, kod kemas kini untuk 'No Man's Sky' 'mengejutkan' nama kod pembangunan konsol 'Trinity' dan fail konfigurasi kualiti imej
Jul 22, 2024 pm 01:10 PM
Menurut berita dari laman web ini pada 22 Julai, media asing twistedvoxel menemui nama kod pembangunan PS5 yang dikhabarkan "Trinity" dan fail konfigurasi kualiti imej yang berkaitan dalam kod kemas kini "World Part 1" terbaru "No Man's Sky", yang membuktikan bahawa Sony adalah dijangka Model PS5Pro telah dilancarkan baru-baru ini. Walaupun "No Man's Sky" telah meningkatkan prestasi grafik permainan dalam kemas kini baru-baru ini, ramai pemain masih percaya bahawa ini mungkin HelloGames membuka jalan untuk model baharu lebih awal Menurut pratetap grafik terkini, di bawah resolusi dinamik permainan itu penskalaan telah ditingkatkan daripada 0.6 kepada 0.8, yang bermaksud permainan mempunyai resolusi purata yang lebih tinggi dan beberapa butiran grafik dinaik taraf daripada tahap "Tinggi" kepada "Ultra", tetapi sejak setiap permainan
