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 = 3; var gridCols = 3; 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 = []; // --- Ensure each color's tile count is a multiple of 3 --- var totalTiles = gridRows * gridCols; var colorCount = tileTypes.length; var baseCount = Math.floor(totalTiles / colorCount / 3) * 3; // base multiple of 3 per color var colorCounts = []; var remaining = totalTiles; for (var i = 0; i < colorCount; i++) { colorCounts[i] = baseCount; remaining -= baseCount; } // Distribute remaining tiles, always in multiples of 3 for (var i = 0; remaining > 0 && i < colorCount; i++) { if (remaining >= 3) { colorCounts[i] += 3; remaining -= 3; } } // Build a pool of tile types var tilePool = []; for (var i = 0; i < colorCount; i++) { for (var j = 0; j < colorCounts[i]; j++) { tilePool.push(tileTypes[i]); } } // Shuffle tilePool for (var i = tilePool.length - 1; i > 0; i--) { var j = Math.floor(Math.random() * (i + 1)); var temp = tilePool[i]; tilePool[i] = tilePool[j]; tilePool[j] = temp; } for (var row = 0; row < gridRows; row++) { tileGrid[row] = []; var _loop = function _loop() { tile = new Tile(); // Pop from shuffled pool type = tilePool.pop(); 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
@@ -80,13 +80,45 @@
var maxLayers = 1;
var tileLayers = []; // Array of tileGrid arrays, one per layer
function createLayer(layerNum) {
var tileGrid = [];
+ // --- Ensure each color's tile count is a multiple of 3 ---
+ var totalTiles = gridRows * gridCols;
+ var colorCount = tileTypes.length;
+ var baseCount = Math.floor(totalTiles / colorCount / 3) * 3; // base multiple of 3 per color
+ var colorCounts = [];
+ var remaining = totalTiles;
+ for (var i = 0; i < colorCount; i++) {
+ colorCounts[i] = baseCount;
+ remaining -= baseCount;
+ }
+ // Distribute remaining tiles, always in multiples of 3
+ for (var i = 0; remaining > 0 && i < colorCount; i++) {
+ if (remaining >= 3) {
+ colorCounts[i] += 3;
+ remaining -= 3;
+ }
+ }
+ // Build a pool of tile types
+ var tilePool = [];
+ for (var i = 0; i < colorCount; i++) {
+ for (var j = 0; j < colorCounts[i]; j++) {
+ tilePool.push(tileTypes[i]);
+ }
+ }
+ // Shuffle tilePool
+ for (var i = tilePool.length - 1; i > 0; i--) {
+ var j = Math.floor(Math.random() * (i + 1));
+ var temp = tilePool[i];
+ tilePool[i] = tilePool[j];
+ tilePool[j] = temp;
+ }
for (var row = 0; row < gridRows; row++) {
tileGrid[row] = [];
var _loop = function _loop() {
tile = new Tile();
- type = tileTypes[Math.floor(Math.random() * tileTypes.length)];
+ // Pop from shuffled pool
+ type = tilePool.pop();
tile.setType(type);
tile.x = gridOffsetX + col * tileSize;
tile.y = gridOffsetY + row * tileSize;
tile.row = row;