Upit | Learn about creating the game Tic Tac Toe Classic v1. 3 with gen AI
Play
game-community-background
game-pic

34

1

10mo

Playit
Classic Tic Tac Toe game where players alternate placing X's and O's on a 3x3 grid, competing to get three marks in a row first.
#TicTacToe
#ClassicGames
#PuzzleGame
#Strategy
#TwoPlayer

Creation History

User prompt

También el nuevo modo que es " pvsp" qué dos jugadores se enfrentan y en que consiga mayor puntuación en 10 minutos, gana. Y 2 nuevos colores. ↪💡 Consider importing and using the following plugins: @upit/tween.v1, @upit/storage.v1

User prompt

Haz el tablero más grande en el modo "4x4" y se agrega nueva skin.

User prompt

Que no se separe el botón de estadísticas con el de botón de skins,juntalos. Además coloca un nuevo modo que es "4x4" qué el tablero es tamaño de 4x4 y tendrás que hacer 3 en raya.

User prompt

También arregla sobre que el botón de volver y reinicio están en el menú pero no quiero que estén ahí y además coloca ordenadamente los botones del menú..

User prompt

Cuando se toca un nivel, que solo aparezca el tablero de tic tac toe y no otra cosa. Y ARREGLA TODOS LOS ERRORES ↪💡 Consider importing and using the following plugins: @upit/storage.v1

User prompt

Ahora se puede tocar el botón de "modo historia" y te llevará a tres niveles. El primer nivel es con un bot de dificultad muy fácil. El segundo nivel es con un bot de dificultad fácil. Y el tercer nivel es un bot de dificultad medio ↪💡 Consider importing and using the following plugins: @upit/storage.v1

User prompt

Pero arregla el error de cuando vuelvo con el botón de "volver", aparece el texto " juego guardado" y también el de reinicio y volver en el menú. Arregla ↪💡 Consider importing and using the following plugins: @upit/storage.v1

User prompt

Se elimina el botón de "cargar juego". Además cuando estés en partida, va aver un botón de "volver" para volver al menú. ↪💡 Consider importing and using the following plugins: @upit/storage.v1

User prompt

Pero que el botón de "guardar" solo sirve para si te fuistes del juego (osea no estas jugando). Si esta guardado, se guardará todo. ↪💡 Consider importing and using the following plugins: @upit/storage.v1

User prompt

Arregla todos los errores y en el menú coloca un botón de "estadísticas" que puedes ver tus partidas ganadas y perdidas contra la IA. No te olvides arreglar los errores. ↪💡 Consider importing and using the following plugins: @upit/storage.v1

===================================================================
--- original.js
+++ change.js
@@ -171,8 +171,145 @@
 		glowEffect();
 	};
 	return self;
 });
+var GameBoard4x4 = Container.expand(function () {
+	var self = Container.call(this);
+	// Grid background - larger for 4x4
+	var gridBg = self.attachAsset('gridBackground', {
+		anchorX: 0.5,
+		anchorY: 0.5,
+		scaleX: 1.3,
+		scaleY: 1.3
+	});
+	// Grid lines - vertical (3 lines for 4x4)
+	var vLine1 = self.attachAsset('gridLine', {
+		anchorX: 0.5,
+		anchorY: 0.5,
+		x: -150,
+		rotation: Math.PI / 2,
+		scaleY: 1.3
+	});
+	var vLine2 = self.attachAsset('gridLine', {
+		anchorX: 0.5,
+		anchorY: 0.5,
+		x: -50,
+		rotation: Math.PI / 2,
+		scaleY: 1.3
+	});
+	var vLine3 = self.attachAsset('gridLine', {
+		anchorX: 0.5,
+		anchorY: 0.5,
+		x: 50,
+		rotation: Math.PI / 2,
+		scaleY: 1.3
+	});
+	var vLine4 = self.attachAsset('gridLine', {
+		anchorX: 0.5,
+		anchorY: 0.5,
+		x: 150,
+		rotation: Math.PI / 2,
+		scaleY: 1.3
+	});
+	// Grid lines - horizontal (3 lines for 4x4)
+	var hLine1 = self.attachAsset('gridLine', {
+		anchorX: 0.5,
+		anchorY: 0.5,
+		y: -150,
+		scaleX: 1.3
+	});
+	var hLine2 = self.attachAsset('gridLine', {
+		anchorX: 0.5,
+		anchorY: 0.5,
+		y: -50,
+		scaleX: 1.3
+	});
+	var hLine3 = self.attachAsset('gridLine', {
+		anchorX: 0.5,
+		anchorY: 0.5,
+		y: 50,
+		scaleX: 1.3
+	});
+	var hLine4 = self.attachAsset('gridLine', {
+		anchorX: 0.5,
+		anchorY: 0.5,
+		y: 150,
+		scaleX: 1.3
+	});
+	self.cells = [];
+	// Create 4x4 grid of cells
+	for (var row = 0; row < 4; row++) {
+		self.cells[row] = [];
+		for (var col = 0; col < 4; col++) {
+			var cell = new Cell(row, col);
+			cell.x = (col - 1.5) * 100;
+			cell.y = (row - 1.5) * 100;
+			// Scale down cells for 4x4 grid
+			var background = cell.children[0];
+			if (background) {
+				background.scaleX = 0.5;
+				background.scaleY = 0.5;
+			}
+			self.cells[row][col] = cell;
+			self.addChild(cell);
+		}
+	}
+	self.drawWinningLine = function (winningCells) {
+		// Calculate start and end positions
+		var startCell = winningCells[0];
+		var endCell = winningCells[2];
+		var startX = startCell.x;
+		var startY = startCell.y;
+		var endX = endCell.x;
+		var endY = endCell.y;
+		// Calculate line properties
+		var deltaX = endX - startX;
+		var deltaY = endY - startY;
+		var distance = Math.sqrt(deltaX * deltaX + deltaY * deltaY);
+		var angle = Math.atan2(deltaY, deltaX);
+		// Calculate center position for the line
+		var centerX = (startX + endX) / 2;
+		var centerY = (startY + endY) / 2;
+		// Create winning line with proper dimensions and positioning
+		var winningLine = self.attachAsset('winningLine', {
+			anchorX: 0.5,
+			anchorY: 0.5,
+			x: centerX,
+			y: centerY,
+			rotation: angle,
+			scaleX: 0,
+			width: distance + 40,
+			height: 8
+		});
+		// Animate the line drawing
+		tween(winningLine, {
+			scaleX: 1
+		}, {
+			duration: 800,
+			easing: tween.easeOut
+		});
+		// Add glowing effect by tweening alpha repeatedly
+		function glowEffect() {
+			tween(winningLine, {
+				alpha: 0.3
+			}, {
+				duration: 800,
+				easing: tween.easeInOut,
+				onFinish: function onFinish() {
+					tween(winningLine, {
+						alpha: 1
+					}, {
+						duration: 800,
+						easing: tween.easeInOut,
+						onFinish: glowEffect
+					});
+				}
+			});
+		}
+		glowEffect();
+	};
+	return self;
+});
 
 /**** 
 * Initialize Game
 ****/ 
@@ -185,10 +322,11 @@
 ****/ 
 var gameBoard;
 var currentPlayer = 'X';
 var gameState = 'menu'; // 'menu', 'modeSelection', 'settings', 'playing', 'gameOver', 'storyMode'
-var gameMode = 'twoPlayer'; // 'twoPlayer', 'ai', 'story'
+var gameMode = 'twoPlayer'; // 'twoPlayer', 'ai', 'story', 'fourByFour'
 var aiDifficulty = 'easy'; // 'veryEasy', 'easy', 'medium'
+var boardSize = 3; // Board size for current game mode
 var playerXScore = 0;
 var playerOScore = 0;
 var drawScore = 0;
 var currentLanguage = storage.language || 'spanish';
@@ -245,18 +383,18 @@
 	fill: 0x27ae60
 });
 saveCurrentGameButton.anchor.set(0.5, 0.5);
 saveCurrentGameButton.x = 2048 / 2;
-saveCurrentGameButton.y = 1600;
+saveCurrentGameButton.y = 1750;
 saveCurrentGameButton.visible = false;
 menuContainer.addChild(saveCurrentGameButton);
 var statsButton = new Text2('ESTADÍSTICAS', {
 	size: 80,
 	fill: 0xe67e22
 });
 statsButton.anchor.set(0.5, 0.5);
 statsButton.x = 2048 / 2;
-statsButton.y = 1750;
+statsButton.y = 1600;
 menuContainer.addChild(statsButton);
 var instructionsText = new Text2('Toca una celda vacía para colocar tu marca.\nConsigue tres en línea para ganar.\n¡Alterna turnos con tu oponente!', {
 	size: 70,
 	fill: 0xffffff,
@@ -303,15 +441,23 @@
 storyModeButton.anchor.set(0.5, 0.5);
 storyModeButton.x = 2048 / 2;
 storyModeButton.y = 1500;
 gameModeContainer.addChild(storyModeButton);
+var fourByFourButton = new Text2('MODO 4X4', {
+	size: 90,
+	fill: 0x9b59b6
+});
+fourByFourButton.anchor.set(0.5, 0.5);
+fourByFourButton.x = 2048 / 2;
+fourByFourButton.y = 1700;
+gameModeContainer.addChild(fourByFourButton);
 var backButton = new Text2('VOLVER', {
 	size: 80,
 	fill: 0x95a5a6
 });
 backButton.anchor.set(0.5, 0.5);
 backButton.x = 2048 / 2;
-backButton.y = 1700;
+backButton.y = 1900;
 gameModeContainer.addChild(backButton);
 gameModeContainer.visible = false;
 game.addChild(gameModeContainer);
 // Settings UI
@@ -547,8 +693,13 @@
 };
 storyModeButton.down = function (x, y, obj) {
 	showStoryModeSelection();
 };
+fourByFourButton.down = function (x, y, obj) {
+	gameMode = 'fourByFour';
+	boardSize = 4;
+	startGame();
+};
 backButton.down = function (x, y, obj) {
 	showMainMenu();
 };
 // Language selection events
@@ -607,9 +758,13 @@
 	storyModeContainer.visible = false;
 	gameState = 'playing';
 	hasActiveGame = true;
 	// Initialize game board
-	gameBoard = new GameBoard();
+	if (gameMode === 'fourByFour') {
+		gameBoard = new GameBoard4x4();
+	} else {
+		gameBoard = new GameBoard();
+	}
 	gameBoard.x = 2048 / 2;
 	gameBoard.y = 2732 / 2 - 100;
 	game.addChild(gameBoard);
 	// Current player indicator
@@ -693,37 +848,51 @@
 	}
 }
 function checkWinner() {
 	var cells = gameBoard.cells;
-	// Check rows
-	for (var row = 0; row < 3; row++) {
-		if (cells[row][0].state === cells[row][1].state && cells[row][1].state === cells[row][2].state && cells[row][0].state !== 'empty') {
-			highlightWinningCells([cells[row][0], cells[row][1], cells[row][2]]);
-			return cells[row][0].state;
+	var size = boardSize;
+	// Check rows - need 3 in a row for win
+	for (var row = 0; row < size; row++) {
+		for (var col = 0; col <= size - 3; col++) {
+			if (cells[row][col].state === cells[row][col + 1].state && cells[row][col + 1].state === cells[row][col + 2].state && cells[row][col].state !== 'empty') {
+				highlightWinningCells([cells[row][col], cells[row][col + 1], cells[row][col + 2]]);
+				return cells[row][col].state;
+			}
 		}
 	}
-	// Check columns
-	for (var col = 0; col < 3; col++) {
-		if (cells[0][col].state === cells[1][col].state && cells[1][col].state === cells[2][col].state && cells[0][col].state !== 'empty') {
-			highlightWinningCells([cells[0][col], cells[1][col], cells[2][col]]);
-			return cells[0][col].state;
+	// Check columns - need 3 in a row for win
+	for (var col = 0; col < size; col++) {
+		for (var row = 0; row <= size - 3; row++) {
+			if (cells[row][col].state === cells[row + 1][col].state && cells[row + 1][col].state === cells[row + 2][col].state && cells[row][col].state !== 'empty') {
+				highlightWinningCells([cells[row][col], cells[row + 1][col], cells[row + 2][col]]);
+				return cells[row][col].state;
+			}
 		}
 	}
-	// Check diagonals
-	if (cells[0][0].state === cells[1][1].state && cells[1][1].state === cells[2][2].state && cells[0][0].state !== 'empty') {
-		highlightWinningCells([cells[0][0], cells[1][1], cells[2][2]]);
-		return cells[0][0].state;
+	// Check diagonals (top-left to bottom-right)
+	for (var row = 0; row <= size - 3; row++) {
+		for (var col = 0; col <= size - 3; col++) {
+			if (cells[row][col].state === cells[row + 1][col + 1].state && cells[row + 1][col + 1].state === cells[row + 2][col + 2].state && cells[row][col].state !== 'empty') {
+				highlightWinningCells([cells[row][col], cells[row + 1][col + 1], cells[row + 2][col + 2]]);
+				return cells[row][col].state;
+			}
+		}
 	}
-	if (cells[0][2].state === cells[1][1].state && cells[1][1].state === cells[2][0].state && cells[0][2].state !== 'empty') {
-		highlightWinningCells([cells[0][2], cells[1][1], cells[2][0]]);
-		return cells[0][2].state;
+	// Check diagonals (top-right to bottom-left)
+	for (var row = 0; row <= size - 3; row++) {
+		for (var col = 2; col < size; col++) {
+			if (cells[row][col].state === cells[row + 1][col - 1].state && cells[row + 1][col - 1].state === cells[row + 2][col - 2].state && cells[row][col].state !== 'empty') {
+				highlightWinningCells([cells[row][col], cells[row + 1][col - 1], cells[row + 2][col - 2]]);
+				return cells[row][col].state;
+			}
+		}
 	}
 	return null;
 }
 function isBoardFull() {
 	var cells = gameBoard.cells;
-	for (var row = 0; row < 3; row++) {
-		for (var col = 0; col < 3; col++) {
+	for (var row = 0; row < boardSize; row++) {
+		for (var col = 0; col < boardSize; col++) {
 			if (cells[row][col].state === 'empty') {
 				return false;
 			}
 		}
@@ -832,10 +1001,10 @@
 	if (gameState !== 'playing') return;
 	var cells = gameBoard.cells;
 	var emptyCells = [];
 	// Find all empty cells
-	for (var row = 0; row < 3; row++) {
-		for (var col = 0; col < 3; col++) {
+	for (var row = 0; row < boardSize; row++) {
+		for (var col = 0; col < boardSize; col++) {
 			if (cells[row][col].state === 'empty') {
 				emptyCells.push(cells[row][col]);
 			}
 		}
@@ -943,9 +1112,13 @@
 	// Reset game state but keep scores
 	currentPlayer = 'X';
 	gameState = 'playing';
 	// Create new game board
-	gameBoard = new GameBoard();
+	if (gameMode === 'fourByFour') {
+		gameBoard = new GameBoard4x4();
+	} else {
+		gameBoard = new GameBoard();
+	}
 	gameBoard.x = 2048 / 2;
 	gameBoard.y = 2732 / 2 - 100;
 	game.addChild(gameBoard);
 	// Update UI
@@ -1086,8 +1259,9 @@
 		if (gameModeTitle) gameModeTitle.setText('SELECT GAME MODE');
 		if (twoPlayerButton) twoPlayerButton.setText('2 PLAYERS');
 		if (aiButton) aiButton.setText('VS ARTIFICIAL INTELLIGENCE');
 		if (storyModeButton) storyModeButton.setText('STORY MODE');
+		if (fourByFourButton) fourByFourButton.setText('4X4 MODE');
 		if (backButton) backButton.setText('BACK');
 		// Update settings texts
 		if (settingsTitle) settingsTitle.setText('SETTINGS');
 		if (languageLabel) languageLabel.setText('LANGUAGE:');
@@ -1124,8 +1298,9 @@
 		if (gameModeTitle) gameModeTitle.setText('SELECCIONA MODO DE JUEGO');
 		if (twoPlayerButton) twoPlayerButton.setText('2 JUGADORES');
 		if (aiButton) aiButton.setText('VS INTELIGENCIA ARTIFICIAL');
 		if (storyModeButton) storyModeButton.setText('MODO HISTORIA');
+		if (fourByFourButton) fourByFourButton.setText('MODO 4X4');
 		if (backButton) backButton.setText('VOLVER');
 		// Update settings texts
 		if (settingsTitle) settingsTitle.setText('AJUSTES');
 		if (languageLabel) languageLabel.setText('IDIOMA:');
@@ -1153,10 +1328,10 @@
 function saveGame() {
 	if (!gameBoard) return;
 	// Flatten board state to single array for storage compatibility
 	var flatBoardState = [];
-	for (var row = 0; row < 3; row++) {
-		for (var col = 0; col < 3; col++) {
+	for (var row = 0; row < boardSize; row++) {
+		for (var col = 0; col < boardSize; col++) {
 			flatBoardState.push(gameBoard.cells[row][col].state);
 		}
 	}
 	// Store each property separately to ensure compatibility
@@ -1165,8 +1340,9 @@
 	storage.savedGamePlayerOScore = playerOScore;
 	storage.savedGameDrawScore = drawScore;
 	storage.savedGameMode = gameMode;
 	storage.savedGameBoardState = flatBoardState;
+	storage.savedGameBoardSize = boardSize;
 	storage.hasSavedGame = true;
 	// Show save confirmation
 	var saveText = new Text2('JUEGO GUARDADO', {
 		size: 80,
@@ -1203,17 +1379,23 @@
 	playerOScore = storage.savedGamePlayerOScore;
 	drawScore = storage.savedGameDrawScore;
 	gameMode = storage.savedGameMode;
 	var flatBoardState = storage.savedGameBoardState;
-	// Create new game board
-	gameBoard = new GameBoard();
+	// Set board size based on game mode
+	if (gameMode === 'fourByFour') {
+		boardSize = 4;
+		gameBoard = new GameBoard4x4();
+	} else {
+		boardSize = 3;
+		gameBoard = new GameBoard();
+	}
 	gameBoard.x = 2048 / 2;
 	gameBoard.y = 2732 / 2 - 100;
 	game.addChild(gameBoard);
 	// Restore board state from flat array
 	var stateIndex = 0;
-	for (var row = 0; row < 3; row++) {
-		for (var col = 0; col < 3; col++) {
+	for (var row = 0; row < boardSize; row++) {
+		for (var col = 0; col < boardSize; col++) {
 			var cellState = flatBoardState[stateIndex];
 			if (cellState !== 'empty') {
 				gameBoard.cells[row][col].placeMark(cellState);
 			}
@@ -1263,8 +1445,9 @@
 	}
 	menuContainer.visible = true;
 	gameState = 'menu';
 	currentPlayer = 'X';
+	boardSize = 3; // Reset to default board size
 	hasActiveGame = false;
 }
 // Touch anywhere to restart when game is over
 game.down = function (x, y, obj) {
Showing 1 to 25 of 38
12

Used plugins

@upit/tween@upit/storage
Home
Discover
Play
Profile