Créer une application mobile

Ajout d'un clavier virtuel

Ajout d'un clavier virtuel pour diriger Pacman sur smartphone.

// App.js
import React, { useState } from 'react';
import { StyleSheet, View, TouchableOpacity, Text } from 'react-native';
import Labyrinthe from './Labyrinthe';
import genererLabyrinthe from './genererLabyrinthe';
import Pacman from './Pacman';

const labyrinthe = genererLabyrinthe(11, 11);

export default function App() {
  const [pacmanPosition, setPacmanPosition] = useState({ x: 1, y: 1 }); // Démarre en position x=1 et y=1

  function deplacerPacman(direction) {
    let nouvellePosition = { ...pacmanPosition };

    switch(direction) {
      case 'haut':
        nouvellePosition.y -= 1;
        break;
      case 'bas':
        nouvellePosition.y += 1;
        break;
      case 'gauche':
        nouvellePosition.x -= 1;
        break;
      case 'droite':
        nouvellePosition.x += 1;
        break;
      default:
        return; // Si la direction n'est pas reconnue, on ne fait rien.
    }

    // Vérifier si la nouvelle position est un chemin.
    if (labyrinthe[nouvellePosition.y] && labyrinthe[nouvellePosition.y][nouvellePosition.x] === 0) {
      setPacmanPosition(nouvellePosition);
    }
  }

  return (
    <View style={styles.container}>
      <View>
        <Labyrinthe labyrinthe={labyrinthe} />
        <Pacman position={pacmanPosition} />
      </View>
      <View style={styles.controls}>
        <TouchableOpacity onPress={() => deplacerPacman('haut')} style={styles.button}>
          <Text>↑</Text>
        </TouchableOpacity>
        <View style={styles.horizontalControls}>
          <TouchableOpacity onPress={() => deplacerPacman('gauche')} style={styles.button}>
            <Text>←</Text>
          </TouchableOpacity>
          <TouchableOpacity onPress={() => deplacerPacman('droite')} style={styles.button}>
            <Text>→</Text>
          </TouchableOpacity>
        </View>
        <TouchableOpacity onPress={() => deplacerPacman('bas')} style={styles.button}>
          <Text>↓</Text>
        </TouchableOpacity>
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
  controls: {
    flexDirection: 'column',
    alignItems: 'center',
    justifyContent: 'center',
    marginTop: 20,
  },
  horizontalControls: {
    flexDirection: 'row',
  },
  button: {
    padding: 10,
    margin: 5,
    backgroundColor: '#ddd',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

info

TouchableOpacity est un composant de base dans React Native qui rend n'importe quel composant tactile, c'est-à-dire qu'il peut réagir aux pressions de l'utilisateur. Il est donc souvent utilisé pour créer des boutons ou des zones interactives dans une application mobile.