Maison > Article > interface Web > 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
- 零下一度original
- 2017-05-11 14:26:396531parcourir
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('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>[Recommandations associées]<.>
1.Tutoriel vidéo en ligne gratuit h5
2Manuel de la version complète HTML5
3. tutoriel vidéo html5 originalCe 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：
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
Article précédent：Quels sont les avantages du HTML5 ?Article suivant：Quels sont les avantages du HTML5 ?
Articles Liés
Voir plus- Le plug-in de défilement plein écran AlloyTouch crée une page H5 fluide en 30 secondes
- Combat réel HTML5 et analyse des événements tactiles (touchstart, touchmove et touchend)
- Explication détaillée des exemples de dessin d'images dans le canevas HTML5 9
- Expressions régulières et nouveaux éléments HTML5
- Comment combiner NodeJS et HTML5 pour glisser-déposer plusieurs fichiers à télécharger sur le serveur