Hire the author: Martin K
Voice recognition game ReactJs citation here
GitHub link for this project GitHub
Introduction
You can speak to your character and communicate with others in voice-integrated games. Innovative gaming firms advocate this concept to make gaming more accessible to the visually impaired and disabled. The voice control system reduces the learning curve for newcomers because the user does not need to figure out how to use the controls to get started.
We will develop a game that makes use of voice recognition using ReactJs. In general, ReactJs applications are pretty simple – in fact, they’re a terrific exercise if you’re a React newbie looking to improve your skills. But have you ever created a game that allows users to interact with it using voice commands? As a result, the experience is more complex and exciting. So that’s how we’ll create this voice recognition game using ReactJS in this tutorial.
How it works
- To communicate with the game, press the spacebar. Whenever you press it, the game listens.
- The player can navigate the grid by saying right, left, down, or up.
- If you say the name of any color, the grid blocks will change to that color!
- You can also greet and thank people.
Tips
Speech recognition might be unreliable at times. Therefore, speak clearly so that Talky-Blocky can comprehend what you’re saying!
Don’t be afraid to mix commands. “Could you go right for me, Block-Talks, then down, down again, down again, take a left, and turn that block pink for me?”
Photo Preview

Glossary
node_module: It is in this location that you will install the dependencies. Please do not edit any code in this folder. If you make an error in this folder, you can have it automatically generated by running npm install from the command line.
src: This is where the main project’s folders are located.
package.json: This JSON file contains dependency declarations, scripts, and project information.
yarn.lock: This file ensures that all machines are running the same version of dependencies. Because it is generated automatically, you should not edit it directly.
Step by Step Procedure
Using create-react-app is the quickest way to begin a new React project.
After install npm, launch Terminal and type the following command:
npm install -g create-react-app |
Make a project folder in the directory where you want to save your project:
cd path/to/workspace
create-react-app blocktalks-game-app |
While your project is being created, sit back and relax. It doesn’t take long, though. Then, from the terminal, navigate to your project folder and start your game by typing:
cd blocktalks-game-app |
npm start |
It should launch the website on localhost:3000 automatically. When you see this screen, give yourself a high-five because the fun has just begun. Open your project in your preferred IDE.
Step 1: Creating the components folder
Let’s make a folder called components now. It will include our main component, Display.js. Create the Display.js file as shown below
import React, { useEffect, useContext } from "react"; | |
import StateContext from "../StateContext"; | |
// Import Components | |
import Grid from "./Grid"; | |
import TalkyBlocky from "./TalkyBlocky"; | |
export default function Display() { | |
const { talkyBlocky, grid, talkyIsTalking, talkyBackground } = useContext( | |
StateContext | |
); | |
return ( | |
<div> | |
<Grid grid={grid} /> | |
<TalkyBlocky | |
talkyBlocky={talkyBlocky} | |
talkyIsTalking={talkyIsTalking} | |
talkyBackground={talkyBackground} | |
/> | |
</div> | |
); | |
} |
Step 2: Adding the GridBlock.js component
By default, the grid block has 12 sections, with the option of adding gaps between each section by passing in a grid-gap prop. GridBlock.js can be customized to have a specific grid quantity by including a grid section property. The gridlock component can accept GridStyles object properties.
import styled, { css } from "styled-components"; | |
const GridBlock = styled.div` | |
${props => | |
props.size && | |
css` | |
width: ${props.size - Math.floor(props.size / 10)}px; | |
height: ${props.size - Math.floor(props.size / 10)}px; | |
border: ${Math.floor(props.size / 20)}px solid black; | |
`}; | |
${props => | |
props.color && | |
css` | |
background-color: rgb(${props.color}); | |
`}; | |
`; | |
export default GridBlock; |
Step 3: Adding the Grid component
A grid cell set to auto will appear inline until the end of the block. Upon reaching this point, a new row is created. Grid cells can be individually placed using the gridRowBlocks prop or span across multiple grids using the grid row prop.
// IMPORTS ///////////////////////////////////////////////////////////////////////// | |
import React from "react"; | |
import styled from "styled-components"; | |
// Components | |
import GridBlock from "./GridBlock"; | |
export default function Grid(props) { | |
const grid = props.grid; | |
const GridContainer = styled.div` | |
position: absolute; | |
left: 0px; | |
top 0px; | |
border: 5px solid white; | |
display: inline-block; | |
`; | |
const gridRows = []; | |
const GridRowContainer = styled.div` | |
display: flex; | |
`; | |
let blockKey = 0; | |
let gridRowKey = 0; | |
for ( | |
let heightIndex = 0; | |
heightIndex < grid.height; | |
heightIndex++, gridRowKey++ | |
) { | |
const gridRowBlocks = []; | |
for ( | |
let widthIndex = 0; | |
widthIndex < grid.width; | |
widthIndex++, blockKey++ | |
) { | |
gridRowBlocks[widthIndex] = ( | |
<GridBlock | |
key={blockKey} | |
size={grid.blockSize} | |
color={grid.RGBs[widthIndex][heightIndex]} | |
/> | |
); | |
} | |
gridRows[heightIndex] = ( | |
<GridRowContainer key={gridRowKey}>{gridRowBlocks}</GridRowContainer> | |
); | |
} | |
return <GridContainer>{gridRows}</GridContainer>; | |
} |
Step 4: Creating the App.js file
First, add the following functions to your App.js file after importing our main component, Display.js.
import React from 'react'; | |
import './App.css'; | |
import {StateContextProvider} from '../StateContext' | |
import Display from '../components/Display'; | |
function App() { | |
return ( | |
<div className="App"> | |
<StateContextProvider> | |
<Display /> | |
</StateContextProvider> | |
</div> | |
); | |
} | |
export default App; |
Step 5: Create a dictionary as a helper for directions and colorsÂ
In the project folder, create a helper folder and place the Dictionary.js file, which contains the game’s instructions and colors. As shown below, the majority of the commands used by the player in our ReactJs voice recognition game will be added to the dictionary.
export const directions = { | |
up: "up", | |
down: "down", | |
left: "left", | |
right: "right", | |
rights: "right", | |
write: "right" | |
}; | |
export const nonCommands = { | |
hello: ["Hi! How's it going?", "Yo!", "Hey there."], | |
thanks: [ | |
"your welcome, easy fix", | |
"no sweat, easy fix", | |
"piece of cake", | |
"It's not like I have a choice" | |
] | |
}; | |
export const colors = { | |
cornsilk: "255,248,220", | |
almond: "255,235,205", | |
bisque: "255,228,196", | |
navajowhite: "255,222,173", | |
wheat: "245,222,179", | |
burlywood: "222,184,135" | |
}; |
Step 6: Creating the Grid Reducer
Several small reducers control the state of the grid component rather than a single object. As a result, component updates are more efficient and easier to maintain. However, when a developer wants to import the grid component with their custom store, this can confuse.
const gridBlockSize = 100; | |
const gridWidth = Math.floor(window.innerWidth / gridBlockSize); | |
const gridHeight = Math.floor(window.innerHeight / gridBlockSize); | |
const gridRGBs = []; | |
export default function gridReducer(grid, action) { | |
switch (action.type) { | |
case "BUILD_GRID": | |
for (let widthIndex = 0; widthIndex < gridWidth; widthIndex++) { | |
const gridColumn = []; | |
for (let heightIndex = 0; heightIndex < gridHeight; heightIndex++) { | |
gridColumn[heightIndex] = "255, 255, 255"; | |
} | |
gridRGBs[widthIndex] = gridColumn; | |
} | |
return { | |
blockSize: gridBlockSize, | |
width: gridWidth, | |
height: gridHeight, | |
RGBs: gridRGBs | |
}; | |
case "CHANGE_GRID_BLOCK_COLOR": | |
grid.RGBs[action.position[0]][action.position[1]] = action.rgb; | |
return grid; | |
} | |
} |
Developers will typically use the grid component but not the built-in store, instead relying on a store they create for their application state. It is the preferred design, and you can add grid reducers to your root reducer easily.
Future Directions
There are still some people who prefer traditional joysticks/buttons and keyboard/mouse combinations for communicating with and controlling onscreen characters. Despite their innovation, voice recognition games have yet to achieve true success. They’ve never gotten over the thrill of it all.
The massive amount of speech data required to make it work is one of the challenges. Large amounts of speech data are difficult to gather, so video games must work with third-party providers who have spent years developing efficient workflows and technology.
It is likely that the formation of these alliances will pave the way for more accurate, localized, and widespread speech recognition technology in video games in the future.
Learning Strategies and Tools
ReactJs documentation is necessary to develop a voice recognition game in ReactJs. In ReactJs, the voice recognition game app would not have been possible without speech synthesis. It simplifies the integration of voice into our ReactJs app. In addition, printing or logging relevant messages and errors will help you with debugging. Finally, StackOverflow was very helpful in developing the ReactJs voice recognition game.
Reflective Analysis
The game begins as a simple react app that can be generated in the same way that any other react app can. You’ve mastered ReactJs and created your very own voice recognition game. You’ve also learned a lot of Javascript syntax, particularly the array methods that allow your website to listen to you.
Conclusion
In this post, we learned about React and how to use it to create a web game, as well as how to use voice integration. The territory ahead of voice-based games is rich in untapped potential, but we must not overlook or dismiss the challenges that lie ahead. Processing times will almost certainly be reduced, and more complex systems will be developed, but we still have a long way to go. Meanwhile, in order to achieve true breakthroughs and reach out to the larger gaming community, developers must actively seek opportunities to capitalize on the strengths of the technology.
Check out our other articles on ReactJs on the LD blog.Â
How to create a Quiz app using React, Material UI & Heroku
How to create a 3D block-based game in ReactJs
Effortless documentation with ESDoc for react components
How to use customized tailwind colors and fonts for your project.
How to create a GIS (Geographic Information System) in ReactJS
Finally, the code used in this article is available on Github.
I tested the react project and the voice recognition feature worked like charm. I changed the background color of the game to red via background color in App.css; Showing an interesting feature of React i.e. real-time view of the changes.