/**** * Plugins ****/ var tween = LK.import("@upit/tween.v1"); var storage = LK.import("@upit/storage.v1", { highScore: 0, level: 1 }); /**** * Classes ****/ var PreviewTetromino = Container.expand(function () { var self = Container.call(this); var shapeDisplay = self.addChild(new Container()); self.updatePreview = function (shapeIndex) { // Clear previous preview shapeDisplay.removeChildren(); // Create new preview based on shape var shape = [ // I shape [[0, 0, 0, 0], [1, 1, 1, 1], [0, 0, 0, 0], [0, 0, 0, 0]], // O shape [[1, 1], [1, 1]], // T shape [[0, 1, 0], [1, 1, 1], [0, 0, 0]], // J shape [[1, 0, 0], [1, 1, 1], [0, 0, 0]], // L shape [[0, 0, 1], [1, 1, 1], [0, 0, 0]], // S shape [[0, 1, 1], [1, 1, 0], [0, 0, 0]], // Z shape [[1, 1, 0], [0, 1, 1], [0, 0, 0]]]; var colors = [0x00ffff, // I - Cyan 0xffff00, // O - Yellow 0x800080, // T - Purple 0x0000ff, // J - Blue 0xff7f00, // L - Orange 0x00ff00, // S - Green 0xff0000 // Z - Red ]; var currentShape = shape[shapeIndex]; var previewBlockSize = blockSize * 0.8; for (var y = 0; y < currentShape.length; y++) { for (var x = 0; x < currentShape[y].length; x++) { if (currentShape[y][x] === 1) { var block = LK.getAsset('block', { x: x * previewBlockSize, y: y * previewBlockSize, anchorX: 0, anchorY: 0, width: previewBlockSize, height: previewBlockSize }); block.tint = colors[shapeIndex]; shapeDisplay.addChild(block); } } } // Center the shape in the preview area var maxPreviewWidth = 4 * previewBlockSize; var maxPreviewHeight = 4 * previewBlockSize; var shapeWidth = currentShape[0].length * previewBlockSize; var shapeHeight = currentShape.length * previewBlockSize; shapeDisplay.x = (maxPreviewWidth - shapeWidth) / 2; shapeDisplay.y = (maxPreviewHeight - shapeHeight) / 2; }; return self; }); var Tetromino = Container.expand(function () { var self = Container.call(this); // Tetromino properties self.gridX = 0; self.gridY = 0; self.shape = 0; self.rotation = 0; self.blocks = []; self.blockColor = 0xffffff; // Shapes definition (standard tetrominos) // I, O, T, J, L, S, Z self.shapes = [ // I shape [[0, 0, 0, 0], [1, 1, 1, 1], [0, 0, 0, 0], [0, 0, 0, 0]], // O shape [[1, 1], [1, 1]], // T shape [[0, 1, 0], [1, 1, 1], [0, 0, 0]], // J shape [[1, 0, 0], [1, 1, 1], [0, 0, 0]], // L shape [[0, 0, 1], [1, 1, 1], [0, 0, 0]], // S shape [[0, 1, 1], [1, 1, 0], [0, 0, 0]], // Z shape [[1, 1, 0], [0, 1, 1], [0, 0, 0]]]; // Colors for each tetromino (matching standard colors) self.colors = [0x00ffff, // I - Cyan 0xffff00, // O - Yellow 0x800080, // T - Purple 0x0000ff, // J - Blue 0xff7f00, // L - Orange 0x00ff00, // S - Green 0xff0000 // Z - Red ]; // Initialize with a specific shape self.init = function (shapeIndex) { self.shape = shapeIndex; self.blockColor = self.colors[shapeIndex]; // Create blocks based on the shape var shapeData = self.shapes[shapeIndex]; for (var y = 0; y < shapeData.length; y++) { for (var x = 0; x < shapeData[y].length; x++) { if (shapeData[y][x] === 1) { var block = self.attachAsset('block', { x: x * blockSize, y: y * blockSize, anchorX: 0, anchorY: 0, width: blockSize, height: blockSize }); block.tint = self.blockColor; self.blocks.push(block); } } } // Start at the top center of the grid self.gridX = Math.floor(gridWidth / 2) - Math.floor(shapeData[0].length / 2); self.gridY = 0; // Update position on the grid self.updatePosition(); }; // Update visual position based on grid position self.updatePosition = function () { self.x = gridOffsetX + self.gridX * blockSize; self.y = gridOffsetY + self.gridY * blockSize; }; // Get the current shape data with rotation applied self.getCurrentShapeData = function () { var shapeData = self.shapes[self.shape]; var rotatedShape = []; // Initialize rotatedShape with zeros for (var y = 0; y < shapeData.length; y++) { rotatedShape[y] = []; for (var x = 0; x < shapeData[0].length; x++) { rotatedShape[y][x] = 0; } } // Apply rotation var size = shapeData.length; switch (self.rotation % 4) { case 0: // 0 degrees for (var y = 0; y < size; y++) { for (var x = 0; x < size; x++) { if (y < shapeData.length && x < shapeData[y].length) { rotatedShape[y][x] = shapeData[y][x]; } } } break; case 1: // 90 degrees for (var y = 0; y < size; y++) { for (var x = 0; x < size; x++) { if (size - 1 - x < shapeData.length && y < shapeData[size - 1 - x].length) { rotatedShape[y][x] = shapeData[size - 1 - x][y]; } } } break; case 2: // 180 degrees for (var y = 0; y < size; y++) { for (var x = 0; x < size; x++) { if (size - 1 - y < shapeData.length && size - 1 - x < shapeData[size - 1 - y].length) { rotatedShape[y][x] = shapeData[size - 1 - y][size - 1 - x]; } } } break; case 3: // 270 degrees for (var y = 0; y < size; y++) { for (var x = 0; x < size; x++) { if (x < shapeData.length && size - 1 - y < shapeData[x].length) { rotatedShape[y][x] = shapeData[x][size - 1 - y]; } } } break; } return rotatedShape; }; // Move tetromino left self.moveLeft = function () { if (!self.checkCollision(self.gridX - 1, self.gridY)) { self.gridX--; self.updatePosition(); return true; } return false; }; // Move tetromino right self.moveRight = function () { if (!self.checkCollision(self.gridX + 1, self.gridY)) { self.gridX++; self.updatePosition(); return true; } return false; }; // Move tetromino down self.moveDown = function () { if (!self.checkCollision(self.gridX, self.gridY + 1)) { self.gridY++; self.updatePosition(); return true; } return false; }; // Rotate tetromino self.rotate = function () { var oldRotation = self.rotation; self.rotation = (self.rotation + 1) % 4; // Update block positions self.updateBlockPositions(); // Check if rotation is valid if (self.checkCollision(self.gridX, self.gridY)) { // Try wall kicks - move left or right if needed if (!self.checkCollision(self.gridX - 1, self.gridY)) { self.gridX -= 1; self.updatePosition(); } else if (!self.checkCollision(self.gridX + 1, self.gridY)) { self.gridX += 1; self.updatePosition(); } else if (!self.checkCollision(self.gridX, self.gridY - 1)) { self.gridY -= 1; self.updatePosition(); } else { // If still can't rotate, restore previous rotation self.rotation = oldRotation; self.updateBlockPositions(); return false; } } LK.getSound('rotate').play(); return true; }; // Update block positions based on shape and rotation self.updateBlockPositions = function () { // Remove existing blocks for (var i = 0; i < self.blocks.length; i++) { self.removeChild(self.blocks[i]); } self.blocks = []; // Create new blocks based on rotated shape var shapeData = self.getCurrentShapeData(); for (var y = 0; y < shapeData.length; y++) { for (var x = 0; x < shapeData[y].length; x++) { if (shapeData[y][x] === 1) { var block = self.attachAsset('block', { x: x * blockSize, y: y * blockSize, anchorX: 0, anchorY: 0, width: blockSize, height: blockSize }); block.tint = self.blockColor; self.blocks.push(block); } } } }; // Hard drop - move all the way down self.hardDrop = function () { var dropDistance = 0; while (self.moveDown()) { dropDistance++; } return dropDistance; }; // Check collision with grid or walls self.checkCollision = function (newX, newY) { var shapeData = self.getCurrentShapeData(); for (var y = 0; y < shapeData.length; y++) { for (var x = 0; x < shapeData[y].length; x++) { if (shapeData[y][x] === 1) { var gridX = newX + x; var gridY = newY + y; // Check boundaries if (gridX < 0 || gridX >= gridWidth || gridY >= gridHeight) { return true; } // Check if position is already filled in the grid (and not out of bounds) if (gridY >= 0 && grid[gridY][gridX] !== 0) { return true; } } } } return false; }; // Add current tetromino to the grid self.addToGrid = function () { var shapeData = self.getCurrentShapeData(); var affectedRows = []; for (var y = 0; y < shapeData.length; y++) { for (var x = 0; x < shapeData[y].length; x++) { if (shapeData[y][x] === 1) { var gridX = self.gridX + x; var gridY = self.gridY + y; // Only add blocks that are within the grid if (gridY >= 0 && gridY < gridHeight && gridX >= 0 && gridX < gridWidth) { grid[gridY][gridX] = self.blockColor; if (affectedRows.indexOf(gridY) === -1) { affectedRows.push(gridY); } } } } } return affectedRows; }; return self; }); /**** * Initialize Game ****/ var game = new LK.Game({ backgroundColor: 0x000000 }); /**** * Game Code ****/ // Game constants var gridWidth = 10; var gridHeight = 20; var blockSize = 60; var fallSpeed = 1000; // milliseconds per step var grid = []; var graphicalGrid = []; var currentTetromino = null; var nextTetrominoIndex = -1; var gameLoop = null; var score = 0; var level = storage.level || 1; var linesCleared = 0; var gameActive = false; var gridOffsetX, gridOffsetY; var holdEnabled = true; var touchStartX = 0; var touchStartY = 0; var isDragging = false; var dragThreshold = 30; var dropThreshold = 100; var swipeDirection = ''; var lastMoveTime = 0; var moveDelay = 150; // Setup the game board function setupGame() { // Setup background game.setBackgroundColor(0x202020); // Calculate grid position to center it gridOffsetX = (2048 - gridWidth * blockSize) / 2; gridOffsetY = (2732 - gridHeight * blockSize) / 2; // Create grid container var gridContainer = new Container(); game.addChild(gridContainer); // Create visual grid for (var y = 0; y < gridHeight; y++) { grid[y] = []; graphicalGrid[y] = []; for (var x = 0; x < gridWidth; x++) { grid[y][x] = 0; // 0 means empty // Create grid cell visual var cell = LK.getAsset('block', { x: gridOffsetX + x * blockSize, y: gridOffsetY + y * blockSize, anchorX: 0, anchorY: 0, width: blockSize, height: blockSize }); cell.tint = 0x333333; cell.alpha = 0.3; game.addChild(cell); graphicalGrid[y][x] = null; // Create grid lines if (x < gridWidth - 1) { var vLine = LK.getAsset('gridLine', { x: gridOffsetX + (x + 1) * blockSize, y: gridOffsetY, anchorX: 0, anchorY: 0, width: 1, height: gridHeight * blockSize }); game.addChild(vLine); } if (y < gridHeight - 1) { var hLine = LK.getAsset('gridLine', { x: gridOffsetX, y: gridOffsetY + (y + 1) * blockSize, anchorX: 0, anchorY: 0, width: gridWidth * blockSize, height: 1 }); game.addChild(hLine); } } } // Create border var border = LK.getAsset('gridLine', { x: gridOffsetX - 2, y: gridOffsetY - 2, anchorX: 0, anchorY: 0, width: gridWidth * blockSize + 4, height: gridHeight * blockSize + 4 }); border.tint = 0xFFFFFF; game.addChild(border); // Create UI createUI(); // Start first game startGame(); } // Create UI elements function createUI() { // Score display scoreTxt = new Text2('Score: 0', { size: 60, fill: 0xFFFFFF }); scoreTxt.anchor.set(0, 0); scoreTxt.x = 50; scoreTxt.y = 50; game.addChild(scoreTxt); // Level display levelTxt = new Text2('Level: ' + level, { size: 60, fill: 0xFFFFFF }); levelTxt.anchor.set(0, 0); levelTxt.x = 50; levelTxt.y = 120; game.addChild(levelTxt); // Lines display linesTxt = new Text2('Lines: 0', { size: 60, fill: 0xFFFFFF }); linesTxt.anchor.set(0, 0); linesTxt.x = 50; linesTxt.y = 190; game.addChild(linesTxt); // Next piece text nextPieceTxt = new Text2('Next:', { size: 60, fill: 0xFFFFFF }); nextPieceTxt.anchor.set(0, 0); nextPieceTxt.x = 2048 - 300; nextPieceTxt.y = 50; game.addChild(nextPieceTxt); // Next piece preview nextPiecePreview = new PreviewTetromino(); nextPiecePreview.x = 2048 - 300; nextPiecePreview.y = 120; game.addChild(nextPiecePreview); // Controls hint controlsTxt = new Text2('Controls:\nTap sides to move\nSwipe down to drop\nTap piece to rotate', { size: 40, fill: 0xAAAAAA }); controlsTxt.anchor.set(0.5, 0); controlsTxt.x = 2048 / 2; controlsTxt.y = gridOffsetY + gridHeight * blockSize + 50; game.addChild(controlsTxt); // High score highScoreTxt = new Text2('High Score: ' + storage.highScore, { size: 50, fill: 0xFFFFFF }); highScoreTxt.anchor.set(0.5, 0); highScoreTxt.x = 2048 / 2; highScoreTxt.y = gridOffsetY - 100; game.addChild(highScoreTxt); } // Start a new game function startGame() { // Reset game state for (var y = 0; y < gridHeight; y++) { for (var x = 0; x < gridWidth; x++) { grid[y][x] = 0; if (graphicalGrid[y][x]) { game.removeChild(graphicalGrid[y][x]); graphicalGrid[y][x] = null; } } } // Reset variables score = 0; linesCleared = 0; updateScore(); updateLevel(); updateLines(); // Generate first tetromino generateNextTetrominoIndex(); spawnTetromino(); // Start game loop if (gameLoop) { LK.clearInterval(gameLoop); } fallSpeed = 1000 - (level - 1) * 50; if (fallSpeed < 100) { fallSpeed = 100; } gameLoop = LK.setInterval(gameUpdate, fallSpeed); gameActive = true; // Play music LK.playMusic('tetrisTheme'); } // Main game update function gameUpdate() { if (!gameActive) { return; } if (!currentTetromino.moveDown()) { // Can't move down further, lock the piece lockTetromino(); } } // Lock the current tetromino in place and spawn a new one function lockTetromino() { // Add tetromino to grid var affectedRows = currentTetromino.addToGrid(); // Check for line clears var linesCleared = checkLineClear(affectedRows); // Update score and level if (linesCleared > 0) { updateScoreForLines(linesCleared); } // Play drop sound LK.getSound('drop').play(); // Remove current tetromino game.removeChild(currentTetromino); // Check for game over if (checkGameOver()) { endGame(); return; } // Spawn next tetromino spawnTetromino(); // Reset hold ability holdEnabled = true; } // Spawn a new tetromino function spawnTetromino() { currentTetromino = new Tetromino(); currentTetromino.init(nextTetrominoIndex); game.addChild(currentTetromino); // Generate next tetromino index and update preview generateNextTetrominoIndex(); nextPiecePreview.updatePreview(nextTetrominoIndex); // Check if game over if (currentTetromino.checkCollision(currentTetromino.gridX, currentTetromino.gridY)) { endGame(); } } // Generate the next tetromino index function generateNextTetrominoIndex() { // If this is the first time, generate a random index if (nextTetrominoIndex === -1) { nextTetrominoIndex = Math.floor(Math.random() * 7); } else { // Otherwise generate next piece var newIndex = Math.floor(Math.random() * 7); // Avoid giving the same piece twice in a row while (newIndex === nextTetrominoIndex) { newIndex = Math.floor(Math.random() * 7); } nextTetrominoIndex = newIndex; } } // Check for completed lines and clear them function checkLineClear(rowsToCheck) { if (!rowsToCheck || rowsToCheck.length === 0) { return 0; } // Sort rows in descending order to clear from bottom to top rowsToCheck.sort(function (a, b) { return b - a; }); var clearedLines = 0; for (var i = 0; i < rowsToCheck.length; i++) { var row = rowsToCheck[i]; var isComplete = true; // Check if row is complete for (var x = 0; x < gridWidth; x++) { if (grid[row][x] === 0) { isComplete = false; break; } } if (isComplete) { // Flash row before clearing flashRow(row); // Clear the row clearRow(row); // Move all rows above down for (var y = row; y > 0; y--) { for (var x = 0; x < gridWidth; x++) { grid[y][x] = grid[y - 1][x]; // Update graphical grid if (graphicalGrid[y][x]) { game.removeChild(graphicalGrid[y][x]); graphicalGrid[y][x] = null; } if (grid[y][x] !== 0) { var block = LK.getAsset('block', { x: gridOffsetX + x * blockSize, y: gridOffsetY + y * blockSize, anchorX: 0, anchorY: 0, width: blockSize, height: blockSize }); block.tint = grid[y][x]; game.addChild(block); graphicalGrid[y][x] = block; } } } // Clear the top row for (var x = 0; x < gridWidth; x++) { grid[0][x] = 0; if (graphicalGrid[0][x]) { game.removeChild(graphicalGrid[0][x]); graphicalGrid[0][x] = null; } } clearedLines++; // Since we've moved rows down, we need to check this row again i--; } } // Play line clear sound if lines were cleared if (clearedLines > 0) { LK.getSound('line').play(); } return clearedLines; } // Flash a row before clearing function flashRow(row) { for (var x = 0; x < gridWidth; x++) { if (graphicalGrid[row][x]) { tween(graphicalGrid[row][x], { tint: 0xFFFFFF }, { duration: 50, onFinish: function onFinish() { // Flash back to original color for (var x = 0; x < gridWidth; x++) { if (graphicalGrid[row][x]) { tween(graphicalGrid[row][x], { tint: grid[row][x] }, { duration: 50 }); } } } }); } } } // Clear a row function clearRow(row) { for (var x = 0; x < gridWidth; x++) { if (graphicalGrid[row][x]) { game.removeChild(graphicalGrid[row][x]); graphicalGrid[row][x] = null; } } } // Update score when lines are cleared function updateScoreForLines(lines) { // Classic Tetris scoring: // 1 line = 100 * level // 2 lines = 300 * level // 3 lines = 500 * level // 4 lines = 800 * level (Tetris) var points = 0; switch (lines) { case 1: points = 100; break; case 2: points = 300; break; case 3: points = 500; break; case 4: points = 800; break; } score += points * level; linesCleared += lines; // Check for level up (every 10 lines) if (Math.floor(linesCleared / 10) >= level) { levelUp(); } updateScore(); updateLines(); } // Level up function levelUp() { level++; updateLevel(); // Speed up falling tetrominos if (gameLoop) { LK.clearInterval(gameLoop); } fallSpeed = 1000 - (level - 1) * 50; if (fallSpeed < 100) { fallSpeed = 100; } gameLoop = LK.setInterval(gameUpdate, fallSpeed); // Play level up sound LK.getSound('levelup').play(); // Flash screen LK.effects.flashScreen(0x00FF00, 500); } // Update score display function updateScore() { scoreTxt.setText('Score: ' + score); // Update high score if needed if (score > storage.highScore) { storage.highScore = score; highScoreTxt.setText('High Score: ' + storage.highScore); } } // Update level display function updateLevel() { levelTxt.setText('Level: ' + level); storage.level = level; } // Update lines display function updateLines() { linesTxt.setText('Lines: ' + linesCleared); } // Check for game over (blocks in the top row) function checkGameOver() { for (var x = 0; x < gridWidth; x++) { if (grid[0][x] !== 0) { return true; } } return false; } // End the game function endGame() { gameActive = false; if (gameLoop) { LK.clearInterval(gameLoop); gameLoop = null; } // Update high score if (score > storage.highScore) { storage.highScore = score; } // Show game over LK.showGameOver(); } // User input handling game.down = function (x, y, obj) { if (!gameActive) { return; } touchStartX = x; touchStartY = y; isDragging = true; swipeDirection = ''; // Check if tap is on the left or right side of the grid if (x < gridOffsetX) { // Left side tap - move left currentTetromino.moveLeft(); } else if (x > gridOffsetX + gridWidth * blockSize) { // Right side tap - move right currentTetromino.moveRight(); } else if (y < gridOffsetY) { // Top area tap - rotate currentTetromino.rotate(); } else if (x >= gridOffsetX && x <= gridOffsetX + gridWidth * blockSize && y >= gridOffsetY && y <= gridOffsetY + gridHeight * blockSize) { // Tap inside grid - check if on current tetromino var localPos = currentTetromino.toLocal({ x: x, y: y }); var rotateOnTap = true; for (var i = 0; i < currentTetromino.blocks.length; i++) { var block = currentTetromino.blocks[i]; if (localPos.x >= block.x && localPos.x <= block.x + block.width && localPos.y >= block.y && localPos.y <= block.y + block.height) { // Tapped on a block, rotate the tetromino if (rotateOnTap) { currentTetromino.rotate(); break; } } } } }; game.move = function (x, y, obj) { if (!gameActive || !isDragging) { return; } var dx = x - touchStartX; var dy = y - touchStartY; var now = Date.now(); // Determine swipe direction if (swipeDirection === '') { if (Math.abs(dx) > dragThreshold || Math.abs(dy) > dragThreshold) { if (Math.abs(dx) > Math.abs(dy)) { swipeDirection = dx > 0 ? 'right' : 'left'; } else { swipeDirection = dy > 0 ? 'down' : 'up'; } } } // Handle swipe if (swipeDirection === 'left' && now - lastMoveTime > moveDelay) { currentTetromino.moveLeft(); lastMoveTime = now; } else if (swipeDirection === 'right' && now - lastMoveTime > moveDelay) { currentTetromino.moveRight(); lastMoveTime = now; } else if (swipeDirection === 'down') { // Fast drop if (Math.abs(dy) > dropThreshold) { currentTetromino.hardDrop(); isDragging = false; } else if (now - lastMoveTime > moveDelay / 2) { currentTetromino.moveDown(); lastMoveTime = now; } } else if (swipeDirection === 'up' && now - lastMoveTime > moveDelay) { currentTetromino.rotate(); lastMoveTime = now; } }; game.up = function (x, y, obj) { if (!gameActive) { return; } isDragging = false; // Handle quick tap for rotation if no significant movement var dx = x - touchStartX; var dy = y - touchStartY; if (Math.abs(dx) < dragThreshold && Math.abs(dy) < dragThreshold) { // Check if tap was inside grid but not handled in down event if (x >= gridOffsetX && x <= gridOffsetX + gridWidth * blockSize && y >= gridOffsetY && y <= gridOffsetY + gridHeight * blockSize) { // Rotate only if we didn't detect it as a swipe if (swipeDirection === '') { currentTetromino.rotate(); } } } else if (swipeDirection === 'down' && Math.abs(dy) > dropThreshold * 2) { // Hard drop on large downward swipe currentTetromino.hardDrop(); } }; // Initialize the game setupGame(); // Game tick game.update = function () { // Nothing to do here as we use interval for game updates };