1.0.3 • Published 3 years ago

code-tic-tac-toe v1.0.3

Weekly downloads
-
License
ISC
Repository
github
Last release
3 years ago

Tic Tac Toe Engine Demo

An engine created to make it simple to integrate TicTacToe computer gaming into any major platform, including Angular, React JS, and VUE Js.

It has a "Easy" and "Hard" game mode for single player against the computer.

How to use

  • npm install 'code-tic-tac-toe'

  • Then go to the project where you want to use this package and import code-tic-tac-toe

import {
	TTTEngine,
	Player,
	PlayingValue,
	Result,
	ResultStatus,
	DifficultyLevel,
} from  'code-tic-tac-toe';
...
  • Initialize the TTTEngine
this.tttEngine = new  TTTEngine();
  • Initialize Player details
this.player = {
	name:  'Player_Name',
	value:  PlayingValue.cross, // (CROSS, CIRCLE)
	difficultyLevel:  DifficultyLevel.hard, // (EASY, HARD)
};
this.tttEngine.setPlayer(this.player);
  • Play move tttEngine.playMove(playedIndex)
const  res: Result = this.tttEngine.playMove(box.index);
  • Handle response and update the state of the DOM element accordingly
handlePlayedResponse(res: Result, box) {
	/* Handle Response from move played */
	/* Check for WIN, DRAW OR OK status */
	if (
		res.status === ResultStatus.win ||
		res.status === ResultStatus.draw ||
		res.status === ResultStatus.ok
	) {
		/* Update computer index value to reflect in the HTML */
		const  computerPlayedIndex = res.computerMoveIndex;
		/* Update Player index value to reflect in the HTML */
		const  playerPlayedIndex = res.playerMoveIndex;
		if (
			computerPlayedIndex !== null &&
			typeof  computerPlayedIndex !== 'undefined'
		) {
			this.updateIndexPlayedValue(
			res.computerMoveIndex,
			this.player.value === PlayingValue.cross
			? PlayingValue.circle
			: PlayingValue.cross
			);
		}
		if (
			playerPlayedIndex !== null &&
			typeof  playerPlayedIndex !== 'undefined'
		) {
			this.updateIndexPlayedValue(res.playerMoveIndex, this.player.value);
		}
		/* If Game Status is WIN OR DRAW, show message and provide reset option */
		if (res.status === ResultStatus.win || res.status === ResultStatus.draw) {
			const  isDraw = res.status === ResultStatus.draw;
			const  message = 'Game Over, ' + (!isDraw ? ('WON BY: ' + res.player) : ('Status: ' + res.status));
			console.log(message);
			this.initGame(); // Reset Game
		}
		return;
	}
}

Demo - http://inder.me

Tutorial - https://shorturl.at/xRTV1