/**** * Plugins ****/ var facekit = LK.import("@upit/facekit.v1"); var tween = LK.import("@upit/tween.v1"); /**** * Classes ****/ var Arrow = Container.expand(function () { var self = Container.call(this); var arrowGraphicsBG = self.attachAsset('uparrow', { anchorX: 0.5, anchorY: 0.5 }); arrowGraphicsBG.y = arrowGraphicsBG.x = 10; var arrowGraphics = self.attachAsset('uparrow', { anchorX: 0.5, anchorY: 0.5 }); self.x = 2048 * Math.random(); self.y = 2732 * Math.random() * 1.5; var scale = Math.random(); self.scale.set(scale, scale); self.update = function () { self.y -= 30 * scale; }; self.alpha = 0; var delay = Math.random() * 500; tween(arrowGraphicsBG, { y: 10, x: 10, tint: 0x0 }, { duration: 200, easing: tween.easeOut, delay: delay + 300 }); tween(self, { alpha: 1 }, { duration: 500, easing: tween.easeOut, delay: delay, onFinish: function onFinish() { var delay = 500 + Math.random() * 500; tween(arrowGraphicsBG, { y: 0, x: 0, tint: 0xffffff }, { duration: 200, easing: tween.easeIn, delay: delay }); tween(self, { alpha: 0 }, { duration: 500, easing: tween.easeIn, delay: delay, onFinish: function onFinish() { self.destroy(); } }); } }); }); // Bridge class to represent the bridge being built var Bridge = Container.expand(function () { var self = Container.call(this); var bridgeGraphicsBG = self.attachAsset('bridge', { anchorX: .5, anchorY: 1 }); bridgeGraphicsBG.tint = 0x949494; var bridgeGraphics = self.attachAsset('bridge', { anchorX: .5, anchorY: 1, scaleY: 0 }); var bridgeShadow = shadowContainer.attachAsset('shadow', { anchorX: .5, anchorY: 1 }); self.setHeight = function (height) { self.height = height; bridgeShadow.width = self.width + 40; bridgeShadow.height = self.height + 40; }; self.update = function () { bridgeShadow.rotation = self.rotation; bridgeShadow.x = self.x - Math.sin(bridgeShadow.rotation) * 20; bridgeShadow.y = self.y + Math.cos(bridgeShadow.rotation) * 20; }; self.remove = function () { bridgeShadow.destroy(); self.destroy(); }; self.setProgress = function (progress) { bridgeGraphics.scale.y = progress; }; // Method to update the bridge's width based on voice pitch }); // Character class to represent the character in the game var Character = Container.expand(function () { var self = Container.call(this); var characterGraphics = self.attachAsset('character', { anchorX: 0.5, anchorY: 1 }); characterGraphics.rotation = .02; self.currentPlatform = undefined; self.state = 'walking'; var mouseIsDown = false; game.down = function () { mouseIsDown = true; }; function dropBridge() { if (self.state == 'bridge') { self.state = 'dropping'; if (isFirst) { isFirst = false; tutorial.hide(); } var nextPlatform = platforms[currentPlatformOffset + 1]; var platformGap = nextPlatform.x - self.currentPlatform.x - self.currentPlatform.realWidth + 26; var platformOffset = currentBridge.height - platformGap; if (platformOffset < 0) { //die due to short bridge tween(currentBridge, { rotation: Math.PI }, { duration: 1000, easing: tween.bounceOut }); LK.setTimeout(function () { self.state = 'dieshort'; }, 550); LK.setTimeout(function () { LK.getSound('thump').play(); }, 200); return; } else if (platformOffset > nextPlatform.realWidth) { //die due to large bridge LK.setTimeout(function () { self.state = 'dielong'; }, 550); } else { //you survive ticksToDrop -= 2; LK.setTimeout(function () { currentPlatformOffset++; self.currentPlatform = nextPlatform; self.state = 'walking'; }, 520); if (!nextPlatform.finish) { var nwidth = 100 + Math.random() * 50; var targetPitch = pitches[currentPlatformOffset + 1]; var np = addPlatform(platforms[currentPlatformOffset + 1].x + platforms[currentPlatformOffset + 1].realWidth + targetPitch - nwidth / 2 - 25, nwidth); var npTargetY = np.y; np.y = 3500; tween(np, { y: npTargetY }, { duration: 500, easing: tween.easeOut }); } } tween(currentBridge, { rotation: Math.PI / 2 }, { duration: 500, easing: tween.bounceOut }); LK.setTimeout(function () { LK.getSound('thump').play(); }, 50); LK.setTimeout(function () { for (var a = 0; a < 10; a++) { container.addChild(new DirtParticle(self.currentPlatform.x + self.currentPlatform.realWidth + Math.random() * currentBridge.height - 26, nextPlatform.y - 10)); } }, 200); //currentBridge.height = platformGap + nextPlatform.width; } } game.up = function () { if (mouseIsDown) { // dropBridge(); } mouseIsDown = false; }; var ticksToDrop = 60; var curentTicksToDrop = 0; var isFirst = true; var pitchMultipliers = [1, 2, 4]; var pitchMultiplierOffset = 2; self.update = function () { switch (self.state) { case 'walking': { var targetX = self.currentPlatform.x + self.currentPlatform.realWidth - self.width / 2 - 15; self.x += 25; if (self.x >= targetX) { if (self.currentPlatform.finish) { LK.showYouWin(); self.state = "won"; return; } self.x = targetX; self.state = 'bridge'; addNewBridge(self.currentPlatform.x + self.currentPlatform.realWidth - 25); curentTicksToDrop = 0; if (currentPlatformOffset == 7) { for (var a = 0; a < 100; a++) { var r = game.addChildAt(new Arrow(), 0); } var octaveBoost = game.addChild(new OctaveBoost()); octaveBoost.x = 1024; // Center horizontally octaveBoost.y = 1366 + 300; // Center vertically octaveBoost.alpha = 0; tween(octaveBoost, { y: 1366, alpha: 1 }, { duration: 300, easing: tween.easeOut, onFinish: function onFinish() { tween(octaveBoost, { y: 1366 - 300, alpha: 0 }, { duration: 300, easing: tween.easeIn, onFinish: function onFinish() { octaveBoost.destroy(); }, delay: 1000 }); } }); } } break; } case 'bridge': { if (isFirst && facekit.volume < .1) { break; } if (isFirst) { var best = 10000000; var newPitchOffset = 0; for (var a = 0; a < pitchMultipliers.length; a++) { var testPitch = pitches[0] * pitchMultipliers[a] / 2; var dist = Math.abs(facekit.pitch - testPitch); if (dist < best) { best = dist; newPitchOffset = a; } } //debugLabel.setText(best + " - " + newPitchOffset); if (pitchMultiplierOffset != newPitchOffset) { pitchMultiplierOffset = newPitchOffset; curentTicksToDrop = 0; } if (best < 50) { curentTicksToDrop += .8; currentBridge.setProgress(curentTicksToDrop / ticksToDrop); } else { curentTicksToDrop = 0; } } else { curentTicksToDrop++; currentBridge.setProgress(curentTicksToDrop / ticksToDrop); } if (facekit.volume > .1) { var targetHeight = Math.max(facekit.pitch / pitchMultipliers[pitchMultiplierOffset] * 2, 50); var newHeight = currentBridge.height - (currentBridge.height - targetHeight) / 12; if (facekit.pitch < 3000) { currentBridge.setHeight(newHeight); } } debugLabel.setText("Volume: ".concat(facekit.volume.toFixed(2), "\nPitch: ").concat(facekit.pitch.toFixed(2))); if (curentTicksToDrop >= ticksToDrop) { if (isFirst) { currentBridge.setHeight(pitches[currentPlatformOffset]); } dropBridge(); } break; } case 'dielong': case 'dieshort': { self.x += 20; var targetX = self.currentPlatform.x + self.currentPlatform.realWidth + self.width / 2 + 50; if (self.state == 'dielong') { targetX = self.currentPlatform.x + self.currentPlatform.realWidth + currentBridge.height + self.width / 2 + 50; } if (self.x > targetX) { self.state = 'died'; tween(self, { x: self.x + 150, y: 3500 }, { duration: 500, easing: tween.easeIn }); LK.setTimeout(function () { LK.effects.flashScreen(0xff0000, 1000); LK.showGameOver(); }, 500); } break; } } var targetX = -character.x + 400 - container.x; if (targetX <= 0) { container.x += targetX / 15; shadowContainer.x = container.x; } }; }); var DirtParticle = Container.expand(function (x, y) { var self = Container.call(this); var dirtGraphicsBG = self.attachAsset('dirtparticle', { anchorX: 0.5, anchorY: .5 }); dirtGraphicsBG.tint = 0x0; var dirtGraphics = self.attachAsset('dirtparticle', { anchorX: 0.5, anchorY: .5 }); dirtGraphics.scale.set(.5, .5); var speed = Math.random() * 3; var angle = -Math.random() * Math.PI; var scale = 1; self.x = x, self.y = y; // Update function to handle fading self.update = function () { scale -= 0.02; // Reduce alpha to fade out self.scale.set(scale, scale); if (scale <= 0) { self.destroy(); // Remove particle when fully transparent } self.x += Math.cos(angle) * speed; self.y += Math.sin(angle) * speed; }; }); var OctaveBoost = Container.expand(function () { var self = Container.call(this); var octaveBoostGraphicsBG = self.attachAsset('octaveboost', { anchorX: 0.5, anchorY: 0.5 }); octaveBoostGraphicsBG.x = 15; octaveBoostGraphicsBG.y = 15; octaveBoostGraphicsBG.tint = 0x0; var octaveBoostGraphics = self.attachAsset('octaveboost', { anchorX: 0.5, anchorY: 0.5 }); }); // Platform class to represent the platform in the game var Platform = Container.expand(function (width, finish, x, y, name, _double) { var self = Container.call(this); var platformGraphics = self.attachAsset('platform', { anchorX: 0, anchorY: 0 }); // Add a label to the platform at the top center var platformLabel = self.addChild(new Text2(name, { size: 60, weight: 800, fill: 0x000000, align: 'center' })); platformLabel.anchor.set(0.5, 0); // Center the label horizontally at the top platformLabel.x = width / 2; // Position label at the center of the platform platformLabel.y = 20; // Slightly above the platform if (_double) { platformLabel.x -= 10; var doubleLabel = self.addChild(new Text2("2", { size: 40, fill: 0x000000, align: 'center' })); doubleLabel.anchor.set(0, 0); doubleLabel.x = platformLabel.x + platformLabel.width / 2; doubleLabel.y = 20; } var platformShadow = shadowContainer.attachAsset('shadow', { anchorX: 0, anchorY: 0 }); self.finish = finish; if (finish) { var trophy = shadowContainer.attachAsset('trophy', { anchorX: .5, anchorY: 1, x: x + width / 2, y: y - 10 }); trophy.alpha = 0; trophy.scale.set(0, 0); tween(trophy, { alpha: 1, scaleX: 1, scaleY: 1 }, { duration: 100, delay: 500 }); } platformGraphics.height = 500; platformGraphics.width = width; platformShadow.width = width + 40; platformShadow.height = platformGraphics.height + 40; self.realWidth = width; this.update = function () { platformShadow.x = self.x - 20; platformShadow.y = self.y - 20; }; this.remove = function () { platformShadow.destroy(); self.destroy(); }; }); // Tutorial class to represent the tutorial in the game var Tutorial = Container.expand(function () { var self = Container.call(this); var dashContainer = self.addChild(new Container()); var dashes = []; for (var a = 0; a < 21; a++) { var shadow = dashContainer.attachAsset('shadow', { anchorX: 0.5, anchorY: 0.5, x: -2048 / 2 + a * ((2048 - 100) / 20) + 50, width: 50 + 20, height: 10 + 20 }); var dash = dashContainer.attachAsset('dash', { anchorX: 0.5, anchorY: 0.5, x: -2048 / 2 + a * ((2048 - 100) / 20) + 50 }); dashes.push(dash); } dashContainer.y = 780; var tutorialGraphics = self.attachAsset('mic', { anchorX: 0.5, anchorY: 0.5, y: -100 }); var tutorialGraphics = self.attachAsset('tutorial', { anchorX: 0.5, anchorY: 0.5, y: 300 }); self.hide = function () { tween(self, { y: self.y - 400, alpha: 0 }, { easing: tween.easeIn, duration: 500 }); }; }); /**** * Initialize Game ****/ var game = new LK.Game({ backgroundColor: 0x000000 //Init game with black background }); /**** * Game Code ****/ // Platform class to represent the platform in the game var pitches = [261.63, 293.66, 329.63, 349.23, 392.00, 440.00, 493.88, 261.63 * 2, 293.66 * 2, 329.63 * 2, 349.23 * 2, 392.00 * 2, 440.00 * 2, 493.88 * 2]; var names = ["Do", "Re", "Mi", "Fa", "Sol", "La", "Ti"]; var tutorial = game.addChild(new Tutorial()); tutorial.x = 2048 / 2; tutorial.y = 2732 / 2; var shadowContainer = game.addChild(new Container()); // Create a debug label to display volume and pitch var debugLabel = new Text2('', { size: 30, weight: 600, fill: 0xFFFFFF, align: 'right' }); debugLabel.alpha = .5; debugLabel.anchor.set(1, 0); // Anchor to the top-right corner LK.gui.topRight.addChild(debugLabel); var container = game.addChild(new Container()); var platforms = []; var bridges = []; function addPlatform(x, width) { var platform = container.addChild(new Platform(width, platforms.length >= pitches.length, x, 2400, names[(platforms.length - 1) % names.length], platforms.length - 1 >= names.length)); platform.y = 2400; platform.x = x; platforms.push(platform); for (var a = 0; a < platforms.length - 4; a++) { if (platforms[a]) { platforms[a].remove(); platforms[a] = undefined; } } return platform; } addPlatform(0, 500); addPlatform(pitches[0] + 500 - 75 - 25, 150); var character = container.addChild(new Character()); var currentPlatformOffset = 0; character.currentPlatform = platforms[currentPlatformOffset]; character.y = 2402 - 5; character.x = -200; var currentBridge; function addNewBridge(x) { currentBridge = container.addChildAt(new Bridge(), 0); currentBridge.setHeight(50); currentBridge.scale.set(0, 0); tween(currentBridge, { scaleX: 1, scaleY: 1 }, { duration: 100, easing: tween.easeIn }); currentBridge.y = 2400 + 25; currentBridge.x = x; bridges.push(currentBridge); for (var a = 0; a < bridges.length - 4; a++) { if (bridges[a]) { bridges[a].remove(); bridges[a] = undefined; } } }

PitchBridge by Benjaminsen

Images

Sounds