Introduction to nexacroAPI Static Methods

Static methods are provided in the form of functions that either extend the methods offered by JavaScript or offer features necessary for app implementation. Since these are static methods, they can be used directly without the need for instantiation or declaration.

Creating a Simple Tic-Tac-Toe Game

Use the setTimeout method to simulate playing the game against a computer.

Example

The game is won when a full line—horizontal, vertical, or diagonal—is completed. Clicking a cell marks it with "X" for the player, and after a delay, the computer marks a randomly chosen cell with "O".

sample_nexacro_01.xfdl

Core features used in the example

setTimeout

A method that executes a specified function after a set time. Unlike a timer, it runs only once.

How to implement an example

Assign IDs to the Static components sequentially from "Static00" to "Static08".

The TextArea component displays game status updates, and the Button is used to reset the game.

All Static components share the same onclick event handler function.

this.Static_onclick = function(obj:nexacro.Static,e:nexacro.ClickEventInfo)
{
	this.handlePlayerMove(e.fromobject);
};

In the handlePlayerMove function, the selected cell index is determined via the Static component’s ID, and the text is updated accordingly. After each move, it checks for a win or draw. If the game continues, it uses setTimeout to delay the computer’s turn.

The checkWinner function checks for a win or draw based on the rules of Tic-Tac-Toe. If a win is detected, the background of the winning cells is changed to yellow.

this.handlePlayerMove = function (targetObj) {
	let index = Number((targetObj.id).substring(7));
	if (!isPlayerTurn || board[index] || gameOver) return;
	
	board[index] = player;
	targetObj.text = player;

	const result = this.checkWinner(player, "Player");
	if (result.winner) {
		return;
	}
	if (result.isDraw) {
		return;
	}
	this.TextArea00.insertText("It's the computer's turn. Thinking about"+"\n");
	isPlayerTurn = false;
	nexacro.setTimeout(this, this.computerMove, 2000);
}

this.checkWinner = function(symbol, messageTarget) {
	const winPatterns = [
		[0,1,2],[3,4,5],[6,7,8],
		[0,3,6],[1,4,7],[2,5,8],
		[0,4,8],[2,4,6]
	];
	for (let pattern of winPatterns) {
		if (pattern.every(function(idx) {
			return board[idx] === symbol;
		})) {
			for(let index of pattern) {
				this.Div00.form.components["Static0"+index].background = "yellow";
			}
			this.TextArea00.insertText(messageTarget + " wins!\n");
			gameOver = true;
			return { winner: symbol, pattern: pattern, isDraw: false };
		}
	}
    if (!board.includes(null)) {
        this.TextArea00.insertText("Tie!\n");
        gameOver = true;
        return { winner: null, pattern: null, isDraw: true };
    }
    return { winner: null, pattern: null, isDraw: false };
}

The computerMove function checks for empty cells and randomly selects one.

this.computerMove = function () {
	if (gameOver) return;
	
	const emptyIndices = board.map((cell, idx) => cell ? null : idx).filter(idx => idx !== null);
	if (emptyIndices.length === 0) return;
	const randomIndex = emptyIndices[Math.floor(Math.random() * emptyIndices.length)];
	board[randomIndex] = computer;
	
	this.Div00.form.components["Static0"+randomIndex].text = computer;
	this.TextArea00.insertText("The index specified by the computer: "+randomIndex+"\n");

	const result = this.checkWinner(player, "Computer");
	if (result.winner) {
		return;
	}
	if (result.isDraw) {
		return;
	}
	isPlayerTurn = true;
	this.TextArea00.insertText("It's your turn."+"\n");
}

this.Button00_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)
{
	for (let i = 0; i < 9; i++) {
		board[i] = null;
		this.Div00.form.components["Static0"+i].text = "";
		this.Div00.form.components["Static0"+i].background = "";
	}
	gameOver = false;
	this.TextArea00.value = "It's your turn."+"\n";
};