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 border = self.attachAsset('grid_border', {
anchorX: 0.5,
anchorY: 0.5
});
var background = self.attachAsset('grid_cell', {
anchorX: 0.5,
anchorY: 0.5
});
self.blockType = null;
self.blockGraphics = null;
self.placeBlock = function (blockType) {
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;
LK.setScore(LK.getScore() + 1);
scoreTxt.setText(LK.getScore());
} 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 = 20;
var CELL_SIZE = 80;
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', 'empty'];
// Create score display
var scoreTxt = new Text2('0', {
size: 60,
fill: 0xFFFFFF
});
scoreTxt.anchor.set(0.5, 0);
LK.gui.top.addChild(scoreTxt);
scoreTxt.setText(LK.getScore());
// Create toolbar background
var toolbarBg = game.addChild(LK.getAsset('toolbar_bg', {
x: 50,
y: 366,
anchorX: 0.5,
anchorY: 0.5
}));
// Create toolbar buttons
function createToolbar() {
for (var i = 0; i < blockTypes.length; i++) {
var button = new ToolbarButton(blockTypes[i]);
button.x = 50;
button.y = 150 + i * 90;
toolbarButtons.push(button);
game.addChild(button);
}
updateToolbarSelection();
}
function updateToolbarSelection() {
for (var i = 0; i < toolbarButtons.length; i++) {
toolbarButtons[i].setSelected(toolbarButtons[i].blockType === selectedBlockType);
}
}
// 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
}; ===================================================================
--- original.js
+++ change.js
@@ -1,6 +1,156 @@
-/****
+/****
+* Plugins
+****/
+var tween = LK.import("@upit/tween.v1");
+
+/****
+* Classes
+****/
+var GridCell = Container.expand(function () {
+ var self = Container.call(this);
+ var border = self.attachAsset('grid_border', {
+ anchorX: 0.5,
+ anchorY: 0.5
+ });
+ var background = self.attachAsset('grid_cell', {
+ anchorX: 0.5,
+ anchorY: 0.5
+ });
+ self.blockType = null;
+ self.blockGraphics = null;
+ self.placeBlock = function (blockType) {
+ 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;
+ LK.setScore(LK.getScore() + 1);
+ scoreTxt.setText(LK.getScore());
+ } 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: 0x000000
-});
\ No newline at end of file
+ backgroundColor: 0x34495e
+});
+
+/****
+* Game Code
+****/
+// Game constants
+var GRID_SIZE = 20;
+var CELL_SIZE = 80;
+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', 'empty'];
+// Create score display
+var scoreTxt = new Text2('0', {
+ size: 60,
+ fill: 0xFFFFFF
+});
+scoreTxt.anchor.set(0.5, 0);
+LK.gui.top.addChild(scoreTxt);
+scoreTxt.setText(LK.getScore());
+// Create toolbar background
+var toolbarBg = game.addChild(LK.getAsset('toolbar_bg', {
+ x: 50,
+ y: 366,
+ anchorX: 0.5,
+ anchorY: 0.5
+}));
+// Create toolbar buttons
+function createToolbar() {
+ for (var i = 0; i < blockTypes.length; i++) {
+ var button = new ToolbarButton(blockTypes[i]);
+ button.x = 50;
+ button.y = 150 + i * 90;
+ toolbarButtons.push(button);
+ game.addChild(button);
+ }
+ updateToolbarSelection();
+}
+function updateToolbarSelection() {
+ for (var i = 0; i < toolbarButtons.length; i++) {
+ toolbarButtons[i].setSelected(toolbarButtons[i].blockType === selectedBlockType);
+ }
+}
+// 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
+};
\ No newline at end of file
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