/**** * Classes ****/ // Explosion class var Explosion = Container.expand(function () { var self = Container.call(this); var explosionGraphics = self.attachAsset('explosion', { anchorX: 0.5, anchorY: 0.5 }); self.show = function (x, y) { self.x = x; self.y = y; self.alpha = 1; // Set a timeout to hide the explosion after 2 seconds LK.setTimeout(function () { self.destroy(); }, 2000); }; }); // RightPaddle class var RightPaddle = Container.expand(function () { var self = Container.call(this); var paddleGraphics = self.attachAsset('rightPaddle', { anchorX: 0.5, anchorY: 0.5 }); self.speed = 10; self.moveUp = function () { self.y -= self.speed; }; self.moveDown = function () { self.y += self.speed; }; }); // LeftPaddle class var LeftPaddle = Container.expand(function () { var self = Container.call(this); var paddleGraphics = self.attachAsset('leftPaddle', { anchorX: 0.5, anchorY: 0.5 }); self.speed = 10; self.moveUp = function () { self.y -= self.speed; }; self.moveDown = function () { self.y += self.speed; }; }); // Ball class var Ball = Container.expand(function () { var self = Container.call(this); this.ballGraphics = null; var ballAsset = Math.random() < 0.5 ? 'ball' : 'ball2'; this.ballGraphics = self.attachAsset(ballAsset, { anchorX: 0.5, anchorY: 0.5 }); self.velocity = { x: 5, y: 5 }; self.move = function () { self.x += self.velocity.x; self.y += self.velocity.y; }; self.reset = function () { self.x = 2048 / 2; self.y = 2732 / 2; var randomDirection = Math.random() < 0.5 ? -1 : 1; self.velocity = { x: 5 * randomDirection, y: Math.random() * 8 - 4 }; // Smoothly swap the ball asset with a fade out and fade in effect self.removeChild(self.ballGraphics); var newBallAsset = self.velocity.x < 0 ? 'ball' : 'ball2'; self.ballGraphics = self.attachAsset(newBallAsset, { anchorX: 0.5, anchorY: 0.5, alpha: 0 // Start fully transparent }); // Animate the alpha property to fade in the new ball var fadeDuration = 30; // Duration in ticks var fadeStep = 1 / fadeDuration; var currentTick = 0; var fadeIn = function fadeIn() { if (currentTick < fadeDuration) { self.ballGraphics.alpha += fadeStep; currentTick++; } else { LK.off('tick', fadeIn); // Stop the animation when done } }; LK.on('tick', fadeIn); }; }); // Background class var Background = Container.expand(function () { var self = Container.call(this); var backgroundGraphics = self.attachAsset('background', { anchorX: 0.5, anchorY: 0.5 }); // Set background to cover the entire game area backgroundGraphics.width = 2048; backgroundGraphics.height = 2732; // Position the background in the center self.x = 2048 / 2; self.y = 2732 / 2; }); // Health class var Health = Container.expand(function () { var self = Container.call(this); var healthGraphics = self.attachAsset('health', { anchorX: 0.5, anchorY: 0.5 }); // Set the initial alpha to fully visible self.alpha = 1; // Position the health icon based on its index self.setPosition = function (index, totalIcons) { var iconWidth = healthGraphics.width; var spacing = 10; var totalWidth = totalIcons * (iconWidth + spacing) - spacing; self.x = (2048 - totalWidth) / 2 + index * (iconWidth + spacing); self.y = 100; }; }); // Coin class var Coin = Container.expand(function () { var self = Container.call(this); var coinGraphics = self.attachAsset('coin', { anchorX: 0.5, anchorY: 0.5 }); self.show = function (x, y) { self.x = x; self.y = y; self.alpha = 1; // Set a timeout to hide the coin after 2 seconds LK.setTimeout(function () { self.destroy(); }, 2000); }; }); // Coffer class var Coffer = Container.expand(function () { var self = Container.call(this); var cofferGraphics = self.attachAsset('coffer', { anchorX: 0.5, anchorY: 0.5 }); self.show = function () { // Position the coffer at a random location do { self.x = Math.random() * (2048 - cofferGraphics.width - 1000) + 500 + cofferGraphics.width / 2; self.y = Math.random() * (2732 - cofferGraphics.height - 1000) + 500 + cofferGraphics.height / 2; } while (Math.hypot(ball.x - self.x, ball.y - self.y) < 200 || self.x < 500 + cofferGraphics.width / 2 || self.x > 2048 - 500 - cofferGraphics.width / 2 || self.y < 500 + cofferGraphics.height / 2 || self.y > 2732 - 500 - cofferGraphics.height / 2); self.alpha = 1; self.intersected = false; // Set a timeout to hide the coffer after 10 seconds LK.setTimeout(function () { if (!self.intersected) { self.destroy(); } }, 10000); }; }); // Cannonball class var Cannonball = Container.expand(function () { var self = Container.call(this); var cannonballGraphics = self.attachAsset('cannonball', { anchorX: 0.5, anchorY: 0.5 }); self.speed = -10; self.move = function () { self.y += self.speed; // Start fading the cannonball 1000 pixels before the top edge of the screen if (self.y < 1000) { var fadeOutStep = self.alpha / (1000 / Math.abs(self.speed)); self.alpha -= fadeOutStep; if (self.alpha < 0) { self.alpha = 0; } // Ensure alpha doesn't go below 0 } }; self.reset = function () { self.x = Math.random() * (2048 - 1000 - cannonballGraphics.width) + 500 + cannonballGraphics.width / 2; self.y = 2732 - cannonballGraphics.height / 2; self.alpha = 0; // Start fully transparent var fadeInDuration = 60; // Duration in ticks (1 second at 60FPS) var fadeStep = 1 / fadeInDuration; var fadeInTick = 0; var fadeIn = function fadeIn() { if (fadeInTick < fadeInDuration) { self.alpha += fadeStep; fadeInTick++; } else { LK.off('tick', fadeIn); // Stop the animation when done } }; LK.on('tick', fadeIn); }; }); /**** * Initialize Game ****/ // Initialize paddles and ball // Define the paddle asset // Define the ball asset var game = new LK.Game({ backgroundColor: 0x92c7f3 // Init game with blue background }); /**** * Game Code ****/ // Instantiate and add background to the game var background = game.addChild(new Background()); // Define the ball asset // Define the paddle asset // Initialize paddles var leftPaddle = game.addChild(new LeftPaddle()); var rightPaddle = game.addChild(new RightPaddle()); var ball = game.addChild(new Ball()); // Set initial positions leftPaddle.x = 50; leftPaddle.y = 2732 / 2; rightPaddle.x = 2048 - 50; rightPaddle.y = 2732 / 2; // Initialize health icons var healthIcons = []; var totalHealthIcons = 3; // Set the initial total health icons to 3 var maxHealthIcons = 10; // Set the limit on the maximum number of health icons to 10 for (var i = 0; i < totalHealthIcons; i++) { var healthIcon = game.addChild(new Health()); healthIcon.setPosition(i, totalHealthIcons); healthIcons.push(healthIcon); } ball.reset(); // Game tick event LK.on('tick', function () { // Move the ball ball.move(); // Ball collision with top and bottom if (ball.y <= 0 || ball.y >= 2732) { ball.velocity.y *= -1; } // Ball collision with paddles and adjust the rebound angle if (ball.intersects(leftPaddle) && ball.velocity.x < 0 || ball.intersects(rightPaddle) && ball.velocity.x > 0) { ball.velocity.x *= -1; // Randomize the rebound angle slightly to prevent endless bouncing ball.velocity.y += (Math.random() - 0.5) * 4; // Ensure the ball's vertical velocity is within bounds if (ball.velocity.y > 5) { ball.velocity.y = 5; } if (ball.velocity.y < -5) { ball.velocity.y = -5; } // Initiate fade out of the current ball asset ball.ballGraphics.alpha = 1; var fadeOutDuration = 15; // Duration in ticks for fade out var fadeStep = 1 / fadeOutDuration; var fadeOutTick = 0; var fadeOut = function fadeOut() { if (fadeOutTick < fadeOutDuration) { ball.ballGraphics.alpha -= fadeStep; fadeOutTick++; } else { LK.off('tick', fadeOut); // After fade out, swap the ball asset and fade it in ball.removeChild(ball.ballGraphics); var newBallAsset = ball.velocity.x < 0 ? 'ball' : 'ball2'; ball.ballGraphics = ball.attachAsset(newBallAsset, { anchorX: 0.5, anchorY: 0.5, alpha: 0 // Start fully transparent }); // Animate the alpha property to fade in the new ball var fadeInDuration = 15; // Duration in ticks for fade in var fadeInStep = 1 / fadeInDuration; var fadeInTick = 0; var fadeIn = function fadeIn() { if (fadeInTick < fadeInDuration) { ball.ballGraphics.alpha += fadeInStep; fadeInTick++; } else { LK.off('tick', fadeIn); // Stop the animation when done } }; LK.on('tick', fadeIn); } }; LK.on('tick', fadeOut); } // Ball out of bounds if (ball.x <= 0 || ball.x >= 2048) { LK.showGameOver(); } // Chest appearance and interaction logic var coffers = game.children.filter(function (child) { return child instanceof Coffer; }); coffers.forEach(function (coffer) { if (coffer.intersects(ball) && !coffer.intersected) { coffer.intersected = true; // Add one health icon without exceeding the maxHealthIcons limit if (healthIcons.length < maxHealthIcons) { var healthIcon = game.addChild(new Health()); healthIcons.push(healthIcon); // Realign all health icons in the middle healthIcons.forEach(function (icon, index) { icon.setPosition(index, healthIcons.length); }); updateCannonballTimer(); } coffer.destroy(); } }); // Cannonball collision with ball and show explosion var cannonballs = game.children.filter(function (child) { return child instanceof Cannonball; }); cannonballs.forEach(function (cannonball) { if (cannonball.intersects(ball)) { // Remove one health if (healthIcons.length > 0) { var lastHealthIcon = healthIcons.pop(); lastHealthIcon.destroy(); // Realign all health icons in the middle healthIcons.forEach(function (icon, index) { icon.setPosition(index, healthIcons.length); }); updateCannonballTimer(); } // If no health left, end the game if (healthIcons.length === 0) { LK.showGameOver(); } // Show explosion var explosion = game.addChild(new Explosion()); explosion.show(ball.x, ball.y); // Destroy the cannonball if (cannonball) { cannonball.destroy(); } } }); }); // Game tick event LK.on('tick', function () { // Move the ball ball.move(); // Ball collision with top and bottom if (ball.y <= 0 || ball.y >= 2732) { ball.velocity.y *= -1; } // Ball collision with paddles and initiate a smoother ball asset transition if (ball.intersects(leftPaddle) && ball.velocity.x < 0 || ball.intersects(rightPaddle) && ball.velocity.x > 0) { ball.velocity.x *= -1; // Initiate fade out of the current ball asset ball.ballGraphics.alpha = 1; var fadeOutDuration = 15; // Duration in ticks for fade out var fadeStep = 1 / fadeOutDuration; var fadeOutTick = 0; var fadeOut = function fadeOut() { if (fadeOutTick < fadeOutDuration) { ball.ballGraphics.alpha -= fadeStep; fadeOutTick++; } else { LK.off('tick', fadeOut); // After fade out, swap the ball asset and fade it in ball.removeChild(ball.ballGraphics); var newBallAsset = ball.velocity.x < 0 ? 'ball' : 'ball2'; ball.ballGraphics = ball.attachAsset(newBallAsset, { anchorX: 0.5, anchorY: 0.5, alpha: 0 // Start fully transparent }); // Animate the alpha property to fade in the new ball var fadeInDuration = 15; // Duration in ticks for fade in var fadeInStep = 1 / fadeInDuration; var fadeInTick = 0; var fadeIn = function fadeIn() { if (fadeInTick < fadeInDuration) { ball.ballGraphics.alpha += fadeInStep; fadeInTick++; } else { LK.off('tick', fadeIn); // Stop the animation when done } }; LK.on('tick', fadeIn); } }; LK.on('tick', fadeOut); } // Ball out of bounds if (ball.x <= 0 || ball.x >= 2048) { ball.reset(); } // Move cannonballs game.children.forEach(function (child) { if (child instanceof Cannonball) { child.move(); // Remove cannonball if it goes off the top of the screen if (child.y + child.height / 2 < 0) { child.destroy(); } } }); }); // Touch event listeners for paddles game.on('down', function (obj) { var event = obj.event; var pos = event.getLocalPosition(game); // Determine which paddle to control based on touch position if (pos.x < 2048 / 2) { leftPaddle.y = pos.y; } else { rightPaddle.y = pos.y; } }); game.on('move', function (obj) { var event = obj.event; var pos = event.getLocalPosition(game); // Update paddle position based on touch movement if (pos.x < 2048 / 2) { leftPaddle.y = pos.y; } else { rightPaddle.y = pos.y; } }); // Timer to launch a cannonball every 10 seconds var cofferTimer = LK.setInterval(function () { var newCoffer = new Coffer(); newCoffer.show(); game.addChild(newCoffer); }, 10000); var cannonballInterval = 10000; var updateCannonballTimer = function updateCannonballTimer() { if (healthIcons.length >= 4) { cannonballInterval = 5000; } else if (healthIcons.length <= 2) { cannonballInterval = 20000; } else { cannonballInterval = 10000; } LK.clearInterval(cannonballTimer); cannonballTimer = LK.setInterval(function () { var newCannonball = new Cannonball(); newCannonball.reset(); game.addChild(newCannonball); }, cannonballInterval); }; var cannonballTimer = LK.setInterval(function () { var newCannonball = new Cannonball(); newCannonball.reset(); game.addChild(newCannonball); }, cannonballInterval);

Pong by Alex

Images