Implementing the Word Grid & Touch Selection

By
adminCgz
-
0
41

🚀 Tutorial #9 – Fully Implemented & Optimized for Mobile & Web

 

📌 SEO Optimization

SEO Title:

“React Native Word Search: Implementing Word Grid & Touch Selection”

Short Meta Description (Max 60 characters):

“Build a Word Search grid with touch selection in React Native.”

Full Meta Description:

“Learn how to create a Word Search grid in React Native, populate it with letters, and implement precise touch selection using PanResponder. This tutorial follows best practices with TypeScript and JSON data integration.”

Keywords:

React Native Word Search, Implement Word Grid React Native, Word Search touch selection, TypeScript best practices, Mobile word search game, PanResponder React Native

📌 Introduction

In this tutorial, we will:
✅ Create the “Start Game” screen with a ListView to select a language.
✅ Fetch data from a JSON file (similar to Firebase Realtime Database).
✅ Implement TypeScript best practices for handling structured JSON data.
✅ Generate a 12×12 word search grid using definitions as hidden words.
✅ Ensure smooth navigation between screens using Expo Router.
✅ Implement accurate touch selection using PanResponder.

By the end of this tutorial, your Word Search game will display a functional grid with touch detection and smooth interaction across mobile and web! 🚀

📌 Step 1: Setting Up the “Start Game” Screen

Before implementing the grid, we need a language selection screen where users can choose a language. The game will load words from a JSON file based on the selected language.

1️⃣ Fetching Language Data from JSON

We structure our JSON file (jsonData) to store words for multiple languages.

json
{
"Spanish": [
{
"AudioName": "Buenos dias",
"Category": "Greetings",
"Definition": "good morning",
"Word": "Buenos días"
},
{
"AudioName": "Gracias",
"Category": "General",
"Definition": "thank you",
"Word": "Gracias"
}
],
"Italian": [
{
"AudioName": "Messaggio",
"Definition": "message",
"Word": "messaggio"
}
]
}

This data is stored in a TypeScript-friendly format for better type safety.

2️⃣ Creating the ListView for Language Selection

📍 Location: app/game.tsx

We display the available languages in a FlatList:

typescript
import { View, Text, FlatList, TouchableOpacity } from "react-native";
import { useRouter } from "expo-router";
import { globalStyles } from "@/src/globalStyles";
import jsonData from "@/src/data.json"; // Simulating Firebase data

export default function GameSelection() {
const router = useRouter();
const languages = Object.keys(jsonData); // Extract languages from JSON

return (
<View style={globalStyles.container}>
<Text style={globalStyles.title}>Select a Language</Text>
<FlatList
data={languages}
keyExtractor={(item) => item}
renderItem={({ item }) => (
<TouchableOpacity
style={globalStyles.button}
onPress={() => router.push(`/wordSearch?lang=${item}`)}
>
<Text style={globalStyles.buttonText}>{item}</Text>
</TouchableOpacity>
)}
/>
<TouchableOpacity style={globalStyles.button} onPress={() => router.back()}>
<Text style={globalStyles.buttonText}>{"Back"}</Text>
</TouchableOpacity>
</View>
);
}

✅ When the user selects a language, it navigates to the Word Search game.​game

📌 Step 2: Implementing the Word Search Grid

Once a language is selected, we generate a word search grid filled with random letters.

1️⃣ Creating the Grid Structure

📍 Location: app/wordSearch.tsx

We use a nested array to store the letters.

typescript
const createGrid = (): GridCell[][] => {
return Array.from({ length: GRID_SIZE }, (_, row) =>
Array.from({ length: GRID_SIZE }, (_, col) => ({
letter: generateRandomLetter(),
row,
col,
}))
);
};

✅ Each grid cell contains a letter and its row/column position.

2️⃣ Filling the Grid with Random Letters

A function generates random uppercase letters:

typescript
const generateRandomLetter = () => String.fromCharCode(65 + Math.floor(Math.random() * 26));

✅ This ensures the grid is filled with letters even if words are not placed yet.

📌 Step 3: Implementing Touch Selection

Now that we have the grid, we implement touch selection to highlight letters when tapped.

1️⃣ Measuring the Grid Position

Before selecting letters, we need to measure the grid’s exact position on the screen.

typescript
const gridRef = useRef<View>(null);
const [gridLayout, setGridLayout] = useState({ x: 0, y: 0, width: 0, height: 0 });

useEffect(() => {
if (gridRef.current) {
gridRef.current.measure((x, y, width, height, pageX, pageY) => {
setGridLayout({ x: pageX, y: pageY, width, height });
});
}
}, []);

✅ This ensures that pageX, pageY from the touch event correctly maps to grid cells.​wordSearch

2️⃣ Handling Touch Events

We use PanResponder to track finger movements and highlight selected letters.

typescript
const handleTouch = (event: GestureResponderEvent) => {
const { pageX, pageY } = event.nativeEvent;

const row = Math.floor((pageY - gridLayout.y) / CELL_SIZE);
const col = Math.floor((pageX - gridLayout.x) / CELL_SIZE);

if (row >= 0 && row < GRID_SIZE && col >= 0 && col < GRID_SIZE) {
setSelectedCells((prev) => {
if (!prev.some((cell) => cell.row === row && cell.col === col)) {
return [...prev, { row, col }];
}
return prev;
});
}
};

✅ This ensures that only the correct letter is highlighted when touched.​wordSearch

3️⃣ Implementing PanResponder for Touch Handling

We set up PanResponder to handle continuous touch input.

typescript
const panResponder = useRef(
PanResponder.create({
onStartShouldSetPanResponder: () => true,
onPanResponderMove: handleTouch,
onPanResponderRelease: () => setLastSelectedCell(null),
})
).current;

✅ This allows continuous selection while dragging.​wordSearch

📌 Conclusion

🎯 Now, your Word Search game is fully interactive!
✅ Users can select a language and generate a word grid.
✅ Touch selection works correctly, highlighting only the intended cell.
✅ Navigation buttons are restored for a complete user experience.

🚀 Now, the Word Search game has accurate touch selection, fully restored navigation, and an optimized user experience! 🎮🔥

Try it out and let me know if the tutorial is clear! 🚀

RELATED ARTICLESMORE FROM AUTHOR