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
view raw react.js hosted with ❤ by GitHub

Make a project folder in the directory where you want to save your project:

cd path/to/workspace

create-react-app blocktalks-game-app
view raw react.js hosted with ❤ by GitHub

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
view raw react.js hosted with ❤ by GitHub
npm start
view raw npm hosted with ❤ by GitHub

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>
);
}
view raw Display.js hosted with ❤ by GitHub

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;
view raw GridBlock.js hosted with ❤ by GitHub

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>;
}
view raw Grid.js hosted with ❤ by GitHub

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;
view raw App.js hosted with ❤ by GitHub

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"
};
view raw dictionary.js hosted with ❤ by GitHub

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;
}
}
view raw gridReducer.js hosted with ❤ by GitHub

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.

Hire the author: Martin K