React Native es uno de los marcos más populares para crear aplicaciones nativas para Android e iOS. Con React Native, puede crear aplicaciones multiplataforma con JavaScript. No solo aplicaciones, también puede desarrollar juegos simples como Tic Tac Toe usando el marco React Native. En este tutorial, aprenderá cómo hacer un juego de tres en raya desde cero. El juego también tendrá una opción de reinicio y aparecerá automáticamente si hay un resultado del juego.
Después de desarrollar este proyecto, aprenderá los conceptos básicos del desarrollo de React Native. Ahora, comencemos sin perder tiempo.
Cómo hacer un juego de Tic Tac Toe usando React Native
Paso 1: Configuración del entorno de desarrollo
Primero, configuremos el entorno de desarrollo.
- Instalar Node.js desde aquí.
- Después de instalar Node.js, ingrese este comando en la línea de comando.
npm install expo-cli --global
Su entorno de desarrollo ya está listo.
Cree un nuevo proyecto con este comando y use el archivo App.js para escribir el código.
expo init
Ahora empecemos.
Este es el código final de la aplicación; vamos a conseguirlo, parte por parte.
import React from 'react';
import { StyleSheet, Text, View, Alert, TouchableOpacity } from 'react-native';
import Entypo from "@expo/vector-icons/Entypo"
var board = ["question","question","question","question","question","question","question","question","question"]
export default class App extends React.Component {
constructor(props){
super(props)
this.state = {
isCross:true
}
}
drawItem(number){
if(board[number]=="question" && this.winGame()==""){
if(this.state.isCross)
board[number] = "cross"
else
board[number] = "circle"
this.setState({isCross:!this.state.isCross})
if(this.winGame()!="")
Alert.alert(this.winGame()+" Won The Game")
}
}
resetGame = () => {
this.setState({isCross:true})
board=["question","question","question","question","question","question","question","question","question"]
}
chooseItemColor = (number) => {
if(board[number]=="cross")
return "#FF3031"
else if(board[number]=="circle")
return "#45CE30"
return "#74B9FF"
}
winGame = () => {
if(board[0] != "question" && board[0] == board[1] && board[1] == board[2]){
return board[0]
}else if(board[3] != "question" && board[3] == board[4] && board[4] == board[5]){
return board[3]
}else if(board[6] != "question" && board[6] == board[7] && board[7] == board[8]){
return board[6]
}else if(board[0] != "question" && board[0] == board[3] && board[3] == board[6]){
return board[0]
}else if(board[1] != "question" && board[1] == board[4] && board[4] == board[7]){
return board[1]
}else if(board[2] != "question" && board[2] == board[5] && board[5] == board[8]){
return board[2]
}else if(board[0] != "question" && board[0] == board[4] && board[4] == board[8]){
return board[0]
}else if(board[2] != "question" && board[2] == board[4] && board[4] == board[6]){
return board[2]
}else{
return ""
}
}
render(){
return (
<View style={styles.container}>
<Text style={{color:"#01CBC6",fontSize:50}}>Tic Tac Toe</Text>
<View style={{flexDirection:"row"}}>
<TouchableOpacity style={{margin:30,padding:20}} onPress={() => this.drawItem(0)}>
<Entypo name={board[0]} size={32} color={this.chooseItemColor(0)} />
</TouchableOpacity>
<TouchableOpacity style={{margin:30,padding:20}} onPress={() => this.drawItem(1)}>
<Entypo name={board[1]} size={32} color={this.chooseItemColor(1)} />
</TouchableOpacity>
<TouchableOpacity style={{margin:30,padding:20}} onPress={() => this.drawItem(2)}>
<Entypo name={board[2]} size={32} color={this.chooseItemColor(2)} />
</TouchableOpacity>
</View>
<View style={{flexDirection:"row"}}>
<TouchableOpacity style={{margin:30,padding:20}} onPress={() => this.drawItem(3)}>
<Entypo name={board[3]} size={32} color={this.chooseItemColor(3)} />
</TouchableOpacity>
<TouchableOpacity style={{margin:30,padding:20}} onPress={() => this.drawItem(4)}>
<Entypo name={board[4]} size={32} color={this.chooseItemColor(4)} />
</TouchableOpacity>
<TouchableOpacity style={{margin:30,padding:20}} onPress={() => this.drawItem(5)}>
<Entypo name={board[5]} size={32} color={this.chooseItemColor(5)} />
</TouchableOpacity>
</View>
<View style={{flexDirection:"row"}}>
<TouchableOpacity style={{margin:30,padding:20}} onPress={() => this.drawItem(6)}>
<Entypo name={board[6]} size={32} color={this.chooseItemColor(6)} />
</TouchableOpacity>
<TouchableOpacity style={{margin:30,padding:20}} onPress={() => this.drawItem(7)}>
<Entypo name={board[7]} size={32} color={this.chooseItemColor(7)} />
</TouchableOpacity>
<TouchableOpacity style={{margin:30,padding:20}} onPress={() => this.drawItem(8)}>
<Entypo name={board[8]} size={32} color={this.chooseItemColor(8)} />
</TouchableOpacity>
</View>
<TouchableOpacity style={{margin:30,flexDirection:"row",padding:20,backgroundColor:"#E74292",width:200,borderRadius:20}} onPress={()=>this.resetGame()}>
<Entypo name="controller-jump-to-start" size={32} color="#2B2B52" />
<Text style={{color:"#2B2B52",fontSize:20}}>Restart Game</Text>
</TouchableOpacity>
</View>
)
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
});
Paso 2: Decidir el turno de los jugadores
Primero importamos los paquetes requeridos.
import React from 'react';
import { StyleSheet, Text, View, Alert, TouchableOpacity } from 'react-native';
import Entypo from "@expo/vector-icons/Entypo"
Ahora en el constructor creamos un objeto de estado en el que tenemos un booleano llamado isCross.
constructor(props){
super(props)
this.state = { isCross:true }
}
Este isCross es verdadero cuando es el turno de Cross para jugar y falso si es el turno de Circle.
También creamos una matriz llamada tablero, que almacena si una posición particular del tablero fue capturada por Cross, Circle o No One. Cada una de estas cosas se indica con «cruz», «círculo» o «pregunta», respectivamente.
Afortunadamente, «cruz», «círculo» o «pregunta» también son los nombres de sus iconos vectoriales en la biblioteca de Entypo.
Puede preguntar, ¿qué es Entypo? es una biblioteca en exposición para mostrar iconos vectoriales sin importar ningún archivo de imagen por separado y utilizando la Galería de imágenes vectoriales de Entypo.
Bien, ahora sería genial si pudiéramos asignar diferentes colores a nuestra Cruz y Círculo. Para hacer esto, tenemos un método llamado elige ItemColor.
chooseItemColor = (number) => {
if(board[number]=="cross")
return "#FF3031"
else if(board[number]=="circle")
return "#45CE30"
return "#74B9FF"
}
Para cualquier elemento dado de la matriz, devuelve el color rojo para la cruz, el color verde para el círculo y el color azul para el icono del signo de interrogación.
Paso 3: Captura la entrada del jugador
Ahora tenemos la función para capturar las ubicaciones de cada jugador llamada drawItem.
drawItem(number){
if(board[number]=="question" && this.winGame()==""){
if(this.state.isCross)
board[number] = "cross"
else
board[number] = "circle"
this.setState({isCross:!this.state.isCross})
if(this.winGame()!="")
Alert.alert(this.winGame()+" Won The Game")
}
}
Por lo tanto, esta función acepta un parámetro llamado número, que es esencialmente el número de posición del marcador.
Ahora, en la primera declaración if, se comprueba si el elemento proporcionado es «pregunta» o no, o en otras palabras, si ya está adquirido o no. Si es igual a «pregunta», marque la segunda condición.
En la segunda condición, una función llamada ganarJuego se llama, que explicaremos más adelante. Se utiliza para comprobar si el juego ya se ha ganado o no.
Ahora verificamos si es el turno de Cross o el turno del círculo al verificar el booleano isCross de nuestro estado, luego asignamos el jugador respectivo a ese número de tablero.
Después de eso, establecemos el turno para el siguiente jugador usando this.setState.
Ahora, en la última instrucción if, llamamos de nuevo al método winGame y verificamos si alguien gana el juego en esta ronda. Si alguien gana el juego, mostramos una ventana emergente con Alerta para el usuario, como se muestra en la siguiente captura de pantalla.
Paso 4: Comprueba quién ganó el juego Tic Tac Toe
Ahora echemos un vistazo a nuestro método winGame.
winGame = () => {
if(board[0] != "question" && board[0] == board[1] && board[1] == board[2]){
return board[0]
}else if(board[3] != "question" && board[3] == board[4] && board[4] == board[5]){
return board[3]
}else if(board[6] != "question" && board[6] == board[7] && board[7] == board[8]){
return board[6]
}else if(board[0] != "question" && board[0] == board[3] && board[3] == board[6]){
return board[0]
}else if(board[1] != "question" && board[1] == board[4] && board[4] == board[7]){
return board[1]
}else if(board[2] != "question" && board[2] == board[5] && board[5] == board[8]){
return board[2]
}else if(board[0] != "question" && board[0] == board[4] && board[4] == board[8]){
return board[0]
}else if(board[2] != "question" && board[2] == board[4] && board[4] == board[6]){
return board[2]
}else{
return ""
}
}
en un tres en raya juego, tenemos 8 patrones para ganar el juego, como se muestra en la imagen de abajo.
Entonces, en esta función, usando las condiciones si verificamos si un jugador detecta alguno de estos patrones, y luego devolvemos ese valor.
Ahora, ¿qué pasa si el usuario quiere restaurar el juego? Tenemos una función llamada reiniciar el juego también para esto.
Esta característica es bastante simple.
resetGame = () => {
this.setState({isCross:true})
board=["question","question","question","question","question","question","question","question","question"]
}
Volvemos a establecer el turno en Cruz, luego establecemos todas las posiciones del tablero en no capturadas o «preguntas».
Paso 5: Diseño de interfaz de juego Tic Tac Toe
Ahora que hemos cubierto toda la parte de funcionalidad, pasemos a la parte de diseño de nuestro tres en raya juego.
En la función de representación, devolvemos la vista principal cuyo estilo se denomina contenedor, por lo que tenemos algo de texto para el título principal.
<View style={styles.container}>
<Text style={{color:"#01CBC6",fontSize:50}}>Tic Tac Toe</Text>
</View>
Ahora dentro creamos una nueva vista para cada una de las tres filas de un tres en raya tabla y establezca su dirección de flexión para remar.
Ahora dentro de él, hemos creado 3 objetos de icono de Entypo encerrados por Opacidad tangible para que se pueda hacer clic en ellos.
<View style={{flexDirection:"row"}}>
<TouchableOpacity style={{margin:30,padding:20}} onPress={() => this.drawItem(0)}>
<Entypo name={board[0]} size={32} color={this.chooseItemColor(0)} />
</TouchableOpacity>
<TouchableOpacity style={{margin:30,padding:20}} onPress={() => this.drawItem(1)}>
<Entypo name={board[1]} size={32} color={this.chooseItemColor(1)} />
</TouchableOpacity>
<TouchableOpacity style={{margin:30,padding:20}} onPress={() => this.drawItem(2)}>
<Entypo name={board[2]} size={32} color={this.chooseItemColor(2)} />
</TouchableOpacity>
</View>
El icono de cada objeto Entypo se configura usando el nombre prop y asignándole el valor del tablero en esa posición para que muestre los elementos respectivos. Se hizo lo mismo para el color usando selectItemColor.
Este objeto Entypo está envuelto en TouchableOpacity cuyo objeto onPress se establece en drawItem para que, cuando se haga clic, sea capturado por el jugador de turno cuando se hizo clic en esta posición en particular.
Eso es todo, y ahora vamos a crear tres de estas filas para un total de 9 posiciones.
Finalmente, agreguemos un botón Restablecer para restablecer el juego.
<TouchableOpacity style={{margin:30,flexDirection:"row",padding:20,backgroundColor:"#E74292",width:200,borderRadius:20}} onPress={()=>this.resetGame()}>
<Entypo name="controller-jump-to-start" size={32} color="#2B2B52" />
<Text style={{color:"#2B2B52",fontSize:20}}>Restart Game</Text>
</TouchableOpacity>
Paso 6: Ejecute la aplicación
Nuestra aplicación ahora está completa; vamos a ver cómo se ve.
Puede ejecutar esta aplicación usando el comando npm start en la línea de comandos del directorio de su proyecto.
Espero que hayas disfrutado haciendo esto. tres en raya aplicación con nosotros. Ahora vamos a ponernos al día con la siguiente publicación. Únase a nuestra lista de correo para recibir las últimas actualizaciones directamente en su bandeja de entrada.