User prompt
I don't want to drag and drop tiles. I just want to click it to add the bar
User prompt
Please fix the bug: 'TypeError: Cannot read properties of undefined (reading '0')' in or related to this line: 'if (prevGrid[row][col]) {' Line Number: 326
User prompt
Make it harder every level
User prompt
I want to see my level and my point
User prompt
Make the layer system
User prompt
No every color tile need to 3 or it's multiples
User prompt
I can't clear the layer because tiles not matching at the end. Make tile count 3 or it's multiplication
User prompt
I want a multiple layer design. Every level layers gonna increase
User prompt
I want to select tiles and grab to bottom bar to match same shaped tiles
User prompt
Please fix the bug: 'TypeError: Cannot read properties of null (reading 'row')' in or related to this line: 'var temp = board[tileA.row][tileA.col];' Line Number: 132
Code edit (1 edits merged)
Please save this source code
User prompt
Tile Match Mania
Initial prompt
Make me a basic tile matching game for mobile devices
/**** * Classes ****/ // BottomBar class to hold matched tiles var BottomBar = Container.expand(function () { var self = Container.call(this); self.tiles = []; // Add a tile to the bar self.addTile = function (tileType) { var tile = new Tile(); tile.setType(tileType); tile.x = 100 + self.tiles.length * 200; tile.y = 0; self.addChild(tile); self.tiles.push(tile); }; // Remove all tiles (e.g. after a match) self.clearTiles = function () { for (var i = 0; i < self.tiles.length; i++) { self.tiles[i].destroy(); } self.tiles = []; }; return self; }); // --- Tile grid setup --- // Tile class for draggable/selectable tiles var Tile = Container.expand(function () { var self = Container.call(this); // Properties self.tileType = null; // e.g. 'blue', 'green', etc. self.selected = false; // Attach asset based on type self.setType = function (type) { self.tileType = type; if (self.tileAsset) { self.removeChild(self.tileAsset); } var assetId = 'tile_' + type; self.tileAsset = self.attachAsset(assetId, { anchorX: 0.5, anchorY: 0.5 }); }; // Visual feedback for selection self.setSelected = function (selected) { self.selected = selected; if (self.tileAsset) { self.tileAsset.alpha = selected ? 0.7 : 1.0; } }; // Track last position for drag logic self.lastX = 0; self.lastY = 0; return self; }); /**** * Initialize Game ****/ var game = new LK.Game({ backgroundColor: 0x000000 }); /**** * Game Code ****/ // --- Tile grid setup --- // --- Multi-layer/level support --- var gridRows = 6; var gridCols = 6; var tileTypes = ['blue', 'green', 'orange', 'purple', 'red', 'yellow']; var tileSize = 180; var gridOffsetX = (2048 - gridCols * tileSize) / 2 + tileSize / 2; var gridOffsetY = 400; var selectedTile = null; var draggingTile = null; // Layer/level variables var currentLayer = 1; var maxLayers = 1; var tileLayers = []; // Array of tileGrid arrays, one per layer function createLayer(layerNum) { var tileGrid = []; for (var row = 0; row < gridRows; row++) { tileGrid[row] = []; var _loop = function _loop() { tile = new Tile(); type = tileTypes[Math.floor(Math.random() * tileTypes.length)]; tile.setType(type); tile.x = gridOffsetX + col * tileSize; tile.y = gridOffsetY + row * tileSize; tile.row = row; tile.col = col; tile.layer = layerNum; tile.visible = layerNum === currentLayer; tileGrid[row][col] = tile; game.addChild(tile); tile.setVisible = function (vis) { this.tileAsset.alpha = vis ? 1.0 : 0.0; this.visible = vis; }; // --- Layer progression logic --- function isLayerCleared(layerNum) { var tileGrid = tileLayers[layerNum - 1]; for (var row = 0; row < gridRows; row++) { for (var col = 0; col < gridCols; col++) { if (tileGrid[row][col]) return false; } } return true; } game.update = function (origUpdate) { return function () { if (origUpdate) origUpdate.call(this); // Check if current layer is cleared if (isLayerCleared(currentLayer)) { // If more layers exist, go to next if (currentLayer < maxLayers) { // Hide previous layer's tiles var prevGrid = tileLayers[currentLayer - 1]; for (var row = 0; row < gridRows; row++) { for (var col = 0; col < gridCols; col++) { if (prevGrid[row][col]) prevGrid[row][col].setVisible(false); } } currentLayer++; // Show new layer's tiles var newGrid = tileLayers[currentLayer - 1]; for (var row = 0; row < gridRows; row++) { for (var col = 0; col < gridCols; col++) { if (newGrid[row][col]) newGrid[row][col].setVisible(true); } } } else { // Add a new layer (increase difficulty) maxLayers++; var newLayerGrid = createLayer(maxLayers); tileLayers.push(newLayerGrid); // Hide previous layer's tiles var prevGrid = tileLayers[currentLayer - 1]; for (var row = 0; row < gridRows; row++) { for (var col = 0; col < gridCols; col++) { if (prevGrid[row][col]) prevGrid[row][col].setVisible(false); } } currentLayer = maxLayers; // Show new layer's tiles var newGrid = tileLayers[currentLayer - 1]; for (var row = 0; row < gridRows; row++) { for (var col = 0; col < gridCols; col++) { if (newGrid[row][col]) newGrid[row][col].setVisible(true); } } } } }; }(game.update); tile.setVisible(layerNum === currentLayer); }, tile, type; for (var col = 0; col < gridCols; col++) { _loop(); } } return tileGrid; } // Initialize first layer tileLayers = []; tileLayers.push(createLayer(1)); maxLayers = 1; currentLayer = 1; // Helper to get current layer's grid function getCurrentGrid() { return tileLayers[currentLayer - 1]; } // --- Bottom bar setup --- var bottomBar = new BottomBar(); bottomBar.x = (2048 - tileSize * 5) / 2; bottomBar.y = 2732 - 250; game.addChild(bottomBar); // --- Drag/select logic --- game.down = function (x, y, obj) { // Find tile under pointer var tileGrid = getCurrentGrid(); for (var row = 0; row < gridRows; row++) { for (var col = 0; col < gridCols; col++) { var tile = tileGrid[row][col]; if (tile && Math.abs(tile.x - x) < tileSize / 2 && Math.abs(tile.y - y) < tileSize / 2) { selectedTile = tile; tile.setSelected(true); draggingTile = tile; tile.lastX = tile.x; tile.lastY = tile.y; return; } } } }; game.move = function (x, y, obj) { if (draggingTile) { draggingTile.x = x; draggingTile.y = y; } }; game.up = function (x, y, obj) { if (draggingTile) { // Check if released over bottom bar var barY = bottomBar.y; if (y > barY - tileSize / 2) { // Add to bottom bar if not already full if (bottomBar.tiles.length < 5) { bottomBar.addTile(draggingTile.tileType); LK.getSound('pop').play(); // Remove from grid game.removeChild(draggingTile); var tileGrid = getCurrentGrid(); for (var row = 0; row < gridRows; row++) { for (var col = 0; col < gridCols; col++) { if (tileGrid[row][col] === draggingTile) { tileGrid[row][col] = null; } } } } else { // Snap back if bar is full draggingTile.x = draggingTile.lastX; draggingTile.y = draggingTile.lastY; } } else { // Snap back to grid draggingTile.x = draggingTile.lastX; draggingTile.y = draggingTile.lastY; } draggingTile.setSelected(false); draggingTile = null; selectedTile = null; } }; // --- Matching logic in bottom bar --- game.update = function () { // Check for match in bottom bar (3+ same type in a row) if (bottomBar.tiles.length >= 3) { var lastType = bottomBar.tiles[0].tileType; var matchCount = 1; for (var i = 1; i < bottomBar.tiles.length; i++) { if (bottomBar.tiles[i].tileType === lastType) { matchCount++; } else { lastType = bottomBar.tiles[i].tileType; matchCount = 1; } if (matchCount >= 3) { // Remove matched tiles for (var j = i - 2; j <= i; j++) { bottomBar.tiles[j].destroy(); } // Remove from array bottomBar.tiles.splice(i - 2, 3); // Add score LK.setScore(LK.getScore() + 10); break; } } } };
===================================================================
--- original.js
+++ change.js
@@ -65,40 +65,125 @@
/****
* Game Code
****/
// --- Tile grid setup ---
+// --- Multi-layer/level support ---
var gridRows = 6;
var gridCols = 6;
var tileTypes = ['blue', 'green', 'orange', 'purple', 'red', 'yellow'];
-var tileGrid = [];
var tileSize = 180;
var gridOffsetX = (2048 - gridCols * tileSize) / 2 + tileSize / 2;
var gridOffsetY = 400;
var selectedTile = null;
var draggingTile = null;
-// Create grid of tiles
-for (var row = 0; row < gridRows; row++) {
- tileGrid[row] = [];
- for (var col = 0; col < gridCols; col++) {
- var tile = new Tile();
- var type = tileTypes[Math.floor(Math.random() * tileTypes.length)];
- tile.setType(type);
- tile.x = gridOffsetX + col * tileSize;
- tile.y = gridOffsetY + row * tileSize;
- tile.row = row;
- tile.col = col;
- tileGrid[row][col] = tile;
- game.addChild(tile);
+// Layer/level variables
+var currentLayer = 1;
+var maxLayers = 1;
+var tileLayers = []; // Array of tileGrid arrays, one per layer
+function createLayer(layerNum) {
+ var tileGrid = [];
+ for (var row = 0; row < gridRows; row++) {
+ tileGrid[row] = [];
+ var _loop = function _loop() {
+ tile = new Tile();
+ type = tileTypes[Math.floor(Math.random() * tileTypes.length)];
+ tile.setType(type);
+ tile.x = gridOffsetX + col * tileSize;
+ tile.y = gridOffsetY + row * tileSize;
+ tile.row = row;
+ tile.col = col;
+ tile.layer = layerNum;
+ tile.visible = layerNum === currentLayer;
+ tileGrid[row][col] = tile;
+ game.addChild(tile);
+ tile.setVisible = function (vis) {
+ this.tileAsset.alpha = vis ? 1.0 : 0.0;
+ this.visible = vis;
+ };
+ // --- Layer progression logic ---
+ function isLayerCleared(layerNum) {
+ var tileGrid = tileLayers[layerNum - 1];
+ for (var row = 0; row < gridRows; row++) {
+ for (var col = 0; col < gridCols; col++) {
+ if (tileGrid[row][col]) return false;
+ }
+ }
+ return true;
+ }
+ game.update = function (origUpdate) {
+ return function () {
+ if (origUpdate) origUpdate.call(this);
+ // Check if current layer is cleared
+ if (isLayerCleared(currentLayer)) {
+ // If more layers exist, go to next
+ if (currentLayer < maxLayers) {
+ // Hide previous layer's tiles
+ var prevGrid = tileLayers[currentLayer - 1];
+ for (var row = 0; row < gridRows; row++) {
+ for (var col = 0; col < gridCols; col++) {
+ if (prevGrid[row][col]) prevGrid[row][col].setVisible(false);
+ }
+ }
+ currentLayer++;
+ // Show new layer's tiles
+ var newGrid = tileLayers[currentLayer - 1];
+ for (var row = 0; row < gridRows; row++) {
+ for (var col = 0; col < gridCols; col++) {
+ if (newGrid[row][col]) newGrid[row][col].setVisible(true);
+ }
+ }
+ } else {
+ // Add a new layer (increase difficulty)
+ maxLayers++;
+ var newLayerGrid = createLayer(maxLayers);
+ tileLayers.push(newLayerGrid);
+ // Hide previous layer's tiles
+ var prevGrid = tileLayers[currentLayer - 1];
+ for (var row = 0; row < gridRows; row++) {
+ for (var col = 0; col < gridCols; col++) {
+ if (prevGrid[row][col]) prevGrid[row][col].setVisible(false);
+ }
+ }
+ currentLayer = maxLayers;
+ // Show new layer's tiles
+ var newGrid = tileLayers[currentLayer - 1];
+ for (var row = 0; row < gridRows; row++) {
+ for (var col = 0; col < gridCols; col++) {
+ if (newGrid[row][col]) newGrid[row][col].setVisible(true);
+ }
+ }
+ }
+ }
+ };
+ }(game.update);
+ tile.setVisible(layerNum === currentLayer);
+ },
+ tile,
+ type;
+ for (var col = 0; col < gridCols; col++) {
+ _loop();
+ }
}
+ return tileGrid;
}
+// Initialize first layer
+tileLayers = [];
+tileLayers.push(createLayer(1));
+maxLayers = 1;
+currentLayer = 1;
+// Helper to get current layer's grid
+function getCurrentGrid() {
+ return tileLayers[currentLayer - 1];
+}
// --- Bottom bar setup ---
var bottomBar = new BottomBar();
bottomBar.x = (2048 - tileSize * 5) / 2;
bottomBar.y = 2732 - 250;
game.addChild(bottomBar);
// --- Drag/select logic ---
game.down = function (x, y, obj) {
// Find tile under pointer
+ var tileGrid = getCurrentGrid();
for (var row = 0; row < gridRows; row++) {
for (var col = 0; col < gridCols; col++) {
var tile = tileGrid[row][col];
if (tile && Math.abs(tile.x - x) < tileSize / 2 && Math.abs(tile.y - y) < tileSize / 2) {
@@ -128,8 +213,9 @@
bottomBar.addTile(draggingTile.tileType);
LK.getSound('pop').play();
// Remove from grid
game.removeChild(draggingTile);
+ var tileGrid = getCurrentGrid();
for (var row = 0; row < gridRows; row++) {
for (var col = 0; col < gridCols; col++) {
if (tileGrid[row][col] === draggingTile) {
tileGrid[row][col] = null;