Upit | Learn about creating the game GridCraft Builder with gen AI
Play
game-community-background
game-pic

18

0

11mo

Playit
/**** 
* Plugins
****/ 
var tween = LK.import("@upit/tween.v1");

/**** 
* Classes
****/ 
var GridCell = Container.expand(function () {
	var self = Container.call(this);
	var background = self.attachAsset('grid_cell', {
		anchorX: 0.5,
		anchorY: 0.5
	});
	self.blockType = null;
	self.blockGraphics = null;
	self.placeBlock = function (blockType) {
		if (self.blockType === blockType) return; // Skip if same block type
		if (self.blockGraphics) {
			self.removeChild(self.blockGraphics);
		}
		if (blockType && blockType !== 'empty') {
			self.blockGraphics = self.attachAsset(blockType + '_block', {
				anchorX: 0.5,
				anchorY: 0.5
			});
			self.blockType = blockType;
		} else {
			self.blockGraphics = null;
			self.blockType = null;
		}
	};
	self.removeBlock = function () {
		if (self.blockGraphics) {
			self.removeChild(self.blockGraphics);
			self.blockGraphics = null;
			self.blockType = null;
		}
	};
	self.down = function (x, y, obj) {
		if (selectedBlockType === 'empty') {
			self.removeBlock();
		} else if (self.blockType === null) {
			self.placeBlock(selectedBlockType);
		} else {
			self.removeBlock();
		}
	};
	return self;
});
var ToolbarButton = Container.expand(function (blockType) {
	var self = Container.call(this);
	self.blockType = blockType;
	var background = self.attachAsset('toolbar_button', {
		anchorX: 0.5,
		anchorY: 0.5
	});
	self.selectedBorder = self.attachAsset('toolbar_selected', {
		anchorX: 0.5,
		anchorY: 0.5
	});
	self.selectedBorder.visible = false;
	if (blockType !== 'empty') {
		var blockPreview = self.attachAsset(blockType + '_block', {
			anchorX: 0.5,
			anchorY: 0.5,
			scaleX: 0.8,
			scaleY: 0.8
		});
	}
	self.setSelected = function (selected) {
		self.selectedBorder.visible = selected;
	};
	self.down = function (x, y, obj) {
		selectedBlockType = self.blockType;
		updateToolbarSelection();
	};
	return self;
});

/**** 
* Initialize Game
****/ 
var game = new LK.Game({
	backgroundColor: 0x34495e
});

/**** 
* Game Code
****/ 
// Game constants
var GRID_SIZE = 15;
var CELL_SIZE = 120;
var GRID_START_X = 200;
var GRID_START_Y = 200;
// Game variables
var selectedBlockType = 'stone';
var gridCells = [];
var toolbarButtons = [];
var blockTypes = ['stone', 'wood', 'metal', 'glass', 'grass', 'water', 'brick', 'sand', 'ice', 'lava', 'dirt', 'empty'];
// Create block name display text
var blockNameText = new Text2('STONE', {
	size: 60,
	fill: 0xFFFFFF
});
blockNameText.anchor.set(0.5, 0.5);
blockNameText.x = 1024;
blockNameText.y = 150;
LK.gui.top.addChild(blockNameText);
// Create title using blocks
var titleContainer = new Container();
titleContainer.x = 1024;
titleContainer.y = 100;
// Define the letter patterns using 1s and 0s (7x7 grid for each letter)
var letterPatterns = {
	'B': [[1, 1, 1, 1, 1, 0, 0], [1, 0, 0, 0, 0, 1, 0], [1, 0, 0, 0, 0, 1, 0], [1, 1, 1, 1, 1, 0, 0], [1, 0, 0, 0, 0, 1, 0], [1, 0, 0, 0, 0, 1, 0], [1, 1, 1, 1, 1, 0, 0]],
	'U': [[1, 0, 0, 0, 0, 1, 0], [1, 0, 0, 0, 0, 1, 0], [1, 0, 0, 0, 0, 1, 0], [1, 0, 0, 0, 0, 1, 0], [1, 0, 0, 0, 0, 1, 0], [1, 0, 0, 0, 0, 1, 0], [0, 1, 1, 1, 1, 0, 0]],
	'I': [[0, 1, 1, 1, 1, 0, 0], [0, 0, 1, 0, 0, 0, 0], [0, 0, 1, 0, 0, 0, 0], [0, 0, 1, 0, 0, 0, 0], [0, 0, 1, 0, 0, 0, 0], [0, 0, 1, 0, 0, 0, 0], [0, 1, 1, 1, 1, 0, 0]],
	'L': [[1, 0, 0, 0, 0, 0, 0], [1, 0, 0, 0, 0, 0, 0], [1, 0, 0, 0, 0, 0, 0], [1, 0, 0, 0, 0, 0, 0], [1, 0, 0, 0, 0, 0, 0], [1, 0, 0, 0, 0, 0, 0], [1, 1, 1, 1, 1, 1, 0]],
	'D': [[1, 1, 1, 1, 0, 0, 0], [1, 0, 0, 0, 1, 0, 0], [1, 0, 0, 0, 0, 1, 0], [1, 0, 0, 0, 0, 1, 0], [1, 0, 0, 0, 0, 1, 0], [1, 0, 0, 0, 1, 0, 0], [1, 1, 1, 1, 0, 0, 0]],
	'E': [[1, 1, 1, 1, 1, 1, 0], [1, 0, 0, 0, 0, 0, 0], [1, 0, 0, 0, 0, 0, 0], [1, 1, 1, 1, 1, 0, 0], [1, 0, 0, 0, 0, 0, 0], [1, 0, 0, 0, 0, 0, 0], [1, 1, 1, 1, 1, 1, 0]],
	'R': [[1, 1, 1, 1, 1, 0, 0], [1, 0, 0, 0, 0, 1, 0], [1, 0, 0, 0, 0, 1, 0], [1, 1, 1, 1, 1, 0, 0], [1, 0, 0, 1, 0, 0, 0], [1, 0, 0, 0, 1, 0, 0], [1, 0, 0, 0, 0, 1, 0]],
	'!': [[0, 0, 1, 0, 0, 0, 0], [0, 0, 1, 0, 0, 0, 0], [0, 0, 1, 0, 0, 0, 0], [0, 0, 1, 0, 0, 0, 0], [0, 0, 1, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0], [0, 0, 1, 0, 0, 0, 0]]
};
var word = 'BUILDER!';
var blockSize = 20;
var letterSpacing = 160;
var startX = -(word.length * letterSpacing) / 2;
for (var i = 0; i < word.length; i++) {
	var letter = word[i];
	var pattern = letterPatterns[letter];
	if (pattern) {
		for (var row = 0; row < pattern.length; row++) {
			for (var col = 0; col < pattern[row].length; col++) {
				if (pattern[row][col] === 1) {
					var block = LK.getAsset('stone_block', {
						anchorX: 0.5,
						anchorY: 0.5,
						scaleX: 0.2,
						scaleY: 0.2
					});
					block.x = startX + i * letterSpacing + col * blockSize;
					block.y = row * blockSize;
					titleContainer.addChild(block);
				}
			}
		}
	}
}
LK.gui.top.addChild(titleContainer);
// Animate title moving to very top with tween
tween(titleContainer, {
	x: 250,
	y: 0
}, {
	duration: 1000,
	easing: tween.easeOut
});
// Create change grid button above toolbar
var changeGridButton = game.addChild(LK.getAsset('toolbar_button', {
	x: 1024,
	y: 2450,
	anchorX: 0.5,
	anchorY: 0.5,
	scaleX: 2,
	scaleY: 1
}));
// Make button gray and non-functional as requested
changeGridButton.tint = 0x808080;
// Add text for the change grid button
var changeGridText = new Text2('CHANGE GRID', {
	size: 40,
	fill: 0xFFFFFF
});
changeGridText.anchor.set(0.5, 0.5);
changeGridText.x = 1024;
changeGridText.y = 2450;
game.addChild(changeGridText);
// Create toolbar background
var toolbarBg = game.addChild(LK.getAsset('toolbar_bg', {
	x: 1024,
	y: 2632,
	anchorX: 0.5,
	anchorY: 0.5,
	scaleX: 26,
	scaleY: 2
}));
// Create toolbar buttons
function createToolbar() {
	for (var i = 0; i < blockTypes.length; i++) {
		var button = new ToolbarButton(blockTypes[i]);
		button.x = 400 + i * 150;
		button.y = 2632;
		toolbarButtons.push(button);
		game.addChild(button);
	}
	updateToolbarSelection();
}
function updateToolbarSelection() {
	for (var i = 0; i < toolbarButtons.length; i++) {
		toolbarButtons[i].setSelected(toolbarButtons[i].blockType === selectedBlockType);
	}
	// Update block name display
	var displayName = selectedBlockType === 'empty' ? 'ERASER' : selectedBlockType.toUpperCase();
	blockNameText.setText(displayName);
}
// Create grid
function createGrid() {
	for (var row = 0; row < GRID_SIZE; row++) {
		gridCells[row] = [];
		for (var col = 0; col < GRID_SIZE; col++) {
			var cell = new GridCell();
			cell.x = GRID_START_X + col * CELL_SIZE;
			cell.y = GRID_START_Y + row * CELL_SIZE;
			gridCells[row][col] = cell;
			game.addChild(cell);
		}
	}
}
// Initialize game elements
createToolbar();
createGrid();
// Game update loop
game.update = function () {
	// No continuous updates needed for this game
};
Showing 51 to 33 of 33
12

Images

A 2D top down pixelated grass block. In-Game asset. 2d. High contrast. No shadows Make a 2D top down flat image of pixelated stone. In-Game asset. 2d. High contrast. No shadows Make a 2d top-down flat image of pixelated water. In-Game asset. 2d. High contrast. No shadows Make a 2D top down flat image of oak wood. In-Game asset. 2d. High contrast. No shadows Make a 2D top down pixelated flat image of glass. In-Game asset. 2d. High contrast. No shadows Make a 2D top down flat image of Metal. In-Game asset. 2d. High contrast. No shadows Make a 2D top down pixelated flat image of brick. In-Game asset. 2d. High contrast. No shadows Make a 2D top down pixelated flat image of ice. In-Game asset. 2d. High contrast. No shadows Make a 2D top down pixelated flat image of Sand. In-Game asset. 2d. High contrast. No shadows Make a 2d top-down pixelated flat image of Lava. In-Game asset. 2d. High contrast. No shadows Make a 2D image of a pixelated desert. In-Game asset. 2d. High contrast. No shadows Make a 2D top-down pixelated flat image of concrete. In-Game asset. 2d. High contrast. No shadows Make a 2D top-down pixelated flat image of Dirt. In-Game asset. 2d. High contrast. No shadows

Used plugins

@upit/tween
Home
Discover
Play
Profile