Upit | Learn about creating the game Reversi with gen AI

Play

Reversi

trevorhill

Reversi

1.8K

Playit

A simple Reversi game, with an AI competitor

#strategy

#boardgames

#ai

#puzzle

#mindgames

Creation History

User prompt

only flip the correct tiles

User prompt

add a check for valid tiles to flip

User prompt

after adding an AI tile, make it the players turn

User prompt

after adding a player tile, make it the AI turn

User prompt

wait for the player to move first

User prompt

place a white tile in a valid square when it is the AI turn

User prompt

alternate turns between the AI and the player

User prompt

create code to flip tiles in a valid move

User prompt

define the valid move so that a player can only add a tile to a square that will flip an opponent's tile

User prompt

alternate turns between the player and AI

User prompt

define the valid move so that the player can add a tile to a square that will flip an AI tile

User prompt

add a player tile when the player clicks on a valid squre

User prompt

create a valid move asset for valid move tiles

User prompt

create an asset type for valid move tiles

User prompt

create a separate tile class for valid move tiles, using a new asset

User prompt

Fix Bug: 'Uncaught TypeError: self.parent.isValidMove is not a function' in this line: 'if (self.parent.isValidMove(i, j, 'black', self.parent.board)) {' Line Number: 20

User prompt

create a guide overlay to show which tiles are valid moves

User prompt

Fix Bug: 'TypeError: self.parent.isValidMove is not a function' in this line: 'if (self.parent.playerTurn === 'black' && self.state === 'empty' && self.parent.isValidMove(i, j, 'black')) {' Line Number: 20

User prompt

add a black player tile when the player clicks a valid move

User prompt

Fix Bug: 'ReferenceError: playerTurn is not defined' in this line: 'if (playerTurn === 'black' && tile.state === 'empty' && isValidMove(i, j, 'black', board)) {' Line Number: 45

User prompt

create a 3 second countdown at the start of the game before the AI moves

User prompt

at the start of the game, make the AI move first

User prompt

Fix Bug: 'ReferenceError: playerTurn is not defined' in this line: 'if (playerTurn === 'black' && self.state === 'empty' && isValidMove(i, j, 'black', board)) {' Line Number: 20

var AI = function () {
	this.makeMove = function (board) {};
};
var Tile = Container.expand(function () {
	var self = Container.call(this);
	var tileGraphics = self.createAsset('tile', 'Game Tile', .5, .5);
	self.state = 'empty';
	self.flip = function (newState) {
		self.state = newState;
		if (self.state === 'black') {
			self.createAsset('blackTile', 'Black Tile', .5, .5);
		} else if (self.state === 'white') {
			self.createAsset('whiteTile', 'White Tile', .5, .5);
		}
	};
});
var ValidMoveTile = Container.expand(function () {
	var self = Container.call(this);
	var validMoveTileGraphics = self.createAsset('validMoveTile', 'Valid Move Tile', .5, .5);
	self.state = 'valid';
	self.show = function () {
		self.visible = true;
	};
	self.hide = function () {
		self.visible = false;
	};
});
var Game = Container.expand(function () {
	var self = Container.call(this);
	var board = [];
	var ai = new AI();
	var playerTurn = 'black';
	var tile = new Tile();
	var boardWidth = 8 * tile.width;
	var boardHeight = 8 * tile.height;
	var boardStartX = (2048 - boardWidth) / 2;
	var boardStartY = (2732 - boardHeight) / 2;
	for (var i = 0; i < 8; i++) {
		board[i] = [];
		for (var j = 0; j < 8; j++) {
			var tile = self.addChild(new Tile());
			tile.x = boardStartX + i * tile.width;
			tile.y = boardStartY + j * tile.height;
			board[i][j] = tile;
			tile.on('down', function (obj) {
				if (playerTurn === 'black' && tile.state === 'empty' && isValidMove(i, j, 'black', board)) {
					tile.flip('black');
					playerTurn = 'white';
					ai.makeMove(board);
				}
			});
		}
	}
	board[3][3].flip('white');
	board[3][4].flip('black');
	board[4][3].flip('black');
	board[4][4].flip('white');
	ai.makeMove(board);
	function isValidMove(x, y, color, board) {
		var dx, dy, x1, y1, count;
		for (dx = -1; dx <= 1; dx++) {
			for (dy = -1; dy <= 1; dy++) {
				x1 = x + dx;
				y1 = y + dy;
				count = 0;
				while (x1 >= 0 && x1 < 8 && y1 >= 0 && y1 < 8 && board[x1][y1].state !== 'empty' && board[x1][y1].state !== color) {
					count++;
					x1 += dx;
					y1 += dy;
				}
				if (count > 0 && x1 >= 0 && x1 < 8 && y1 >= 0 && y1 < 8 && board[x1][y1].state === color) {
					return true;
				}
			}
		}
		return false;
	}
	LK.on('tick', function () {});
});

===================================================================
--- original.js
+++ change.js
@@ -17,8 +17,14 @@
 var ValidMoveTile = Container.expand(function () {
 	var self = Container.call(this);
 	var validMoveTileGraphics = self.createAsset('validMoveTile', 'Valid Move Tile', .5, .5);
 	self.state = 'valid';
+	self.show = function () {
+		self.visible = true;
+	};
+	self.hide = function () {
+		self.visible = false;
+	};
 });
 var Game = Container.expand(function () {
 	var self = Container.call(this);
 	var board = [];

Showing 26 to 50 of 67

1 2 3

Images

create a flat, round, black counter.
Single Game Texture. In-Game asset. 2d. Blank background. High contrast. No shadows.

create a flat, round, white counter.
Single Game Texture. In-Game asset. 2d. Blank background. High contrast. No shadows.

create a flat green square with sharp corners and a very thin darker outline
Single Game Texture. In-Game asset. 2d. Blank background. High contrast. No shadows.