Creando un juego de tres en raya. Fundamentos teóricos del desarrollo.

¡Saludos, queridos amigos! En esta lección, mostraré cómo puedes crear un juego de navegador: ¡tic-tac-toe, en javascript! Todos sabéis qué es este juego y cómo se juega, pero déjame recordártelo de nuevo:

Tic-tac-toe es un juego de lógica entre dos jugadores en un campo cuadrado de 3 por 3 celdas (posiblemente más grande). Uno juega con “cruces” y el segundo con “dedos de los pies”.

PD Como en todas las lecciones similares de JavaScript, al final del artículo puede descargar el archivo fuente y también ver el resultado del trabajo en un ejemplo de demostración.

Descripción del juego que se está creando.

Veamos las características del juego:

  • el juego comienza inmediatamente después de que se carga la página;
  • el derecho a ir primero se elige al azar (o empiezas a caminar o al ordenador);
  • el signo por el que apostarás se elige al azar (una cruz o un cero);
  • si el jugador gana, los símbolos ganadores (una franja de cruces o ceros) se resaltan en verde;
  • si el jugador pierde contra la computadora, la barra se resalta en rojo;
  • Sobre el campo hay una línea de información donde se muestra el resultado (victoria o derrota).

Lógicas

No se me ocurrieron algoritmos complejos (universales) para un campo de juego de 3 por 3 cuadrados, sino que fui por el otro lado: ¡fuerza bruta! (más sobre esto un poco más adelante). He identificado tres etapas secuenciales principales en las que descansa toda la lógica:

Etapa 1: ¿comprobar si el jugador ha ganado?

En esta etapa, verificamos si hay 3 celdas (en la misma línea) llenas con los mismos símbolos de jugador (cruces o ceros). Aquellos. No importa cuál sea el movimiento (incluso el primero), siempre comprobamos primero si el jugador ha ganado. Así es la victoria:

Etapa 2: verificación: ¿puede la computadora ganar con el siguiente movimiento?

En esta etapa, estamos buscando una línea donde habrá 2 celdas llenas por la computadora y una celda vacía; es decir, estamos tratando de ganar debido a la falta de atención del jugador. Así es como se ve la derrota (es decir, una victoria informática):

Etapa 3: ¡no te dejamos ganar!

Aquí buscamos la misma línea que en la segunda etapa, solo se deben llenar 2 celdas con los carteles del juego del jugador, es decir, en esta etapa no permitimos que la computadora pierda colocando un cartel en una celda vacía. Cada una de las etapas representa una función independiente; puede ver esto en el código js a continuación.

Implementación

El diseño del campo de juego es muy simple: el bloque principal contiene una línea de información (clase - resultado) y 9 bloques, que son celdas (clase - bloque) Diseño HTML de las celdas:

¡Tu turno!

La celda de clase auxiliar es necesaria para identificar con precisión la celda deseada en el campo de juego. Estilos CSS para el campo de juego:

Krestiki_noliki( ancho: 306px; margen: 0 auto; ) .krestiki_noliki .block( ancho: 100px; alto: 100px; borde: 1px sólido #ccc; cursor: puntero; flotante: izquierda; alineación de texto: centro; tamaño de fuente: 100px; altura de línea: 94px; )

Ahora veamos el código JS completo, después de lo cual hablaré sobre los puntos principales:

$(documento).ready(función())( var znak_user = "O"; var znak_comp = "X"; var rand_num = Math.round((Math.random() * (9 - 1) + 1)); if (rand_num > 3)( var znak_comp = "O"; var znak_user = "X"; $(".cell"+rand_num).text(znak_comp); ) var exit_flag = false; var win_user_array = ["123", " 456","789","147","258","369","159","357"]; //Determina la función de victoria del jugador check_3_user(znak)( for (var i = 0; i< 8; i++) { var first = "cell" + win_user_array[i].substr(0,1); var second = "cell" + win_user_array[i].substr(1,1); var third = "cell" + win_user_array[i].substr(2,1); if($("."+first).text() == znak && $("."+second).text() == znak && $("."+third).text() == znak){ $("."+first+",."+second+",."+third).css("background-color", "#83e2c3"); $(".result").text("Вы выиграли!"); $(".krestiki_noliki .block").unbind("click"); exit_flag = true; } } } //Определяем возможность победы компьютера function check_2_comp(znak){ for (var i = 0; i < 8; i++) { var first = "cell" + win_user_array[i].substr(0,1); var second = "cell" + win_user_array[i].substr(1,1); var third = "cell" + win_user_array[i].substr(2,1); if($("."+first).text() == znak && $("."+second).text() == znak && $("."+third).text() == "" && exit_flag == false){ $("."+third).text(znak); $("."+first+",."+second+",."+third).css("background-color", "#EF7C7C"); $(".result").text("Вы проиграли!"); $(".krestiki_noliki .block").unbind("click"); exit_flag = true; } if($("."+first).text() == znak && $("."+second).text() == "" && $("."+third).text() == znak && exit_flag == false){ $("."+second).text(znak); $("."+first+",."+second+",."+third).css("background-color", "#EF7C7C"); $(".result").text("Вы проиграли!"); $(".krestiki_noliki .block").unbind("click"); exit_flag = true; } if($("."+first).text() == "" && $("."+second).text() == znak && $("."+third).text() == znak && exit_flag == false){ $("."+first).text(znak); $("."+first+",."+second+",."+third).css("background-color", "#EF7C7C"); $(".result").text("Вы проиграли!"); $(".krestiki_noliki .block").unbind("click"); exit_flag = true; } } } //Определяем ход компьютера function check_2_user(znak){ for (var i = 0; i < 8; i++) { var first = "cell" + win_user_array[i].substr(0,1); var second = "cell" + win_user_array[i].substr(1,1); var third = "cell" + win_user_array[i].substr(2,1); if(exit_flag == false){ if($("."+first).text() == znak && $("."+second).text() == znak && $("."+third).text() == ""){ $("."+third).text(znak_comp); exit_flag = true; } } if(exit_flag == false){ if($("."+first).text() == znak && $("."+second).text() == "" && $("."+third).text() == znak){ $("."+second).text(znak_comp); exit_flag = true; } } if($("."+first).text() == "" && $("."+second).text() == znak && $("."+third).text() == znak){ $("."+first).text(znak_comp); exit_flag = true; } if(exit_flag) break; } } $(".krestiki_noliki .block").click(function(){ //Если клетка пустая if($(this).text() == ""){ $(this).text(znak_user); check_3_user(znak_user); check_2_comp(znak_comp); check_2_user(znak_user); if(exit_flag == false){ for (var i = 1; i < 10; i++) { if($(".cell"+i).text() == ""){ $(".cell"+i).text(znak_comp); break; } } }else exit_flag = false; } }); });

Primero, declaramos las variables: znak_user: en esta variable almacenamos el signo con el que jugará el usuario (de forma predeterminada, se almacena un cero allí; esta es la casilla en inglés "O"). znak_comp: en esta variable almacenamos el signo con el que jugará la computadora (de forma predeterminada, se almacena una cruz allí; este es el cuadro en inglés "X").

La lógica es la siguiente: si el número aleatorio es mayor que 3, entonces la computadora juega con ceros y ella (la computadora) hace el primer movimiento.

Puede cambiar esta lógica según le convenga, por ejemplo, puede crear varios números aleatorios para tener más opciones sobre quién será el primero y qué signos. exit_flag: esta bandera (variable) es responsable de salir de la función, es decir, por ejemplo, cuando la computadora ya ha realizado su movimiento y necesitas salir de la función y pasar el movimiento al jugador. win_user_array: esta matriz almacena todas las opciones ganadoras para llenar las celdas. Para que quede claro, echemos un vistazo a esta imagen:

Cada elemento de la matriz es una cadena de tres números, que es una combinación ganadora, es decir, si, por ejemplo, completa las celdas debajo de los números 1, 2 y 3, se producirá la victoria (o la derrota). Como puede ver, hay 8 opciones ganadoras en total, nuestra tarea es analizar todas estas opciones. Luego vienen 3 funciones:

  1. check_3_user();
  2. check_2_comp();
  3. check_2_user();

El propósito de estas funciones se describe (en tres pasos) en la sección Lógica (arriba). Estas funciones se llaman haciendo clic en cualquiera de las celdas del campo. Se pasa un parámetro (znak) a cada una de las funciones: este es el signo del jugador o de la computadora (una cruz o un cero), por ejemplo, a la función que determina la victoria del jugador (check_3_user), pasamos el signo del jugador en orden para encontrar 3 signos idénticos en la misma línea.

Después de tres funciones (si la computadora aún no ha realizado ningún movimiento), la computadora llena una de las celdas libres. Aquí puedes complicar el juego, por ejemplo, haciendo que si la celda central está libre (celda número 5), primero apuestes en ella; si está ocupada, entonces apuesta en una de las esquinas libres (estas son celdas No. 1, 3, 7 y 9) y así sucesivamente; en general, aquí queda a su discreción.

Eso, en principio, es todo lo que se necesita para crear un juego de este tipo.

Ahora puedes ver el juego usando un ejemplo de demostración y descargar el archivo fuente (1 archivo en total).

08/06/2018 - gracias por su atención al autor de la carta: Patvakan Baghdasaryan, se solucionó un error cuando la computadora tenía varios opciones posibles Las victorias y todos sus movimientos ganadores fueron pintados (de 4 a 6 celdas, en lugar de 3).

Eso es todo por mi parte, espero que esta lección te haya sido útil, te deseo mucha suerte, ¡adiós!

Cómo escribir un bot que no pueda ser vencido al tres en raya o Introducción a la regla minimax

Es muy posible que después de cientos de partidas de tres en raya te hayas preguntado: ¿cuál es el algoritmo óptimo? Pero si estás aquí, probablemente también hayas intentado escribir una implementación de este juego. Iremos más allá y escribiremos un bot que será imposible de superar jugando al tres en raya. Anticipándonos a tu pregunta “¿por qué?”, responderemos: gracias al algoritmo.

Como un jugador de ajedrez profesional, este algoritmo calcula las acciones del oponente con varios movimientos de anticipación, hasta que llega al final de la partida, ya sea una victoria, una derrota o un empate. Una vez en este estado final, la IA se otorgará un número positivo de puntos (en nuestro caso +10) por una victoria, negativo (-10) por una derrota y neutral (0) por un empate.

Al mismo tiempo, el algoritmo realiza cálculos similares para los movimientos del jugador. Elegirá el movimiento con mayor puntuación si la IA se mueve, y el movimiento con menor puntuación si el jugador se mueve. Usando esta estrategia, minimax evita la derrota.

Intenta jugar este juego.

El algoritmo minimax se describe más fácilmente como una función recursiva que:

  1. devuelve un valor si se encuentra el estado final (+10, 0, -10),
  2. pasa por todas las celdas vacías del campo,
  3. llama a la función minimax para cada uno de ellos (recursión),
  4. evalúa los valores obtenidos
  5. y devuelve el mejor.

Si no está familiarizado con la recursividad, debería ver esta conferencia del curso Harvard CS50:

Para comprender cómo funciona minimax, escribamos su implementación y modelemos su comportamiento. Nos ocuparemos de esto en las siguientes dos secciones.

Implementación minimax

Veremos una situación en la que el juego está llegando a su fin (ver imagen a continuación). Dado que minimax pasa por todos los estados posibles del juego (y hay cientos de miles de ellos), tiene sentido considerar el final del juego; de esta manera tendremos que rastrear un número menor de llamadas a funciones recursivas (9 en total).

Dejemos que la IA juegue con cruces, la persona, con ceros.

Para facilitar el trabajo con el campo, lo declararemos como una matriz de 9 elementos con valores iguales al contenido de las celdas. Rellenémoslo con cruces y dedos de los pies, como en la imagen de arriba, y llamémoslo origBoard.

Var origBoard = ["O",1,"X","X",4,"X",6,"O","O"];

A continuación, declararemos las variables aiPlayer y huPlayer y les asignaremos los valores "X" y "O" respectivamente.

Además, necesitaremos una función que busque combinaciones ganadoras y devuelva un valor verdadero si la búsqueda tiene éxito, y una función que almacene los índices de las celdas disponibles.

/* estado inicial tableros O | | X --------- X | | X --------- | O | O */ var origBoard = [“O”,1 ”,X”,”X”,4 ”,X”, 6 ”,O”,”O”]; // persona var huPlayer = “O”; // AI var aiPlayer = “X”; // devuelve una lista de índices de celdas vacías en la función del tablero vacíoIndices(tablero)( return board.filter(s => s != "O" && s != "X"); ) // combinaciones ganadoras teniendo en cuenta función de índices ganador(tablero, jugador)( if((tablero == jugador && tablero == jugador && tablero == jugador) || (tablero == jugador && tablero == jugador && tablero == jugador) || (tablero = = jugador && tablero == jugador && tablero == jugador) || (tablero == jugador && tablero == jugador && tablero == jugador) || (tablero == jugador && tablero == jugador && tablero == jugador) || | (tablero == jugador && tablero == jugador && tablero == jugador) || (tablero == jugador && tablero == jugador && tablero == jugador) || (tablero == jugador && tablero == jugador && tablero = = jugador)) (devuelve verdadero;) else (devuelve falso;))

Entonces, definamos una función minimax con dos argumentos: nuevoTablero y reproductor. Luego buscaremos los índices de celdas libres en el campo y los pasaremos a la variable disponibilidadSpots.

// función minimax principal function minimax(newBoard, player)( // celdas disponibles var disponibilidadSpots = vacíoIndices(newBoard);

Además, debemos realizar un seguimiento de los estados finales y devolver los valores apropiados. Si gana el "cero", debe devolver -10, si gana la "cruz", +10. Si el tamaño de la matriz de AvaSpots es cero, entonces no hay celdas libres, el juego terminará en empate y se debe devolver cero.

// comprobando el estado del terminal (ganar/perder/empatar) // y devolver un valor correspondiente if (winning(newBoard, huPlayer))( return (score:-10); ) else if (wining(newBoard, aiPlayer)) ( devolver (puntuación: 10); ) else if (availSpots.length === 0)( devolver (puntuación: 0); )

Después de esto, debes acumular puntos de cada una de las celdas vacías. Para hacer esto, crearemos una matriz de movimientos y recorreremos todas las celdas vacías en un bucle, colocando los índices y puntos de cada movimiento en el objeto de movimiento.

Luego configuramos el índice de la celda vacía, que se almacenó como un número en origBoard, igual a la propiedad de índice del objeto de movimiento. Luego iremos como jugador actual a una celda vacía del nuevo campo newBoard y llamaremos a la función minimax del otro jugador y al campo resultante newBoard. Después de esto, debe colocar la propiedad de puntuación del objeto devuelto por la función minimax en la propiedad de puntuación del objeto de movimiento.

Si minimax no encuentra un estado terminal, continúa avanzando recursivamente hacia el juego hasta alcanzar un estado terminal. Después de eso, transfiere los puntos de este “nivel” de recursividad a un nivel superior.

Finalmente, la función restablece los cambios en newBoard y coloca el objeto de movimiento en la matriz de movimientos.

// matriz para almacenar todos los objetos var mueve = ; // recorre las celdas disponibles para (var i = 0; i< availSpots.length; i++){ //create an object for each and store the index of that spot var move = {}; move.index = newBoard]; // совершить ход за текущего игрока newBoard] = player; //получить очки, заработанные после вызова минимакса от противника текущего игрока if (player == aiPlayer){ var result = minimax(newBoard, huPlayer); move.score = result.score; } else{ var result = minimax(newBoard, aiPlayer); move.score = result.score; } // очистить клетку newBoard] = move.index; // положить объект в массив moves.push(move); }

Luego, Minimax necesita seleccionar el mejor movimiento de la matriz de movimientos. Necesita el movimiento con la puntuación más alta si la IA se está moviendo, y con la puntuación más baja si es un movimiento humano. Por lo tanto, si el valor de player es aiPlayer, el algoritmo inicializa la variable bestScore en un número muy pequeño y recorre la matriz de movimientos: si la puntuación de un movimiento vale más que bestScore, el algoritmo recuerda ese movimiento. En el caso de jugadas con puntos iguales, el algoritmo recuerda la primera.

En el caso de que player sea igual a huPlayer, todo es similar: solo que ahora bestScore se inicializa con un número grande y minimax busca el movimiento con la menor cantidad de puntos.

Como resultado, minimax devuelve el objeto almacenado en bestMove.

// si se trata de un movimiento de IA, recorre los movimientos y selecciona el movimiento con más puntos var bestMove; if(jugador === aiPlayer)( var mejor puntuación = -10000; for(var i = 0; i< moves.length; i++){ if(moves[i].score >bestScore)( bestScore = movimientos[i].score; bestMove = i; ) ) )else( // de lo contrario recorre los movimientos y selecciona el movimiento con la menor cantidad de puntos var bestScore = 10000; for(var i = 0; i< moves.length; i++){ if(moves[i].score < bestScore){ bestScore = moves[i].score; bestMove = i; } } } // вернуть выбранный ход (объект) из массива ходов return moves; }

En la siguiente sección, simularemos nuestro programa para comprender cómo funciona.

Minimax en acción

Usando el siguiente diagrama, analizaremos el modelo paso a paso del algoritmo.

Nota: En el diagrama, los números grandes indican el número de serie de la llamada a la función y los niveles indican cuántos movimientos ha avanzado el algoritmo.

  1. El origBoard y el aiPlayer se alimentan al algoritmo. Hace una lista de las tres celdas vacías encontradas, verifica la finitud del estado y recorre todas las celdas vacías. Luego, el algoritmo cambia newBoard y coloca aiPlayer en el primer cuadrado vacío. Después de eso, se llama a sí mismo desde newBoard y huPlayer y espera a que la segunda llamada devuelva un valor.
  2. Mientras la primera llamada a la función aún se está ejecutando, la segunda se ejecuta, creando una lista de dos celdas vacías, verificando el estado finito y recorriendo todas las celdas vacías. Luego, la segunda llamada modifica newBoard colocando huPlayer en el primer cuadrado vacío. Después de eso, se llama a sí mismo desde newBoard y aiPlayer y espera a que la tercera llamada devuelva un valor.

  3. Debido a que la segunda llamada encontró dos celdas vacías, minimax modifica newBoard colocando huPlayer en la segunda celda vacía. Luego se llama a sí mismo desde newBoard y aiPlayer.

  4. El algoritmo compila una lista de celdas vacías y registra la victoria del jugador después de verificar la finitud del estado. Entonces devuelve un objeto con un campo de puntuación de (-10).

    En la segunda llamada a función, el algoritmo recibe los valores devueltos desde el nivel inferior por la tercera y cuarta llamada a función. Dado que el movimiento de huPlayer produjo estos dos resultados, el algoritmo elige el más pequeño. Como son iguales, el algoritmo elige el primero y lo pasa a la primera llamada de función.

    En este punto, la primera llamada a la función recibió una estimación del movimiento de aiPlayer a la primera celda vacía. Luego modifica newBoard colocando aiPlayer en el segundo cuadrado vacío. Después de eso, se llama a sí mismo desde newBoard y huPlayer.

  5. En la quinta llamada a la función, el algoritmo compila una lista de celdas vacías y registra la victoria de la IA después de verificar la finitud del estado. Entonces devuelve un objeto con un campo de puntuación de +10.

    Después de esto, la primera llamada modifica newBoard colocando aiPlayer en la tercera celda vacía. Luego se llama a sí mismo desde newBoard y huPlayer.

  6. La sexta llamada crea una lista de dos celdas vacías, verifica la finitud del estado y recorre todas las celdas vacías. Luego modifica newBoard colocando huPlayer en el primer cuadrado vacío. Luego se llama a sí mismo desde newBoard y aiPlayer y espera a que la séptima llamada devuelva un valor.
  7. La nueva llamada construye una lista de una celda vacía, verifica el estado finito y modifica newBoard para colocar aiPlayer en la celda vacía. Después de eso, se llama a sí mismo desde newBoard y huPlayer y espera a que esta llamada devuelva un valor.
  8. El octavo desafío es lista vacía celdas vacías y registra la victoria de aiPlayer después de verificar el estado de la extremidad. Por lo tanto, devuelve un objeto con un campo de conteo igual a (+10) al nivel superior, la séptima llamada.

    La séptima convocatoria recibió sólo un valor positivo de los niveles inferiores. Dado que este valor se obtuvo durante el turno de aiPlayer, el algoritmo devuelve el valor más grande obtenido. Por lo que devuelve un valor positivo (+10) al subir de nivel, la sexta llamada.

    Debido a que la sexta llamada encontró dos celdas vacías, minimax modifica newBoard colocando huPlayer en la segunda celda vacía. Luego se llama a sí mismo desde newBoard y aiPlayer.

  9. Después de esto, el algoritmo compila una lista de celdas vacías y registra la victoria de aiPlayer después de verificar la finitud del estado. Por lo tanto, devuelve un objeto con un campo de puntuación igual a (+10) al nivel superior.

    En este punto, el sexto desafío debe elegir entre la puntuación (+10) que arrojó el séptimo desafío y la puntuación (-10) que arrojó el noveno desafío. Dado que el movimiento de huPlayer produjo estos dos resultados, el algoritmo selecciona el más pequeño y lo devuelve al siguiente nivel como un objeto con campos de puntuación e índice.

    Finalmente, se evalúan las tres ramas de la primera convocatoria (-10, +10, -10). Dado que el movimiento de aiPlayer produjo estos tres resultados, el algoritmo selecciona el objeto que contiene la puntuación más alta (+10) y su índice (4).

En el escenario anterior, minimax decide que elección óptima Habrá un traslado a la plaza central del campo.

¡Fin!

A estas alturas ya deberías haber entendido cómo funciona el algoritmo minimax. Intente escribir una implementación usted mismo o mire un ejemplo en GitHub o CodePen y optimícelo.

Si está interesado en el tema de la IA en los juegos, le recomendamos leer nuestros materiales sobre este tema.

PASO 1. CONFIGURACIÓN DE LOS PARÁMETROS DEL FORMULARIO1. Para personalizar un formulario, establezca su tamaño
510 puntos horizontalmente y 480 puntos horizontalmente
vertical. Máximo y mínimo
indicar el tamaño igual a los mismos valores.
2. Nombra la forma "Tic Tac Toe".
3. Para el fondo del formulario, utilice un archivo de la carpeta
Imágenes bajo el nombre background.png y colóquelas
en el centro del formulario.
4. Para un ícono en la línea de título
usar usar archivo de la carpeta
Imágenes bajo el nombre menu4.ico.
5. Se debe establecer el color de fondo del formulario.
Crema De Menta.

PASO 2. AÑADIR UN BOTÓN Y ETIQUETA AL FORMULARIO

1. Para elementos colocados, cambiar
tamaño de fuente a 12 y conjunto de fondo
transparente.

1. Cree una barra de menú con elementos en
como se muestra en la imagen.

PASO 3. AÑADIR UNA BARRA DE MENÚ AL FORMULARIO

1. En el elemento del menú Archivo, cree un comando.
Salida.
2. Para
equipos
Salida
prescribamos
el código del programa es el mismo que en
solicitud anterior.

PASO 3. AÑADIR UNA BARRA DE MENÚ AL FORMULARIO

1. En el elemento del menú Juego, crea un equipo.
Un nuevo juego.
2. Para el comando Nuevo juego escribiremos
código de programa en el futuro a través de
unos cuantos pasos.

PASO 3. AÑADIR UNA BARRA DE MENÚ AL FORMULARIO

1. En el elemento del menú Ayuda, cree un comando.
Sobre el programa.
2. Para el comando Acerca del programa, cree uno nuevo.
formar y escribir el código del programa
similar al anterior
solicitud.

1. Arrastrando un objeto PictureBox al formulario
cambie su tamaño a 100x100.
2. Establezca un fondo transparente.
3. Coloque el PictureBox como se muestra en
imagen encima de la primera celda del campo de juego.

PASO 4. AGREGAR OBJETOS PICTUREBOX AL FORMULARIO

1
2
3
4
5
6
7
8
9
1. Encima de las celdas restantes colocamos
Objetos PictureBox, copias del primero.
objeto, según la numeración indicada en
Imágenes.

1. Antes de escribir código
necesario en la carpeta
\Estudio visual
2010\Proyectos\Tic Tac Toe\X's
zeros\bin\Debug\ se deben volver a lanzar
archivos x.png, 0.png, none.png de la carpeta Imágenes.
2. Haga doble clic con el botón izquierdo del ratón en el primer
Cuadro de imagen.

PASO 5. AÑADIR CÓDIGO PARA OBJETOS PICTUREBOX

1. Cree una matriz bidimensional accesible a todos los elementos en
creado en forma de elementos de 3x3 que constan de números enteros. Inmediatamente
lo llenamos de ceros al declararlo. Para celdas vacías nosotros
Usaremos 0, para "cruces" - 1 y para "ceros" - -1.

PASO 5. AÑADIR CÓDIGO PARA OBJETOS PICTUREBOX

En el procedimiento al hacer clic en el primero
PictureBox, agrega un operador
elección
cual
voluntad
comprobar estado
celdas de matriz. si el valor
las celdas de la matriz serán iguales a 0, lo que
eso significa que no hay ni “cero” ni
“cruz”, entonces en esta celda
la matriz se escribe 1 y en
ImagenCuadro1
desplegado
imagen de una “cruz”, y si
el valor de la celda de la matriz será
es igual a 1 entonces contiene
“cruz” y 0 está escrito en ella, y
Se muestra una celda vacía.

PASO 5. AÑADIR CÓDIGO PARA OBJETOS PICTUREBOX

1
2
3
4
5
6
7
8
9



Para las celdas restantes del campo, agregue el código
igual que en el primero solo cambiando
Número de objeto PictureBox y dirección de celda
formación.
EJEMPLO para la segunda celda:

En el procedimiento al hacer clic en un botón.
agregar
operador
ciclo
quien controla
todas las celdas desde la primera hasta
Presencia de celdas vacías. Y si
la celda está vacía,
luego dentro de ella
"cero" está escrito, es decir, en
la celda de la matriz se escribe -1.
Para mayor comodidad en trabajos futuros.
variables
I,
j
cual
utilizado para iterar bucles
Lo anunciaremos para todo el formulario.

PASO 6. AÑADIR CÓDIGO PARA EL BOTÓN CAMINAR

Para mostrar ceros en
juego de azar
campo
necesario
agregar código de programa al cuerpo
ciclo de comprobación de celdas en busca de vacíos.
Usando una declaración anidada
derivación
voluntad
tener lugar
análisis de la dirección de la celda de la matriz para
salida cero en la dirección correcta
Cuadro de imagen.
También agregamos una declaración de ruptura.
por un final prematuro
bucle al encontrar vacío
células.

PASO 6. AÑADIR CÓDIGO PARA EL BOTÓN CAMINAR

Para indicar el estado del juego
Se utiliza un elemento de interfaz.
Etiqueta1. Como el jugador siempre se mueve
primero
Eso
en
descargas
aplicaciones
necesario
V
elemento
Etiqueta1
necesario
reflejar
frases “tu
mover."
Para
este
vamos a crear
variable
respuesta
cual
Asignemos esta frase. A
al cargar el formulario una variable
debe ser asignado al elemento
Label1, para crear lo necesario.
procedimientos
necesario
doble clic primero
según la forma

PASO 7. AÑADIR CÓDIGO DE PROGRAMA PARA EL NUEVO ELEMENTO DEL MENÚ DEL JUEGO

Cuando se presiona al comando nuevo
el juego se reiniciará
todas las celdas de la matriz, reemplazando todas
"cruces" y "dedos de los pies" en
celdas vacías. También la conclusión
Señales de "tu movimiento"

PASO 8. SALIDA DEL RESULTADO DEL JUEGO

Para comprobar los resultados de los movimientos.
necesario
analizar
contenido de filas, columnas y
diagonales. Si los tres elementos
son iguales a 1, entonces esta es una victoria para el jugador, y
si tres -1 entonces esto es una derrota
jugador.
Se requiere control de victoria
conducta
antes
progreso
computadora,
A
controlar
derrota después.
El último comando del procedimiento.
Los resultados se mostrarán en la pantalla.
progreso.

PASO 8. SALIDA DEL RESULTADO DEL JUEGO

Código de programa para comprobar la victoria del usuario:
if (znacheniyeYacheyki == 1 && znacheniyeYacheyki == 1 && znacheniyeYacheyki == 1) otvet = "Tú ganas";
if (znacheniyeYacheyki == 1 && znacheniyeYacheyki == 1 && znacheniyeYacheyki == 1) otvet = "Tú ganas";
if (znacheniyeYacheyki == 1 && znacheniyeYacheyki == 1 && znacheniyeYacheyki == 1) otvet = "Tú ganas";
if (znacheniyeYacheyki == 1 && znacheniyeYacheyki == 1 && znacheniyeYacheyki == 1) otvet = "Tú ganas";
if (znacheniyeYacheyki == 1 && znacheniyeYacheyki == 1 && znacheniyeYacheyki == 1) otvet = "Tú ganas";
if (znacheniyeYacheyki == 1 && znacheniyeYacheyki == 1 && znacheniyeYacheyki == 1) otvet = "Tú ganas";
if (znacheniyeYacheyki == 1 && znacheniyeYacheyki == 1 && znacheniyeYacheyki == 1) otvet = "Tú ganas";
if (znacheniyeYacheyki == 1 && znacheniyeYacheyki == 1 && znacheniyeYacheyki == 1) otvet = "Tú ganas";
Código de programa para comprobar la victoria del usuario:
if (znacheniyeYacheyki == -1 & znacheniyeYacheyki == -1 & znacheniyeYacheyki == -1) otvet = "Perdiste";
if (znacheniyeYacheyki == -1 & znacheniyeYacheyki == -1 & znacheniyeYacheyki == -1) otvet = "Perdiste";
if (znacheniyeYacheyki == -1 & znacheniyeYacheyki == -1 & znacheniyeYacheyki == -1) otvet = "Perdiste";
if (znacheniyeYacheyki == -1 & znacheniyeYacheyki == -1 & znacheniyeYacheyki == -1) otvet = "Perdiste";
if (znacheniyeYacheyki == -1 & znacheniyeYacheyki == -1 & znacheniyeYacheyki == -1) otvet = "Perdiste";
if (znacheniyeYacheyki == -1 & znacheniyeYacheyki == -1 & znacheniyeYacheyki == -1) otvet = "Perdiste";
etiqueta1.Texto = respuesta;

PASO 9 MEJORANDO LA JUGABILIDAD

Para mejorar la jugabilidad
en lugar de salida en serie
a los primeros vacios
celdas de “ceros”, implementamos
salida a través de generador aleatorio
números.
Para hacer esto necesitas agregar
una variable lógica
uslovie y cambie el tipo de bucle de Para
en Mientras, ya que no sabemos
número exacto de repeticiones
generador números al azar Adiós
no caerá en una celda vacía.

MINISTERIO DE EDUCACIÓN Y CIENCIA DE RUSIA

institución educativa presupuestaria del estado federal de educación profesional superior

"Universidad Estatal de Vólogda"

Departamento de Automática e Ingeniería Informática

Nota explicativa del proyecto de curso en la disciplina.

Conceptos básicos de programación y algorítmica.

"Tic Tac Toe"

Terminado estudiante del grupo EM-21

Butorova L.Yu.

Aceptado Rzheutskaya S. Yu.

INTRODUCCIÓN

1. ANÁLISIS DEL PROBLEMA Y DETERMINACIÓN DE REQUISITOS PARA EL PROGRAMA A DESARROLLAR

1 Objeto del programa, sus usuarios, principales funciones y objetivos perseguidos durante el desarrollo

2 Revisión de programas conocidos que realizan funciones similares.

3 Bases teóricas del desarrollo.

4 Selección de herramientas de desarrollo

DISEÑO PARTE DEL DESARROLLO

1 Desarrollo de interfaz de usuario

2.2 Desarrollo de estructuras de datos (en externo y RAM)

2.3 Desarrollo y análisis de algoritmos.

IMPLEMENTACIÓN DEL PROGRAMA EN LENGUAJE C++

1 arquitectura del programa

2 Selección de componentes visuales y no visuales estándar

RESULTADOS DE LA PRUEBA

CONCLUSIÓN

Bibliografía

Aplicaciones

INTRODUCCIÓN

Tic-tac-toe es un juego lógico entre dos oponentes en un campo cuadrado de 3 por 3 celdas o más (hasta un “campo sin fin”). Uno de los jugadores juega con "cruces", el segundo, con "dedos de los pies". Este juego se hizo popular mucho antes de la llegada de las computadoras, solo antes de que se jugara con una hoja de papel y un bolígrafo. El juego tradicional chino utiliza piedras blancas y negras.

En esto trabajo del curso Se conservan las reglas básicas y el tamaño estándar del campo de juego (3x3 celdas). Para comodidad del juego, el derecho a realizar el primer movimiento se deja al usuario, es decir, "cruces".

Tic Tac Toe es un programa que está diseñado para entretener al usuario, por eso su interfaz, en este trabajo del curso, está hecha en un estilo de juego con una combinación de colores positivos que realzan la parte emocional del proceso del juego.

Hay tres tipos en el juego: X contra 0 - usuario contra usuario, "primer nivel con una computadora" - para aquellos que recién están aprendiendo los conceptos básicos del juego mundial, y nivel "segundo nivel con una computadora" - para aquellos que están absolutamente seguros de su victoria. En los niveles 1 y 2, hay tres resultados posibles: "ganar", "perder" y "empatar". Las ganancias se fijan si las líneas verticales, horizontales o diagonales están completamente llenas de cruces o ceros.

Si se acaban las casillas libres del campo, pero nadie gana, se considera que el juego termina en “empate”.

1. ANÁLISIS DEL PROBLEMA Y DETERMINACIÓN DE REQUISITOS PARA EL PROGRAMA A DESARROLLAR

interfaz cruzada del programa

1.1 Objeto del programa, sus usuarios, principales funciones y objetivos perseguidos durante el desarrollo

El objetivo de este programa es, ante todo, entretener a los usuarios, alegrar el tiempo de espera de una persona, porque cualquier trabajo requiere descanso, y este sencillo juego te ayudará a relajarte y distraerte de los asuntos cotidianos. "Tic Tac Toe" también pertenece a la clase de juegos intelectuales y lógicos, que están diseñados para entrenar el pensamiento lógico, permitirle concentrar la atención y desarrollar la memoria.

El público objetivo de los usuarios son niños y adolescentes, así como adultos. Los principales criterios para utilizar el producto son la capacidad de leer el texto escrito en el programa y la capacidad de seleccionar la tarea necesaria para la computadora mediante botones.

De esto podemos concluir que las tareas principales son: la tarea de entretenimiento y la tarea de desarrollar el potencial lógico de una persona.

1.2 Revisión de programas conocidos que realizan funciones similares

En Internet puedes encontrar una gran cantidad de trabajos que implementan este juego. Actualmente, existen muchos análogos de este juego que se han apartado de los estándares originales. Un ejemplo de estos programas es "Tic-tac-toe en un campo sin fin" y "Tic-tac-toe 3D". Además, en muchos juegos, las "cruces" y los "dedos de los pies" se reemplazan por otros símbolos, como, por ejemplo, "piedras".

Mi proyecto de curso es una aplicación para PC. El juego está destinado tanto a un usuario, cuyo oponente es la inteligencia artificial (o una computadora), como a dos usuarios. Se presenta en un campo clásico de 3x3.

El más interesante e inusual, en mi opinión, fue el juego "Tic Tac Toe 3D". Por eso lo elegí para comparar.

El tres en raya en 3D es mucho más interesante que en papel o en una pizarra normal. Hay más oportunidades de ganar y perder y los empates son menos comunes. Puedes jugar solo, contra la computadora, o junto con un amigo. Y lo más inusual aquí es que para ganar puedes hacer una combinación de tres bolas de tu color (blanca o negra) no solo en cualquier nivel, sino también a lo largo del plano de las paredes e incluso en diagonal en todo el campo ( Figura 1.1).

Arroz. 1.1

Entre la amplia variedad de juegos sobre un tema similar, podemos destacar en cada obra una implementación única del plan. Cada proyecto se diferencia de los demás por su individualidad.

1.3 Bases teóricas del desarrollo.

Análisis

Para cada una de las partes existen algoritmos conocidos que garantizan el empate en el juego de cualquier oponente, y si su oponente comete un error, le permiten ganar. Entonces el juego está en un estado "nadie está muerto"<#"877528.files/image002.gif">

Fig.1.2. Árbol de situaciones de juego.

En la figura 1.2 se muestra un árbol parcial de situaciones de juego para el juego tres en raya. Un árbol de situaciones de juego para el juego tres en raya, donde el jugador de las "cruces" va primero y actúa de acuerdo con el algoritmo anterior, y el jugador de los "dedos de los pies" puede hacer lo que quiera (y un vértice es dado para una acción racional y para una irracional, es decir, cualquier otra), consta de 50 nodos.

1.4 Seleccionar herramientas de desarrollo

Para lograr nuestros objetivos, necesitamos un entorno de desarrollo de aplicaciones integrado. Por lo tanto, el desarrollo del proyecto se realizó en el entorno de programación Microsoft Visual Studio 2008.

Microsoft Visual Studio es una línea de productos de Microsoft , incluido un entorno de desarrollo integrado software y una serie de otras herramientas. Estos productos le permiten desarrollar como basado en consola. aplicaciones y aplicaciones GUI , incluida la compatibilidad con la tecnología Windows Forms , así como sitios web , servicios web como en nativo y controlado códigos para todas las plataformas soportadas por Windows ,Windows Móvil , Windows CE , .NET Framework , Xbox , Telefono windows Marco compacto .NET y luz plateada .

2. DISEÑO PARTE DEL DESARROLLO

2.1 Desarrollo de interfaz de usuario

Al crear una aplicación de juegos, es necesario tener en cuenta uno de los componentes principales del éxito del producto: la interfaz. La interfaz de usuario del programa debe, ante todo, ser comprensible y atractiva para el usuario. Debe intentar eliminar todos los momentos que distraigan al usuario o le causen incomodidad. Toda la interfaz del programa se puede dividir en dos componentes.

) Menú principal del programa

Arroz. 2.1 - Menú principal del programa

El menú principal está diseñado para permitir al usuario unirse a la atmósfera del juego, por lo que la interfaz está diseñada en colores coloridos y divertidos. A través del menú puedes ir al campo de juego, ver las reglas del juego o salir del juego.

) Campo de juego

Fig 2.2 - Campo de juego

El campo de juego contiene el área inmediata para jugar, donde el jugador y la computadora colocan sus íconos. Antes de iniciar el juego, el usuario debe seleccionar el tipo de juego como "X vs 0", "1 nivel con computadora" o "2 nivel con computadora", de lo contrario el programa dará un mensaje sobre qué hacer. Un botón que ayudará al jugador a regresar al menú principal. Al final, aparecerán ventanas adicionales para informar al participante sobre los resultados del partido.

Arroz. 2.3 - ventanas adicionales de resultados del juego

2.2 Desarrollo de estructuras de datos (en externo y RAM)

La RAM se utiliza para una matriz unidimensional que consta de 9 elementos que almacena los estados del campo de juego, donde cada celda de la matriz corresponde a una celda en el campo de juego. La memoria también se gasta en variables estáticas: número de nivel, orden de turno.

Requiere 803 KB de memoria libre para funcionar.

.3 Desarrollo y análisis de algoritmos

Para implementar el algoritmo de pensamiento del juego, debes configurar una matriz estática gcnew array (9); en el cual se almacenarán los estados del campo de juego, donde cada celda del array corresponde a una celda. "0" - corresponde a una celda vacía, si un jugador se movió a la celda, es decir, "X", se registra el valor "1" y si la computadora hizo un movimiento, es decir, "O", el valor es “2”. Inicialmente, todos los elementos de la matriz son iguales a "0". Es necesario configurar la variable estática lvl, que almacena datos de nivel. Hay 3 niveles en total en este juego: lvl toma el valor “1” si el usuario ha elegido el tipo de juego “X vs O”, el valor “2” si es “1er nivel con una computadora” y el valor “3 ” si “segundo nivel con computadora” " La variable del jugador almacena el orden de los turnos (“verdadero” es el turno del jugador, “falso” es el turno de la computadora). Dado que el derecho a realizar el primer movimiento se le otorga al usuario, al comienzo del juego player = true. La variable estática flag almacena información sobre si hay celdas vacías en el campo de juego o no: si flag = true, es decir, false, no hay celdas vacías. El algoritmo de verificación debe contener una iteración de los parámetros de la matriz x y presentar su propia solución, que será óptima para seguir jugando. Este programa presenta 2 niveles de juego con una computadora. En el nivel 1, la tarea del ordenador no es vencer al oponente. Es por eso esta función devuelve un valor aleatorio de la celda donde irá la computadora. El código de este algoritmo se presenta en el [Apéndice 1]. La Figura 2.4 muestra el diagrama de bloques de la implementación del código.

El movimiento más ganador al comienzo del juego es moverse hacia el centro del campo. En la función dif_level() se verifica una condición al principio: si el jugador no fue al campo central, entonces la computadora irá allí. De lo contrario, si el jugador fue al centro, entonces se llama a la función check(2) para verificar la combinación de la computadora y, si existe la oportunidad de ganar, devolver el número de celular. Si la computadora no puede ganar en el siguiente movimiento, entonces se llama a la función check(1): verificar la combinación del jugador. Se devuelve el número de la celda en la que el jugador habría ganado si hubiera apostado. Si no existe tal combinación, entonces se llama a la función low_level().

Fig.2.4. - Diagrama de bloques

Fig.2.5. - Diagrama de bloques

3. IMPLEMENTACIÓN DEL PROGRAMA EN LENGUAJE C++

.1 Arquitectura del programa

Este programa implementa 3 formularios: el menú principal (Fig. 2.1.), el campo de juego (Fig. 2.2) y el campo de ayuda (reglas del juego); 12 paneles, 9 de los cuales son principales. Además, al final del juego aparece un cuadro de imagen con el resultado, son 5 en total (Figura 2.3).

Puede utilizar como base los controladores de clic del panel, de los cuales hay exactamente 9 en el campo de juego. Cada controlador llama a varias funciones. Al principio hay una condición, si el usuario selecciona el tipo de juego “X versus 0”, las celdas simplemente se llenan con los valores 1 o 2 (cruz o cero). Luego vienen las funciones: indicación de progreso (CrossZero()), que cambia la cruz a cero y viceversa, bloquea las celdas ocupadas, compruebaArray(), encuentra el ganador ganador(). La función ganador() considera todas las opciones posibles de ganar, por lo que si uno de los jugadores alinea 3 de sus piezas (una cruz o un cero) en vertical, horizontal o diagonal, ganará. De lo contrario, si el campo está lleno, pero ninguno de los jugadores se ha alineado, entonces se llama a la función de verificación de empate (_friend()), que verifica si quedan celdas libres en el campo o no. Si fr = verdadero, entonces no hay celdas libres en el campo. Si el valor ha cambiado, significa que hay una celda libre en el campo.

La segunda condición funciona si se selecciona el segundo o tercer tipo de juego. Entonces la función en la que se realizó el movimiento de la computadora se llama: mover(int n). Transmite el número de la celda en la que el jugador hizo clic. Luego vienen las funciones: indicación de progreso (CrossZero()), bloqueo de celdas ocupadas, checkArray(). Luego se llama a la función ganador(), que comprueba si el jugador ganó con este movimiento o no. En caso contrario, se comprueba la presencia de células libres. Si hay celdas libres, entonces la computadora se mueve. A continuación, dependiendo del nivel que haya elegido el jugador “1” o “2”, se llaman las siguientes funciones: low_level(), dif_level(). La función low_level() selecciona dónde colocar el cero aleatoriamente, y la función dif_level() presenta un algoritmo especial para que la computadora gane. Luego vienen las funciones: indicación de progreso (CrossZero()), bloqueo de celdas ocupadas, checkArray(). Luego se llama a la función ganador(), que comprueba si la computadora ganó con este movimiento o no. En caso contrario, se comprueba la presencia de células libres. Si hay casillas libres, entonces el jugador se mueve.

.2 Selección de componentes visuales y no visuales estándar

Para implementar este trabajo, se seleccionaron los siguientes componentes:

1) Formulario1, con parámetros dados Texto=Tic-Tac-Toe, ControlBox=Falso

2) f2, con los parámetros especificados BackColor, Text=Game

) comboBox1 con los parámetros de Elementos especificados:

X contra 0

1er nivel con computadora

Nivel 2 con computadora

4) panel, con parámetros BackColor especificados y diferentes valores para los parámetros Visible y Habilitado. Para algunos paneles se escribieron eventos como Click.

5) botón, con los parámetros especificados Fuente, Color frontal, Color posterior, Texto, para todos los botones se escribieron eventos como Click.

6) etiqueta, con los parámetros especificados BackColor, Font, Fore Color, Text.

) PictureBox, con parámetros especificados Imagen, SizeMode= StretchImage.

) textBox, con los parámetros especificados BackColor, Font, Fore Color, Text=” ”.

4. RESULTADOS DE LA PRUEBA

Probemos el programa analizando 3 tipos de juegos.

Probemos las acciones de los botones del menú principal. Los botones funcionan correctamente. Intentemos iniciar el juego sin elegir un tipo de juego. El programa muestra un mensaje de error y le pide que seleccione el tipo de juego (Fig. 4.1).

Fig.4.1.

Elijamos 1 tipo de juego: "X contra 0", es decir. usuario contra usuario. En esta etapa del juego, el usuario también puede jugar consigo mismo. (Figura 4.2)

Fig.4.2.

Durante el juego “Nivel 1 con la computadora”, la computadora no se fija el objetivo de ganar al participante. Él simplemente pone ceros plazas libres campos. En esta etapa, el usuario puede vencer fácilmente a la computadora. Aunque en este nivel también son posibles otras opciones para el desarrollo de eventos.

Fig.4.3.

Tipo de juego: “Nivel 2 con ordenador”. En esta etapa, el juego analiza todos los movimientos e intenta elegir el más óptimo. Aquí también son posibles los tres escenarios, porque La computadora hace su primer movimiento hacia cualquier celda libre. La mayoría de las veces el juego termina en empate.

Fig.4.4.

El programa se ejecuta correctamente en todas las variantes de prueba, sin errores.

CONCLUSIÓN

Podemos decir con seguridad que la tarea planteada al inicio del trabajo se ha completado. Durante el desarrollo, se planificó y desarrolló un proyecto para una remezcla del famoso juego "Tic Tac Toe". El juego cumple con los requisitos especificados y cumple sus funciones. Implementado en el trabajo. Varios tipos Juegos y niveles de dificultad.

Durante el trabajo se dominaron nuevos métodos de programación en un entorno de desarrollo integrado. Se han consolidado los antiguos conocimientos de trabajo con el lenguaje C++. En preparación para el trabajo del curso, se analizaron varios métodos y algoritmos para implementar este juego.

A pesar de la aparente simplicidad de este programa, presenta una serie de dificultades que se implementan utilizando todas las técnicas básicas de Visual C++.

Las características de este programa son:

Algoritmo claramente construido;

Interfaz intuitiva;

Fácil de usar;

Manual de usuario bastante claro;

Sin complementos innecesarios.

BIBLIOGRAFÍA

1. http://www.pravilaigr.ru/xo.php

2. http://2igroka.com/stuff/sportivnye/krestiki_noliki_3d/15-1-0-14

3. https://www.draw.io/

Http://pol-video.ru/QPW9QHEO2GU/uroki_s_krestiki-noliki_ch1.html

ANEXO 1

private: int low_level())(// procedimiento para un oponente ligero;::Random^ rand = gcnew System::Random();(= rand->Next(0,8);

) mientras (x[r] != 0);r;

APÉNDICE 2

privado: bool check(int n)(k = -1;// comprueba todas las combinaciones y devuelve el movimiento correcto(x ​​== n) (((x == n)&&(x == 0)) k =2; ((x == n)&&(x == 0)) k =1;((x == n)&&(x == 0)) k =6;((x == n)&&(x == 0)) k =3;((x == n)&&(x == 0)) k =8;((x == n)&&(x == 0)) k =4;

)(x == n) (((x == n)&&(x == 0)) k =0;((x == n)&&(x == 0)) k =7;((x = = n)&&(x == 0)) k =4;

)(x == n) (((x == n)&&(x == 0)) k =4;((x == n)&&(x == 0)) k =6;((x = = n)&&(x == 0)) k =8;((x == n)&&(x == 0)) k =5;

)(x == n) (((x == n)&&(x == 0)) k =0;((x == n)&&(x == 0)) k =5;((x = = n)&&(x == 0)) k =4;

)(x == n) (((x == n)&&(x == 0)) k =0;((x == n)&&(x == 0)) k =3;((x = = n)&&(x == 0)) k =1;((x == n)&&(x == 0)) k =2;

)(x == n) (((x == n)&&(x == 0)) k =2;

)(x == n) (((x == n)&&(x == 0)) k =8;((x == n)&&(x == 0)) k =7;

)(x == n) (((x == n)&&(x == 0)) k =6;

)(k!=-1) devuelve verdadero; de lo contrario, devuelve falso;

APÉNDICE 3

privado: int dif_level())(//enemigo difícil

//return check(2);(x == 0) return (4);(check(2)) return k; de lo contrario (verificar (1)) devolver k; de lo contrario nivel_bajo();

SOLICITUD 4

privado: void CrossZero())(// cambia la cruz a cero (indicador de progreso)(jugador) (->Visible = true;->Visible = false;

) else (->Visible = verdadero;->Visible = falso;

): void checkArray())(// función de verificar si hay algo en una celda, si lo hay, entonces ya no puedes hacer clic en esta celda.(x == 1) (panel1->BackgroundImage = panel11->BackgroundImage ;panel1- >Activado = falso;)(x == 2) (panel1->ImagenDeFondo = panel10->ImagenDeFondo;panel1->Activado = falso;)(x == 1) (panel2->ImagenDeFondo = panel11->ImagenDeFondo ;panel2- >Enabled = false;)(x == 2) (panel2->BackgroundImage = panel10->BackgroundImage;panel2->Enabled = false;)(x == 1) (panel3->BackgroundImage = panel11->BackgroundImage ;panel3- >Enabled = false;)(x == 2) (panel3->BackgroundImage = panel10->BackgroundImage;panel3->Enabled = false;)(x == 1) (panel4->BackgroundImage = panel11->BackgroundImage ;panel4- >Enabled = false;)(x == 2) (panel4->BackgroundImage = panel10->BackgroundImage;panel4->Enabled = false;)(x == 1) (panel5->BackgroundImage = panel11->BackgroundImage ;panel5- >Enabled = false;)(x == 2) (panel5->BackgroundImage = panel10->BackgroundImage;panel5->Enabled = false;)(x == 1) (panel6->BackgroundImage = panel11->BackgroundImage ;panel6- >Enabled = false;)(x == 2) (panel6->BackgroundImage = panel10->BackgroundImage;panel6->Enabled = false;)(x == 1) (panel7->BackgroundImage = panel11->BackgroundImage ;panel7- >Enabled = false;)(x == 2) (panel7->BackgroundImage = panel10->BackgroundImage;panel7->Enabled = false;)(x == 1) (panel8->BackgroundImage = panel11->BackgroundImage ;panel8- >Enabled = false;)(x == 2) (panel8->BackgroundImage = panel10->BackgroundImage;panel8->Enabled = false;)(x == 1) (panel9->BackgroundImage = panel11->BackgroundImage ;panel9- >Enabled = false;)(x == 2) (panel9->BackgroundImage = panel10->BackgroundImage;panel9->Enabled = false;)

): bool ganador())(// comprobando el ganador y bloqueando todas las celdas restantes.

//bool flag = false;(((x == x)&&(x == x)&&(x == 2)) || ((x == x)&&(x == x)&&(x = = 2)) || ((x == x)&&(x == x)&&(x == 2)) || ((x == x)&&(x == x)&&(x == 2 )) || ((x == x)&&(x == x)&&(x == 2)) || ((x == x)&&(x == x)&&(x == 2)) || ((x == x)&&(x == x)&&(x == 2)) || ((x == x)&&(x == x)&&(x == 2)))( (lvl==1) (imagenPo->Visible = verdadero;)(imagenPr->Visible = verdadero;)->Activado = falso;->Activado = falso;->Activado = falso;->Activado = falso;-> Habilitado = falso;->Habilitado = falso;->Habilitado = falso;->Habilitado = falso;->Habilitado = falso;verdadero;

)(((x == x)&&(x == x)&&(x == 1)) || ((x == x)&&(x == x)&&(x == 1)) || ((x == x)&&(x == x)&&(x == 1)) || ((x == x)&&(x == x)&&(x == 1)) || (( x == x)&&(x == x)&&(x == 1)) || ((x == x)&&(x == x)&&(x == 1)) || ((x = = x)&&(x == x)&&(x == 1)) || ((x == x)&&(x == x)&&(x == 1)))((lvl==1) ( imagenPx->Visible = verdadero;)(imagenPobeda->Visible = verdadero;)->Activado = falso;->Activado = falso;->Activado = falso;->Activado = falso;->Activado = falso;-> Habilitado = falso;->Habilitado = falso;->Habilitado = falso;->Habilitado = falso;verdadero;

): void _friend())(fr = verdadero;(int i = 0; i< 9; i++) if (x[i] == 0) {fr = false; break;}(fr) { pictureN->Visible = verdadero;)

): movimiento vacío (int n)(// función de movimiento de la computadora = false;[n] = 1;= !jugador;();();(ganador()) () ((int i = 0; i< 9; i++) if (x[i] == 0) flag = true;(flag){(lvl == 2) = 2; = 2;= !player;();();();

): System::Void button1_Click(System::Object^ sender, System::EventArgs^ e) (// nuevo juego>Visible = false;>Visible = false;>Visible = false; >Visible = false; >Visible = false; = comboBox1->Text;(typeGame == "")(::Show("¡Selecciona tu tipo de juego primero!");

) else ((typeGame == "X versus 0") lvl = 1;(typeGame == "1er nivel con una computadora") lvl = 2;(typeGame == "2do nivel con una computadora") lvl = 3;( ); = verdadero;(int i = 0; i< 9; i++) x[i] = 0;->Imagen de fondo = panel12->Imagen de fondo;->Imagen de fondo = panel12->Imagen de fondo;->Imagen de fondo = panel12->Imagen de fondo;->Imagen de fondo = panel12->Imagen de fondo;->Imagen de fondo = panel12->Imagen de fondo;->Imagen de fondo = panel12-> Imagen de fondo;->Imagen de fondo = panel12->Imagen de fondo;->Imagen de fondo = panel12->Imagen de fondo;->Imagen de fondo = panel12->Imagen de fondo;->Activado = verdadero;->Activado = verdadero;->Activado = verdadero;->Activado = verdadero;->Habilitado = verdadero;->Habilitado = verdadero;->Habilitado = verdadero;->Habilitado = verdadero;->Habilitado = verdadero;

): Sistema::Void panel1_MouseClick(Sistema::Objeto^ remitente, Sistema::Windows::Forms::MouseEventArgs^ e) (n = 0;(lvl == 1)((jugador)( = 1;

)= !jugador;();();();

): Sistema::Void panel2_MouseClick(Sistema::Objeto^ remitente, Sistema::Windows::Forms::MouseEventArgs^ e) (n = 1;(lvl == 1)((jugador)( = 1;

)= !jugador;();();();

) más si ((lvl == 2)||(lvl == 3))((n);

): Sistema::Void panel3_MouseClick(Sistema::Objeto^ remitente, Sistema::Windows::Forms::MouseEventArgs^ e) (n = 2;(lvl == 1)((jugador)( = 1;

)= !jugador;();();();

) más si ((lvl == 2)||(lvl == 3))((n);

): Sistema::Void panel4_MouseClick(Sistema::Objeto^ remitente, Sistema::Windows::Forms::MouseEventArgs^ e) (n = 3;(lvl == 1)((jugador)( = 1;

)= !jugador;();();();

) más si ((lvl == 2)||(lvl == 3))((n);

): Sistema::Void panel5_MouseClick(Sistema::Objeto^ remitente, Sistema::Windows::Forms::MouseEventArgs^ e) (n = 4;(lvl == 1)((jugador)( = 1;

)= !jugador;();();();

) más si ((lvl == 2)||(lvl == 3))((n);

): Sistema::Void panel6_MouseClick(Sistema::Objeto^ remitente, Sistema::Windows::Forms::MouseEventArgs^ e) (n = 5;(lvl == 1) ((jugador)( = 1;

)= !jugador;();();();

) más si ((lvl == 2)||(lvl == 3))((n);

): Sistema::Void panel7_MouseClick(Sistema::Objeto^ remitente, Sistema::Windows::Forms::MouseEventArgs^ e) (n = 6;(lvl == 1) ((jugador)( = 1;

)= !jugador;();();();

) más si ((lvl == 2)||(lvl == 3))((n);

): Sistema::Void panel8_MouseClick(Sistema::Objeto^ remitente, Sistema::Windows::Forms::MouseEventArgs^ e) (n = 7;(lvl == 1) ((jugador)( = 1;

)= !jugador;();();();

) más si ((lvl == 2)||(lvl == 3))((n);

): Sistema::Void panel9_MouseClick(Sistema::Objeto^ remitente, Sistema::Windows::Forms::MouseEventArgs^ e) (n = 8;(lvl == 1) ((jugador)( = 1;

)= !jugador;();();();

) más si ((lvl == 2)||(lvl == 3))((n);

): Sistema::Botón vacío2_Click(Sistema::Objeto^ remitente, Sistema::EventArgs^ e) (();

): Sistema::Imagen nulaPx_Click(Sistema::Objeto^ remitente, Sistema::EventArgs^ e) (>Visible = falso;

): Sistema::Imagen vacíaPo_Click(Sistema::Objeto^ remitente, Sistema::EventArgs^ e) (>Visible = false;

): Sistema::Imagen vacíaPobeda_Click(Sistema::Objeto^ remitente, Sistema::EventArgs^ e) (>Visible = false;

): Sistema::Imagen nulaPr_Click(Sistema::Objeto^ remitente, Sistema::EventArgs^ e) (>Visible = false;

): Sistema::Imagen nulaN_Click(Sistema::Objeto^ remitente, Sistema::EventArgs^ e) (>Visible = false;

¡Atención! Esta es una versión introductoria de la lección, cuyos materiales pueden estar incompletos.

Inicie sesión en el sitio como estudiante

Inicie sesión como estudiante para acceder a los materiales escolares.

Creando configuraciones 1C: escribiendo “Tic Tac Toe” parte 1/3

Aprenderemos jugando, y por eso nuestro primer proyecto será crear para todos
un juego familiar desde la infancia: "Tic Tac Toe".

Quizás te preguntes, ¿qué tienen que ver los juegos con 1C, la contabilidad y el comercio? Casi ninguno. Pero hay que empezar poco a poco y con el tiempo llegaremos a la automatización de los almacenes. Por ahora, comencemos poco a poco.

Antes de empezar a programar el juego Tic-Tac-Toe, pensemos en ello.

Ya sabemos que el formulario tiene Elementos, uno de los cuales es el Botón. Los botones son capaces de ejecutar comandos y, al mismo tiempo, tienen propiedades que le permiten controlar su visualización en el formulario (por ejemplo, un título).

Por ejemplo, puede utilizar un botón para crear un campo con nueve áreas activas (aquellas celdas en las que hacemos clic y registramos la acción, al mismo tiempo que mostramos inscripciones en forma de "O" y "X"). El botón es más que adecuado para esto.

¿Qué necesitamos? Obviamente, necesitaremos recordar nuestro movimiento y recordar el movimiento de la computadora. También necesitaremos cambiar los títulos de los botones: cuando hacemos clic, el título del botón siempre es “O”, cuando la computadora se mueve, es “X”.

Primero, necesitaremos crear una nueva base de datos en la que crearemos nuestro juego. Hagámoslo.

Paso #1: crear una base de datos vacía

Creemos una base de datos vacía de Tic-Tac-Toe.

Instrucciones detalladas

vamos a lanzar Acceso directo 1C para abrir una lista de bases de datos disponibles en la computadora. Estás leyendo una versión de prueba de la lección; hay lecciones completas disponibles. Necesitamos creación nueva base, así que presione el botón " Agregar":

Se abrirá la ventana para agregar base de información, en el que debe seleccionar el primer elemento " Creación de una base de información." y haga clic en el botón "Siguiente":

En la siguiente ventana, seleccione el segundo elemento " Creando una base de información sin configuración para desarrollar una nueva configuración..." y haga clic en el botón "Siguiente" nuevamente:

En la siguiente ventana se nos pide que ingresemos el nombre de la nueva base de datos, bajo el cual se mostrará en la lista de bases de datos. Entremos " Tres en raya" y haga clic en el botón "Siguiente":

En la siguiente ventana debe especificar la ruta a la carpeta vacía en la que se almacenará nuestra base de datos. En este caso creé la carpeta " Tres en raya" en la carpeta "Bases de datos 1C" en la unidad D:

En la siguiente ventana, deje todas las configuraciones predeterminadas y haga clic en " Listo":

Después de una breve pausa, se creó la base de datos y se agregó a la lista. Hay dos modos principales de trabajar con la base de datos: 1C:Empresa Y Configurador:

En modo configurador configuramos y programamos la base de datos, en modo 1C:Enterprise vemos qué sale de ella.

Paso #2: abre el configurador

Presionemos el botón " Configurador" para ingresar al modo configurador:

Paso #3: abre el árbol de configuración

Ejecute el comando de menú " Configuración"->"Configuración abierta":

Un árbol de configuración se abrió frente a nosotros, que contiene varias secciones de configuración. Como aún no hemos creado nada, estas secciones están vacías:

Paso #4: agregar procesamiento

Para situar la lógica de nuestro juego, utilizaremos el apartado “Procesamiento”. hagamos clic botón derecho del ratón en la sección " Tratos" y seleccione el comando "Agregar":

Ante nosotros se ha abierto una ventana para crear un nuevo procesamiento. Ingresemos el nombre " Tres en raya". El sinónimo se insertará solo. Esto es suficiente para guardar nuestro procesamiento (aún vacío) en la base de datos. Haga clic en el botón "Cerrar":

Paso No. 5: primera depuración del programa

Puedes comprobar lo que pasó desde el modo usuario ( 1C:Empresa). Para acceder directamente desde el configurador, ejecute el comando de menú " Depuración"->"Iniciar la depuración":

Dado que hemos realizado un cambio en la base de datos, se nos pregunta si aceptamos este cambio. Esta pregunta nos harán constantemente durante el proceso de desarrollo. Estamos de acuerdo (botón " "):

La base de datos se inició en modo "1C:Enterprise". Estás leyendo una versión de prueba de la lección; hay lecciones completas disponibles. Pero como vemos, trabajar con él sigue siendo difícil: simplemente no hay nada para elegir. Es extraño, porque ya hemos creado el procesamiento y, en teoría, debería aparecer en el panel amarillo.




Arriba