/**** * Classes ****/ var Explosion = Container.expand(function () { var self = Container.call(this); var explosionGraphics = self.attachAsset('explosion', { anchorX: 0.5, anchorY: 0.5 }); //explosionGraphics.tint = 0xFF6679; explosionGraphics.alpha = 0.8; var angle = Math.random() * Math.PI * 2; var speed = Math.random() * 5; self.move = function () { this.x += Math.cos(angle) * speed; this.y += Math.sin(angle) * speed; if (explosionGraphics.alpha > 0) { explosionGraphics.alpha -= 0.02; } else { self.destroy(); } }; self.createExplosionAt = function (x, y) { for (var i = 0; i < 30; i++) { var explosion = new Explosion(); explosion.x = x; explosion.y = y; explosions.push(explosion); game.addChild(explosion); } }; }); var Ball = Container.expand(function () { var self = Container.call(this); var ballGraphics = self.attachAsset('ball', { anchorX: 0.5, anchorY: 0.5 }); var brickPrevious = null; self.checkWallCollisions = function () { if (self.x - self.width / 2 < leftWall.x + leftWall.width / 2 || self.x + self.width / 2 > rightWall.x - rightWall.width / 2) { self.velocityX *= -1; // Invert the horizontal velocity } if (self.y - self.height / 2 < topWall.y + topWall.height / 2) { self.y = topWall.y + topWall.height / 2 + self.height / 2; self.velocityY *= -1; // Invert the vertical velocity } }; self.collisionBrick = function (brick) { var currentTime = Date.now(); var brickWidth = 120; // Assuming brick width is 120 as initialized in assets if (this.brickPrevious) { this.lastCollisionX = this.brickPrevious.x; } if (!this.lastCollisionTime || currentTime - this.lastCollisionTime > 200) { // Bounce the ball this.velocityY *= -1; // Set the last collision time and position this.lastCollisionTime = currentTime; } if (brick instanceof BrickSilver) { brick = brick.hitByBall(); } self.brickPrevious = brick; }; self.velocityY = -15; self.firstBounce = true; self.clickBounce = function () { self.velocityY = -15; if (self.firstBounce) { self.velocityX = 5; // slight horizontal velocity self.firstBounce = false; } }; self.velocityX = 0; self.move = function () { self.x += self.velocityX; self.y += self.velocityY; self.velocityY += 0.5; // gravity effect // Check for ball and bomb collision for (var i = game.children.length - 1; i >= 0; i--) { var obj = game.children[i]; if (obj instanceof Bomb && self.intersects(obj)) { LK.effects.flashScreen(0xff0000, 1000); LK.showGameOver(scoreDisplay.updateScore(score)); return; } } // Check for collisions with walls and make the ball bounce self.checkWallCollisions(); }; }); var Bomb = Container.expand(function () { var self = Container.call(this); var bombGraphics = self.attachAsset('bomb', { anchorX: 0.5, anchorY: 0.5 }); self.timer = LK.setTimeout(function () { self.explode(); }, 3000); self.explode = function () { if (self.parent) { var explosion = game.addChild(new Explosion()); explosion.createExplosionAt(self.x, self.y); self.destroy(); } }; }); var Brick = Container.expand(function () { var self = Container.call(this); var brickGraphics = self.attachAsset('brick', { anchorX: 0.5, anchorY: 0.5 }); }); var BrickSilver = Container.expand(function () { var self = Container.call(this); var brickSilverGraphics = self.attachAsset('brickSilver', { anchorX: 0.5, anchorY: 0.5 }); self.hitByBall = function () { LK.setTimeout(function () { var newBrick = game.addChild(new Brick()); bricks.push(newBrick); newBrick.x = self.x; newBrick.y = self.y; self.destroy(); }, 50); return null; }; }); var BrickGold = Container.expand(function () { var self = Container.call(this); var brickGoldGraphics = self.attachAsset('brickGold', { anchorX: 0.5, anchorY: 0.5 }); self.hitByBall = function () { var newBrick = game.addChild(new BrickSilver()); bricks.push(newBrick); newBrick.x = self.x; newBrick.y = self.y; self.destroy(); return newBrick; }; }); var LavaDrop = Container.expand(function () { var self = Container.call(this); var lavaDropGraphics = self.attachAsset('lavaDrop', { anchorX: 0.5, anchorY: 0.5 }); self.speedY = 5; self.move = function () { self.y += self.speedY; // Destroy the lava drop if it goes off the bottom of the screen if (self.y > 2732) { self.destroy(); } }; }); var StartButton = Container.expand(function () { var self = Container.call(this); var startButtonGraphics = self.attachAsset('startButton', { anchorX: 0.5, anchorY: 0.5 }); self.on('down', function () { game.start(); }); }); var BrickExplosion = Container.expand(function () { var self = Container.call(this); var explosionGraphics = self.attachAsset('brickExplosion', { anchorX: 0.5, anchorY: 0.5 }); explosionGraphics.alpha = 0.8; var angle = Math.random() * Math.PI * 2; var speed = Math.random() * 5; self.move = function () { this.x += Math.cos(angle) * speed; this.y += Math.sin(angle) * speed; if (explosionGraphics.alpha > 0) { explosionGraphics.alpha -= 0.025; } else { self.destroy(); } }; self.createExplosionAt = function (x, y) { for (var i = 0; i < 40; i++) { var explosion = new BrickExplosion(); explosion.x = x; explosion.y = y; explosions.push(explosion); game.addChild(explosion); } }; }); var Lava = Container.expand(function () { var self = Container.call(this); var lavaGraphics = self.attachAsset('lava', { anchorX: 0.5, anchorY: 0 }); self.y = 2800 - self.height; // position at the bottom of the screen }); var Wall = Container.expand(function (assetId) { var self = Container.call(this); var wallGraphics = self.attachAsset(assetId, { anchorX: 0.5, anchorY: 0.5 }); }); var ScoreDisplay = Container.expand(function () { var self = Container.call(this); var scoreText = new Text2('Score: 0', { size: 80, fill: "#ffffff" }); scoreText.anchor.set(0, 0.5); self.addChild(scoreText); self.updateScore = function (newScore) { scoreText.setText('Score: ' + newScore.toString()); }; }); /**** * Initialize Game ****/ var game = new LK.Game({ backgroundColor: 0x000000 // Init game with black background }); /**** * Game Code ****/ var explosions = []; game.lastCollisionTime = 0; game.lastCollisionX = 0; var gameStarted = false; var score = 0; var clicksLeft = 8; var ball = game.addChild(new Ball()); ball.x = 2048 / 2; ball.y = 2732 / 2.2; var lavaTiles = []; var numberOfLavaTiles = Math.ceil(2048 / 400); // Calculate the number of lava tiles needed to cover the screen width for (var i = 0; i < numberOfLavaTiles; i++) { var lava = game.addChild(new Lava()); lava.x = i * 400 * 0.90 + 200; // Position each tile with a 5% overlap lavaTiles.push(lava); } var leftWall = game.addChild(new Wall('leftWall')); leftWall.x = leftWall.width / 2; leftWall.y = 2732 / 2; var rightWall = game.addChild(new Wall('rightWall')); rightWall.x = 2048 - rightWall.width / 2; rightWall.y = 2732 / 2; var topWall = game.addChild(new Wall('topWall')); topWall.x = 2048 / 2; topWall.y = topWall.height / 4; var scoreDisplay = game.addChild(new ScoreDisplay()); scoreDisplay.x = 80; // Position score display 50 pixels from the left scoreDisplay.y = 80; // Position score display 50 pixels from the top // Create and display clicks left text var clicksDisplay = new Text2('Clicks left: ' + clicksLeft.toString(), { size: 60, fill: "#ffffff" }); clicksDisplay.anchor.set(1, 0); // Anchor to the top right LK.gui.topRight.addChild(clicksDisplay); var bricks = []; var brickRowCount = 4; var brickColumnCount = 5; var brickPadding = 10; var brickOffsetTop = 400; var brickOffsetLeft = (2048 - brickColumnCount * (120 + brickPadding)) / 2; for (var i = 0; i < brickRowCount; i++) { for (var j = 0; j < brickColumnCount; j++) { var brick = game.addChild(new Brick()); brick.x = brickOffsetLeft + j * (120 + brickPadding); brick.y = brickOffsetTop + i * (103.67 + brickPadding); bricks.push(brick); } } var startButton = game.addChild(new StartButton()); startButton.x = 2048 / 2; startButton.y = 2732 / 2 - 150; // Add instruction text below the start button var instructionText = new Text2('😎 Click to bounce the ball up. 😎\n😓 Every click bounces the ball, but you have limited number of clicks! 😓\n😋 Breaking a brick gives you 2 more clicks though. 😋\n\n😲 Oh, where are those lava drops falling from??? 😲\n😳 And cute little bombs are going to show up too??? 😳', { size: 55, fill: "#ffffff", align: 'center' }); instructionText.anchor.set(0.5, 0); // Center anchor horizontally, top anchor vertically instructionText.x = 2048 / 2; instructionText.y = startButton.y + startButton.height / 2 + 420; // Position below the start button game.addChild(instructionText); game.start = function () { gameStarted = true; startButton.destroy(); }; game.on('down', function (obj) { if (gameStarted && clicksLeft > 0) { ball.clickBounce(); clicksLeft--; clicksDisplay.setText('Clicks left: ' + clicksLeft.toString()); } }); LK.on('tick', function () { if (gameStarted) { ball.move(); } // Check collision with bricks and make the ball bounce for (var i = bricks.length - 1; i >= 0; i--) { if (ball.intersects(bricks[i])) { ball.collisionBrick(bricks[i]); if (bricks[i] instanceof Brick) { var brickExplosion = game.addChild(new BrickExplosion()); brickExplosion.createExplosionAt(bricks[i].x, bricks[i].y); } bricks[i].destroy(); bricks.splice(i, 1); score += 100; scoreDisplay.updateScore(score); clicksLeft += 2; clicksDisplay.setText('Clicks left: ' + clicksLeft.toString()); } } // Check collision with lava if (ball.intersects(lava) || ball.y > 2732) { LK.effects.flashScreen(0xff0000, 1000); LK.showGameOver(); } // Spawn bricks and bombs at random locations on the top half of the screen if (bricks.length === 0 || bricks.length < 5 && LK.ticks % (180 + Math.floor(Math.random() * 121)) === 0) { if (score >= 2000 && instructionText.parent) { instructionText.destroy(); } if (score >= 2000) { var bomb; do { bomb = new Bomb(); bomb.x = 300 + Math.random() * (2048 - 600); bomb.y = 400 + Math.random() * (2732 / 2 - 200); } while (Math.abs(bomb.x - ball.x) < 300 && Math.abs(bomb.y - ball.y) < 300); game.addChild(bomb); } var newBrick; var brickType = score >= 2000 && Math.random() < 0.5 ? BrickSilver : Brick; var positionValid; do { positionValid = true; newBrick = new brickType(); newBrick.x = 300 + Math.random() * (2048 - 600); newBrick.y = 400 + Math.random() * (2732 / 2 - 200); // Check if the new brick overlaps with any existing brick for (var b = 0; b < bricks.length; b++) { if (newBrick.intersects(bricks[b])) { positionValid = false; break; } } } while (!positionValid || Math.abs(newBrick.x - ball.x) < 300 && Math.abs(newBrick.y - ball.y) < 300); if (positionValid) { game.addChild(newBrick); bricks.push(newBrick); } } }); var lavaDrops = []; var lastLavaDropTime = 0; LK.on('tick', function () { // Spawn lava drops logic if (score >= 1500 && lavaDrops.length < 4 && LK.ticks - lastLavaDropTime > 240 + Math.floor(Math.random() * 121)) { var lavaDrop = new LavaDrop(); lavaDrop.x = Math.random() * 2048; lavaDrop.y = -lavaDrop.height; game.addChild(lavaDrop); lavaDrops.push(lavaDrop); lastLavaDropTime = LK.ticks; } // Move and check collision with ball, then remove lava drops for (var i = lavaDrops.length - 1; i >= 0; i--) { lavaDrops[i].move(); if (ball.intersects(lavaDrops[i])) { LK.effects.flashScreen(0xff0000, 1000); LK.showGameOver(); return; } if (!lavaDrops[i].parent) { lavaDrops.splice(i, 1); } } for (var i = explosions.length - 1; i >= 0; i--) { explosions[i].move(); } });

Balls, Bricks and Lava??? by Laughing Man

Images