:quality(85)/https://cdn.frvr.ai/67a5046315483cfd543c17db.png)
:quality(85)/https://cdn.upit.com/6q46t4oitm4j2bfnxesqilhb.jpeg)
:quality(85)/https://cdn.frvr.ai/67a504d415483cfd543c17f3.png)
#puzzle
#voicecontrol
#creativity
#bridgebuilding
#uniquegameplay
Creation History
/****
* 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));
}
}, 400);
//currentBridge.height = platformGap + nextPlatform.width;
}
}
game.up = function () {
if (mouseIsDown) {
// dropBridge();
}
mouseIsDown = false;
};
var ticksToDrop = 80;
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 (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 < 75) {
curentTicksToDrop += .8;
currentBridge.setProgress(curentTicksToDrop / ticksToDrop);
} else {
curentTicksToDrop = 0;
}
} else {
curentTicksToDrop++;
currentBridge.setProgress(curentTicksToDrop / ticksToDrop);
}
var targetHeight = Math.max(facekit.pitch / pitchMultipliers[pitchMultiplierOffset] * 2, 50);
var newHeight = currentBridge.height - (currentBridge.height - targetHeight) / 10;
if (facekit.pitch < 1500) {
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 dirtGraphics = self.attachAsset('dirtparticle', {
anchorX: 0.5,
anchorY: 1
});
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 -= 20;
var doubleLabel = self.addChild(new Text2("2", {
size: 40,
fill: 0x000000,
align: 'center'
}));
doubleLabel.anchor.set(1, 0);
doubleLabel.x = platformLabel.x + platformLabel.width / 2;
doubleLabel.y = 20 + platformLabel.height;
}
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.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;
}
}
} ===================================================================
--- original.js
+++ change.js
@@ -117,77 +117,15 @@
mouseIsDown = true;
};
function dropBridge() {
if (self.state == 'bridge') {
- var _addPlatform = 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;
- };
- var _addNewBridge = function _addNewBridge(x) {
- currentBridge = container.addChildAt(new Bridge(), 0);
- 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;
- }
- }
- };
self.state = 'dropping';
if (isFirst) {
isFirst = false;
tutorial.hide();
}
var nextPlatform = platforms[currentPlatformOffset + 1];
- var platformGap = nextPlatform.x - sa;
- // 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 = [];
- _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;
- elf.currentPlatform.x - self.currentPlatform.realWidth + 26;
+ 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, {
@@ -218,9 +156,9 @@
}, 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 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
@@ -242,9 +180,9 @@
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));
}
- }, 300);
+ }, 400);
//currentBridge.height = platformGap + nextPlatform.width;
}
}
game.up = function () {
@@ -535,13 +473,11 @@
/****
* Game Code
****/
// Platform class to represent the platform in the game
-// 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 = new Tutorial();
-game.addChild(tutorial);
+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
Images
:quality(85)/https://cdn.frvr.ai/67a3c4c8bd39ab2eb707dbd7.png%3F3)
White gameplay character, black outline. Single Game Texture. In-Game asset. 2d. Blank background. High contrast. No shadows
:quality(85)/https://cdn.frvr.ai/67a5087515483cfd543c1878.png%3F3)
White ribbon banner with text "Hit this pitch with your voice". Single Game Texture. In-Game asset. 2d. Blank background. High contrast. No shadows
:quality(85)/https://cdn.frvr.ai/67a52b9415483cfd543c19d1.png%3F3)
:quality(85)/https://cdn.frvr.ai/67a52f8515483cfd543c1a56.png%3F3)
:quality(85)/https://cdn.frvr.ai/67a68de85b4513a298e0757e.png%3F3)
:quality(85)/https://cdn.frvr.ai/67a68e1c5b4513a298e07589.png%3F3)
Fast white up arrow. Simple design. Black background.. Single Game Texture. In-Game asset. 2d. Blank background. High contrast. No shadows
Sounds & Music
Used plugins
@upit/facekit@upit/tween
