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

18

0

11mo

Playit

Creation History

User prompt

Add the feature to change backgrounds

User prompt

Add more blocks

User prompt

Make the toolbar bigger

User prompt

Make the toolbar at the bottom of the screen

User prompt

Can you make the grid squares bigger and the blocks bigger

Code edit (1 edits merged)

Please save this source code

User prompt

GridCraft Builder

Initial prompt

Make a 2D top down game where the player can place down different blocks on a grid using left click or touch controls

/**** 
* 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 26 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