Tic-Tac-Toe Webpage | michaelmohan

The webpage runs a session of tic-tac-toe, storing the history of the moves in a session. The program can be found here. Some screenshots of the game in progress are shown below. There is also a video below to give a brief overview. More details about the capabilities of the webpage and its implementation are given below too.

To play, press and hold the enter key. To stop, release the enter key.

This is a webpage designed to display games of tic-tac-toe with a historical record of previous moves made. The webpage was developed by following this tutorial on the React website. The exercise used a combination of a number of front-end web technologies. React.JS was used in conjunction with JavaScript to develop the web application that runs the tic-tac-toe game. CSS (Cascading Style Sheets) was used for some basic formatting of the webpage display the tic-tac-toe game. Node.js and npm (node package manager) was used to install and run certain packages. Npx (node package execute) was used to generate an initial React application template and serve was used to deploy the environment onto a static server on the local area network (more information about this is given here). The tutorial also served as an introduction to the JSX (JavaScript XML) syntax that can be used with React to simplify expressions, and with more recent JavaScript features introduced in ES6 (ECMAScript 6) such as arrow functions, classes, let and const statements. I used VSCode in conjunction with the ESLint and Babel JavaScript extensions to aid with development of the JavaScript, React and CSS code.

The webpage displays a 3X3 grid of buttons to represent the tic-tac-toe board. Along with an indication of which players turn it is to make a move. Once a button is clicked, the webpage is updated to reflect that an ‘X’ or ‘O’ has been entered into that portion of the grid. After a button has been populated, clicking on the button again has no effect. As players take turns and moves are made, the grid continues to be updated in real time to reflect the state of the board. This continues until either a player has won or until there are no more moves to make and the game results in a draw. In order to restart a game, the webpage can be refreshed at any time to reset the board to the initial state.

Beside the grid, the webpage also displays buttons representing the state of the game at each move. This list of buttons gets added to as new moves are made. If the player clicks on one of these buttons, it reverts the board back to the state it was in when the corresponding move was made, allowing players to repeat previous moves differently. Once a player reverts to a previous move and repeats the move, the history is updated to reflect this. Overall, the tutorial allowed me to get a better idea of how front end web development is undertaken for more interactive web applications. It also gave me a good overview of the fundamental concepts used in React and how they can work in practice; components props and state.