Desarrollar 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.

• Node.js instalado

• Expo CLI (npm install -g expo-cli)

• App Expo Go en el móvil

• Visual Studio Code o cualquier editor

npx create-expo-app TresEnRayaMultimedia --template blank
cd TresEnRayaMultimedia

npx expo install expo-av

Dentro 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.

import 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,
  },
});

npx expo start

Escanea el QR con tu móvil. Al tocar un cuadro, se coloca una ficha y suena el audio.

• Agregar 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

Desarrollar 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.

• Node.js instalado

• Expo CLI (npm install -g expo-cli)

• App Expo Go en el móvil

• Visual Studio Code o cualquier editor

npx create-expo-app TresEnRayaMultimedia --template blank
cd TresEnRayaMultimedia

npx expo install expo-av

Dentro 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.

import 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,
  },
});

npx expo start

Escanea el QR con tu móvil. Al tocar un cuadro, se coloca una ficha y suena el audio.

• Agregar 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