# Creando un Tres en Raya (Tic-Tac-Toe / Gato)



**Published by:** [Frexus](https://paragraph.com/@frexus-2/)
**Published on:** 2025-07-31
**URL:** https://paragraph.com/@frexus-2/creando-un-tres-en-raya-tic-tac-toe-gato

## Content

Objetivo de la prácticaDesarrollar una app móvil interactiva de Tres en Raya / Gato / Tic-Tac-Toe con React Native con Expo, incorporando elementos multimedia donde:Se use sonido al colocar fichas.Se muestren imágenes como fichas (X y O).Se utilicen elementos visuales y botones táctiles.Requisitos previosNode.js instaladoExpo CLI (npm install -g expo-cli)App Expo Go en el móvilVisual Studio Code o cualquier editorPasos de la prácticaPaso 1: Crear el proyectonpx create-expo-app TresEnRayaMultimedia --template blank cd TresEnRayaMultimedia Paso 2: Instalar dependencia de sonidonpx expo install expo-av Paso 3: Estructura de carpetasDentro de la carpeta del proyecto, crea:/assets - x.png - o.png - clic.mp3 Se puede usar cualquier ícono PNG representando la X y la O, y un sonido para los clics.Paso 4: Código base en App.jsimport React, { useState } from 'react'; import { View, TouchableOpacity, Image, StyleSheet, Text } from 'react-native'; import { Audio } from 'expo-av'; // Cargar imágenes const xImg = require('./assets/x.png'); const oImg = require('./assets/o.png'); const clickSound = require('./assets/click.mp3'); export default function App() { const [board, setBoard] = useState(Array(9).fill(null)); const [xTurn, setXTurn] = useState(true); const [sound, setSound] = useState(); const playSound = async () => { const { sound } = await Audio.Sound.createAsync(clickSound); setSound(sound); await sound.playAsync(); }; const handlePress = (index) => { if (board[index] !== null) return; const newBoard = [...board]; newBoard[index] = xTurn ? 'X' : 'O'; setBoard(newBoard); setXTurn(!xTurn); playSound(); }; const renderBox = (index) => ( <TouchableOpacity style={styles.box} onPress={() => handlePress(index)}> {board[index] === 'X' && <Image source={xImg} style={styles.icon} />} {board[index] === 'O' && <Image source={oImg} style={styles.icon} />} </TouchableOpacity> ); return ( <View style={styles.container}> <Text style={styles.title}>Tres en Raya</Text> <View style={styles.board}> {board.map((_, index) => renderBox(index))} </View> </View> ); } const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: '#f4f4f8', alignItems: 'center', justifyContent: 'center', }, title: { fontSize: 28, marginBottom: 30, fontWeight: 'bold', }, board: { width: 300, height: 300, flexDirection: 'row', flexWrap: 'wrap', }, box: { width: 100, height: 100, borderWidth: 1, borderColor: '#444', alignItems: 'center', justifyContent: 'center', }, icon: { width: 60, height: 60, }, }); Paso 5: Prueba la appnpx expo start Escanea el QR con tu móvil. Al tocar un cuadro, se coloca una ficha y suena el audio.Mejoras sugeridasAgregar verificación de ganador.Mostrar animaciones al ganar.Reiniciar el juego con un botón.Incluir música de fondo con expo-av.Pulsa aquí para ver el código base

## Publication Information

- [Frexus](https://paragraph.com/@frexus-2/): Publication homepage
- [All Posts](https://paragraph.com/@frexus-2/): More posts from this publication
- [RSS Feed](https://api.paragraph.com/blogs/rss/@frexus-2): Subscribe to updates