Haz un simple juego de buscaminas con jquery

Enterprise 2023-07-19 04:31:58 views: null

Este es un pequeño juego de buscaminas que hice por mi propio capricho cuando estaba aprendiendo jquery. Los principales conocimientos utilizados son html5, css3, javascript y jquery. La versión de jquery utilizada es jquery-1.6.4.min, archivos de código y bibliotecas. Puede hacer clic en este enlace para descargar el archivo: Código del juego Buscaminas y recursos hechos con jquery . Las siguientes son mis principales ideas y códigos cuando estaba haciendo este pequeño juego.

Preparación

En primer lugar, debemos aclarar las reglas del juego y usar esto para determinar la función, y debemos saber cómo queremos que se vea la interfaz del juego. Este juego mío de buscaminas fue adaptado de uno de mis experimentos en el aula. Originalmente, solo era un montón de cuadrículas que podían cambiar de color.

Aquí está mi línea de pensamiento
  1. En primer lugar, se deben colocar 81 cuadrículas en la página web. Todas las cuadrículas tienen un estilo uniforme, pero la identificación de cada cuadrícula se compone del número de fila y el número de columna, que es fácil de encontrar (la cuadrícula aquí está hecha con etiquetas p) .
  2. Si se colocan 10 minas en 81 cuadrículas, las coordenadas de las minas se registran naturalmente en la matriz en lugar de reflejarse en la cuadrícula.
  3. Se coloca un elemento de etiqueta de intervalo en cada cuadrícula para registrar el número. El valor predeterminado es 0. La función del número representa el número de minas alrededor. Aquellos que hayan jugado al buscaminas deberían saberlo.
  4. Agregue un número a cada etiqueta de intervalo juzgando según la posición de la mina, de modo que el valor del elemento de etiqueta de intervalo alrededor de cada mina aumente en 1.
  5. Agregue el evento de clic del mouse de la cuadrícula. Cuando se hace clic en la cuadrícula, se realiza el juicio. Si la cuadrícula es una mina, el juego termina. Si no es una mina, la cuadrícula se abre (la situación aquí es más complicada , y se explicará en detalle a continuación, porque involucra minas. La cuadrícula de apertura automática, es decir, cuando la cuadrícula en la que hace clic no tiene ningún número, el juego abrirá automáticamente las cuadrículas circundantes hasta que esté rodeada de números) .

Realización de funciones específicas.

Primero definamos algunos estilos requeridos Aquí nos enfocamos principalmente en el estilo de la cuadrícula (etiqueta p), el estilo después de hacer clic en la cuadrícula y el estilo después de hacer clic en la mina. Aquí coloco el estilo de la cuadrícula en la que normalmente se hace clic en la clase de resaltado, establezco el color de fondo en dorado, y el color de la mina en la que se hace clic es rojo, y lo coloco en la clase de poca luz. La etiqueta p solo necesita establecer un pequeño margen y ancho de borde, y luego configurar el flotador para que flote hacia la izquierda. Porque necesitamos convertir 81 cuadrículas en un arreglo de 9*9, y cada fila de cuadrículas debe colocarse en un div, por lo que también hay un conjunto de estilo div.

<style type="text/css">
	body {
    
     width:760px; }
	div {
    
     margin:5px 10px; clear:both; }
	p {
    
     float:left; margin:3px; width:30px; height:30px; border:2px solid black; text-align:center; display:table;}
	.highlight {
    
     background-color:gold; }
	.lowlight{
    
    background-color:red;}
</style>

Luego introduzca el archivo de la biblioteca jquery. Recuerde poner el archivo jquery y el archivo de la página web en la misma carpeta.

<script src="jquery-1.6.4.min.js" type="text/javascript"></script>

Después de definir el estilo, puede colocar cuadrículas en la página. Aquí uso dos bucles for, el primero se usa para generar div (que representa una fila) y el segundo se usa para generar p (cuadrícula) en div.

//产生一个9*9的格子地图
		for(var i=0;i<9;i++){
    
    
			$("body").append("<div id='"+i+"i'></div>");
			for(var j=0;j<9;j++){
    
    
				$("#"+i+"i").append("<p id='"+i+"i"+j+"j'><span style='display:table-cell;vertical-align:middle;visibility:hidden;'>0</span></p>");
			}
		}

Jaja, crees que la definición de la etiqueta span es muy larga, aquí hay una explicación de por qué se dan tantos atributos de estilo a la etiqueta span, donde display: table-cell significa que el span se mostrará como una celda de tabla , y el elemento padre del intervalo es la etiqueta p En el estilo, se define la tabla display: (ver el primer párrafo del código). Estos dos atributos de visualización y la alineación vertical pueden hacer que la etiqueta del intervalo esté centrada verticalmente. Para decirlo sin rodeos , este atributo es para un uso atractivo. visibilidad: oculto, este atributo es para ocultar la etiqueta de intervalo, ¿por qué debería ocultarse? Porque no queremos ver los números en la cuadrícula antes de hacer clic en la cuadrícula, y los números representan la cantidad de minas alrededor.

De esta manera, hemos definido la cuadrícula y luego se generan las minas 10. Aquí defino dos matrices unidimensionales, que se utilizan para almacenar el número de fila y el número de columna (de 0 a 8) de las minas. La función Math.floor() se usa para generar números enteros y Math.random() se usa para generar números aleatorios. Estas dos funciones se usan juntas para generar números enteros aleatorios.

var aa=[0];	//地雷横坐标
		var bb=[0];	//地雷纵坐标
		var flag=true;	//判断是否产生了重复坐标
		//产生不重复的10个整数并存入aa,bb数组中，作为地雷坐标
		for(var i=0;i<10;i++){
    
    
			aa[i]=Math.floor(Math.random()*9);
			bb[i]=Math.floor(Math.random()*9);
			for(var j=0;j<i;j++){
    
    
				if(aa[i]==aa[j]&&bb[i]==bb[j]){
    
    
					i--;
					flag=false;
					break;
				}
			}
			if(flag==false){
    
    
				flag=true;
			}else{
    
    
				console.log(aa[i],bb[i]);
			}
		}

Aquí, la función console.log() solo se usa para la depuración. Puede abrir la página web durante la prueba y presionar F12 para ver las coordenadas de la mina generadas en la consola.

Después de generar la mina, es necesario asignar valores a los elementos de tramo circundantes de acuerdo con las coordenadas de la mina. Dado que el valor de todos los elementos de tramo es 0 al principio, lo que debemos hacer es agregar +1 al valor de cada elemento de tramo alrededor de la mina. Por supuesto, primero debemos obtener el valor del elemento span, luego +1 y luego asignarlo. El código aquí no es complicado, solo parece largo.

//给每个地雷周围的格子加数字，数字代表周围地雷数
		var z=[""];			//记录地雷周围p的id；
		for(var i=0;i<10;i++){
    
    
			x=aa[i];
			x1=x-1;
			x2=x+1;
			y=bb[i];
			y1=y-1;
			y2=y+1;
			//获取每个p的id；
			z[0]="#"+x1+"i"+y1+"j";
			z[1]="#"+x1+"i"+y+"j";
			z[2]="#"+x1+"i"+y2+"j"
			z[3]="#"+x+"i"+y1+"j";
			z[4]="#"+x+"i"+y2+"j";
			z[5]="#"+x2+"i"+y1+"j";
			z[6]="#"+x2+"i"+y+"j";
			z[7]="#"+x2+"i"+y2+"j";
			$(z[0]).children().html(Number($(z[0]).children().html())+1);
			$(z[1]).children().html(Number($(z[1]).children().html())+1);
			$(z[2]).children().html(Number($(z[2]).children().html())+1);
			$(z[3]).children().html(Number($(z[3]).children().html())+1);
			$(z[4]).children().html(Number($(z[4]).children().html())+1);
			$(z[5]).children().html(Number($(z[5]).children().html())+1);
			$(z[6]).children().html(Number($(z[6]).children().html())+1);
			$(z[7]).children().html(Number($(z[7]).children().html())+1);
		}

El último paso es el más importante, que consiste en agregar un evento de clic a la etiqueta p. Permítanme mostrarles primero el diagrama de flujo del evento de clic de la etiqueta p.
inserte la descripción de la imagen aquí
La lógica en la segunda mitad aquí es un poco complicada, y es posible que no lo exprese claramente. Con todo, es un proceso de llamada recursivo. Cuando la función de detección checkBlank() encuentra que el valor de una cuadrícula determinada alrededor de la cuadrícula en la que se hizo clic es 0, verificará esta cuadrícula. Llame a la función checkBlank() para volver a probar. Por ejemplo, si hace clic en una cuadrícula con un valor de 0 (este es el protagonista), checkBlank() primero verificará la cuadrícula en la esquina superior izquierda de la cuadrícula. Si el valor de la cuadrícula en la esquina superior izquierda también es 0 y no se ha abierto, lo hará. Si no es una mina terrestre, entonces la cuadrícula en la esquina superior izquierda se convierte en un nuevo protagonista, y la función checkBlank() primero verificará el nuevo protagonista. Esto se usa para simular el rastreo de minas, haga clic en una cuadrícula sin minas alrededor y luego el sistema abrirá automáticamente todas las cuadrículas en blanco para usted. A continuación se muestra el código para esa función.

var zz=[""];		//记录地雷所在p的id
		for(var i=0;i<10;i++){
    
    
			zz[i]=aa[i]+"i"+bb[i]+"j";
		}
		//p标签点击事件
		jQuery("p").click(function(){
    
    		
			var k=$(this).parent().index();		//p所在行
			var n=$(this).attr("id");			//p的id
			var	t=$(this).parent().children("#"+n+"").index();	//p所在列
			var gameOver=false;			//游戏结束的标志
			for(var i=0;i<10;i++){
    
    
				if(k==aa[i]&&t==bb[i]){
    
    
					gameOver=true;
				}
			}
			if(gameOver==true){
    
    	
				for(var i=0;i<10;i++){
    
    
					$("#"+aa[i]+"i"+bb[i]+"j").addClass("lowlight");
				}
				setTimeout(alertGame,100);
				function alertGame(){
    
    
					alert("你输了");
					setTimeout(window.location.reload());		//刷新页面
				}
			}else{
    
    
				$(this).children().css("visibility","visible");		//显示格子周围地雷数
				$(this).addClass("highlight");		//设置格子背景色为高亮
				if(Number($(this).children(0).html())==0){
    
    
					var currentBlank=$(this);
					checkBlank(currentBlank);
				}
			}
			
			//检测空白格子是否需要被翻开
			function checkBlank(aBlank){
    
    
				var a=aBlank.index();
				var b=a-1;
				var c=a+1;
				var d=aBlank.parent().prev().children(":eq("+b+")").children();
				judge(d);
				d=aBlank.parent().prev().children(":eq("+a+")").children();
				judge(d);
				d=aBlank.parent().prev().children(":eq("+c+")").children();
				judge(d);
				d=aBlank.parent().next().children(":eq("+b+")").children();
				judge(d);
				d=aBlank.parent().next().children(":eq("+a+")").children();
				judge(d);
				d=aBlank.parent().next().children(":eq("+c+")").children();
				judge(d);
				d=aBlank.prev().children();
				judge(d);
				d=aBlank.next().children();
				judge(d);
				//主要的判断函数，若满足两个条件则可以被翻开，1.格子内span元素的visibility属性为hidden. 2.格子不是地雷
				function judge(e){
    
    
					if(Number(e.html())!=0&&e.css("visibility")=="hidden"&&checkBoom(e.parent())==false){
    
    
						e.css("visibility","visible");
						e.parent().addClass("highlight");
					}else if(Number(e.html())==0&&e.css("visibility")=="hidden"&&checkBoom(e.parent())==false){
    
    
						e.css("visibility","visible");
						e.parent().addClass("highlight");
						checkBlank(e.parent());
					}	
				}
				function checkBoom(f){
    
    
					var g=f.attr("id");
					var gg=false;
					for(var i=0;i<10;i++){
    
    
						if(g==zz[i]){
    
    
							gg=true;
							break;
						}
					}
					return gg;
				}
			}
		});

Después de escribir esto, nuestro juego de buscaminas está completo, pero todavía hay muchas cosas que se pueden mejorar en este pequeño juego. No continué trabajando en él. Puedes probarlo tú mismo. Por ejemplo, el juicio de las condiciones de victoria del juego y la función de marcar las minas. Si necesita recursos, puede hacer clic en el siguiente enlace para descargar.
Código y recursos del juego Buscaminas hecho con jquery
El siguiente es el código completo

<!DOCTYPE html >
<html>
<head>
<meta charset="utf-8"/>
<title>扫雷</title>
<style type="text/css">
	body {
    
     width:760px; }
	div {
    
     margin:5px 10px; clear:both; }
	p {
    
     float:left; margin:3px; width:30px; height:30px; border:2px solid black; text-align:center; display:table;}
	.highlight {
    
     background-color:gold; }
	.lowlight{
    
    background-color:red;}
</style>
<script src="../jquery-1.6.4.min.js" type="text/javascript"></script>
<script>
	jQuery(document).ready(function(){
    
    
		//产生一个9*9的格子地图
		for(var i=0;i<9;i++){
    
    
			$("body").append("<div id='"+i+"i'></div>");
			for(var j=0;j<9;j++){
    
    
				$("#"+i+"i").append("<p id='"+i+"i"+j+"j'><span style='display:table-cell;vertical-align:middle;visibility:hidden;'>0</span></p>");
			}
		}
		var aa=[0];	//地雷横坐标
		var bb=[0];	//地雷纵坐标
		var flag=true;	//判断是否产生了重复坐标
		//产生不重复的10个整数并存入aa,bb数组中，作为地雷坐标
		for(var i=0;i<10;i++){
    
    
			aa[i]=Math.floor(Math.random()*9);
			bb[i]=Math.floor(Math.random()*9);
			for(var j=0;j<i;j++){
    
    
				if(aa[i]==aa[j]&&bb[i]==bb[j]){
    
    
					i--;
					flag=false;
					break;
				}
			}
			if(flag==false){
    
    
				flag=true;
			}else{
    
    
				console.log(aa[i],bb[i]);
			}
		}
		//给每个地雷周围的格子加数字，数字代表周围地雷数
		var z=[""];			//记录地雷周围p的id；
		for(var i=0;i<10;i++){
    
    
			x=aa[i];
			x1=x-1;
			x2=x+1;
			y=bb[i];
			y1=y-1;
			y2=y+1;
			//获取每个p的id；
			z[0]="#"+x1+"i"+y1+"j";
			z[1]="#"+x1+"i"+y+"j";
			z[2]="#"+x1+"i"+y2+"j"
			z[3]="#"+x+"i"+y1+"j";
			z[4]="#"+x+"i"+y2+"j";
			z[5]="#"+x2+"i"+y1+"j";
			z[6]="#"+x2+"i"+y+"j";
			z[7]="#"+x2+"i"+y2+"j";
			$(z[0]).children().html(Number($(z[0]).children().html())+1);
			$(z[1]).children().html(Number($(z[1]).children().html())+1);
			$(z[2]).children().html(Number($(z[2]).children().html())+1);
			$(z[3]).children().html(Number($(z[3]).children().html())+1);
			$(z[4]).children().html(Number($(z[4]).children().html())+1);
			$(z[5]).children().html(Number($(z[5]).children().html())+1);
			$(z[6]).children().html(Number($(z[6]).children().html())+1);
			$(z[7]).children().html(Number($(z[7]).children().html())+1);
		}
		var zz=[""];		//记录地雷所在p的id
		for(var i=0;i<10;i++){
    
    
			zz[i]=aa[i]+"i"+bb[i]+"j";
		}
		//p标签点击事件
		jQuery("p").click(function(){
    
    		
			var k=$(this).parent().index();		//p所在行
			var n=$(this).attr("id");			//p的id
			var	t=$(this).parent().children("#"+n+"").index();	//p所在列
			var gameOver=false;			//游戏结束的标志
			for(var i=0;i<10;i++){
    
    
				if(k==aa[i]&&t==bb[i]){
    
    
					gameOver=true;
				}
			}
			if(gameOver==true){
    
    	
				for(var i=0;i<10;i++){
    
    
					$("#"+aa[i]+"i"+bb[i]+"j").addClass("lowlight");
				}
				setTimeout(alertGame,100);
				function alertGame(){
    
    
					alert("你输了");
					setTimeout(window.location.reload());		//刷新页面
				}
			}else{
    
    
				$(this).children().css("visibility","visible");		//显示格子周围地雷数
				$(this).addClass("highlight");		//设置格子背景色为高亮
				if(Number($(this).children(0).html())==0){
    
    
					var currentBlank=$(this);
					checkBlank(currentBlank);
				}
			}
			
			//检测空白格子是否需要被翻开
			function checkBlank(aBlank){
    
    
				var a=aBlank.index();
				var b=a-1;
				var c=a+1;
				var d=aBlank.parent().prev().children(":eq("+b+")").children();
				judge(d);
				d=aBlank.parent().prev().children(":eq("+a+")").children();
				judge(d);
				d=aBlank.parent().prev().children(":eq("+c+")").children();
				judge(d);
				d=aBlank.parent().next().children(":eq("+b+")").children();
				judge(d);
				d=aBlank.parent().next().children(":eq("+a+")").children();
				judge(d);
				d=aBlank.parent().next().children(":eq("+c+")").children();
				judge(d);
				d=aBlank.prev().children();
				judge(d);
				d=aBlank.next().children();
				judge(d);
				//主要的判断函数，若满足两个条件则可以被翻开，1.格子内span元素的visibility属性为hidden. 2.格子不是地雷
				function judge(e){
    
    
					if(Number(e.html())!=0&&e.css("visibility")=="hidden"&&checkBoom(e.parent())==false){
    
    
						e.css("visibility","visible");
						e.parent().addClass("highlight");
					}else if(Number(e.html())==0&&e.css("visibility")=="hidden"&&checkBoom(e.parent())==false){
    
    
						e.css("visibility","visible");
						e.parent().addClass("highlight");
						checkBlank(e.parent());
					}	
				}
				function checkBoom(f){
    
    
					var g=f.attr("id");
					var gg=false;
					for(var i=0;i<10;i++){
    
    
						if(g==zz[i]){
    
    
							gg=true;
							break;
						}
					}
					return gg;
				}
			}
		});	
	});
</script>
</head>
<body>
	
</body>
</html>

Supongo que te gusta

Origin blog.csdn.net/zhulong16/article/details/102321210
Recomendado
Clasificación
Diario
Más
2024-05-12(22)
2024-05-11(31)
2024-05-10(32)
2024-05-09(31)
2024-05-08(18)
2024-05-07(35)
2024-05-06(4)
2024-05-05(0)
2024-05-04(17)
2024-05-03(8)

Code World

© 2018 codetd.com