/**** * Plugins ****/ var tween = LK.import("@upit/tween.v1"); /**** * Classes ****/ var Character = Container.expand(function (characterType) { var self = Container.call(this); self.characterType = characterType; self.isTransformed = false; // Base character graphics var baseGraphics = self.attachAsset(characterType + 'Base', { anchorX: 0.5, anchorY: 0.5 }); // Character name text var nameText = new Text2(characterType.toUpperCase(), { size: 60, fill: 0xFFFFFF }); nameText.anchor.set(0.5, 0.5); nameText.x = 0; nameText.y = -250; self.addChild(nameText); // Transformation elements self.transformElements = []; self.createTransformationElements = function () { // Clear existing transformation elements for (var i = 0; i < self.transformElements.length; i++) { self.transformElements[i].destroy(); } self.transformElements = []; if (self.characterType === 'dash') { // Create muscles var leftMuscle = LK.getAsset('muscle', { anchorX: 0.5, anchorY: 0.5 }); leftMuscle.x = -120; leftMuscle.y = -50; self.addChild(leftMuscle); self.transformElements.push(leftMuscle); var rightMuscle = LK.getAsset('muscle', { anchorX: 0.5, anchorY: 0.5 }); rightMuscle.x = 120; rightMuscle.y = -50; self.addChild(rightMuscle); self.transformElements.push(rightMuscle); } else if (self.characterType === 'dot') { // Create teeth var leftTooth = LK.getAsset('tooth', { anchorX: 0.5, anchorY: 0.5 }); leftTooth.x = -40; leftTooth.y = 50; self.addChild(leftTooth); self.transformElements.push(leftTooth); var rightTooth = LK.getAsset('tooth', { anchorX: 0.5, anchorY: 0.5 }); rightTooth.x = 40; rightTooth.y = 50; self.addChild(rightTooth); self.transformElements.push(rightTooth); } else if (self.characterType === 'del') { // Create stretchy arms var leftArm = LK.getAsset('arm', { anchorX: 0, anchorY: 0.5 }); leftArm.x = -200; leftArm.y = 0; leftArm.scaleX = 1.5; self.addChild(leftArm); self.transformElements.push(leftArm); var rightArm = LK.getAsset('arm', { anchorX: 1, anchorY: 0.5 }); rightArm.x = 200; rightArm.y = 0; rightArm.scaleX = 1.5; self.addChild(rightArm); self.transformElements.push(rightArm); } else if (self.characterType === 'dee') { // Create cape var cape = LK.getAsset('cape', { anchorX: 0.5, anchorY: 0 }); cape.x = 0; cape.y = -200; self.addChild(cape); self.transformElements.push(cape); } }; self.transform = function () { if (self.isTransformed) { self.untransform(); return; } self.isTransformed = true; self.createTransformationElements(); // Base transformation animation tween(baseGraphics, { scaleX: 1.2, scaleY: 1.2 }, { duration: 300, easing: tween.elasticOut }); // Character-specific transformations and animations if (self.characterType === 'dash') { LK.getSound('powerUp').play(); LK.effects.flashObject(self, 0xffff00, 500); // Animate muscles growing for (var i = 0; i < self.transformElements.length; i++) { var muscle = self.transformElements[i]; muscle.scaleX = 0; muscle.scaleY = 0; tween(muscle, { scaleX: 1.3, scaleY: 1.3 }, { duration: 400, easing: tween.bounceOut }); } } else if (self.characterType === 'dot') { LK.getSound('chomp').play(); // Animate teeth appearing and chomping for (var i = 0; i < self.transformElements.length; i++) { var tooth = self.transformElements[i]; tooth.scaleY = 0; tween(tooth, { scaleY: 1.5 }, { duration: 300, easing: tween.bounceOut, onFinish: function onFinish() { // Chomping animation tween(tooth, { scaleY: 1.2 }, { duration: 200 }); } }); } } else if (self.characterType === 'del') { LK.getSound('stretch').play(); // Animate arms stretching for (var i = 0; i < self.transformElements.length; i++) { var arm = self.transformElements[i]; var originalScaleX = arm.scaleX; tween(arm, { scaleX: originalScaleX * 2 }, { duration: 600, easing: tween.elasticOut }); } } else if (self.characterType === 'dee') { LK.getSound('fly').play(); // Animate cape and flying motion var cape = self.transformElements[0]; cape.alpha = 0; tween(cape, { alpha: 1 }, { duration: 300 }); // Flying animation - move up and down self.startFlying(); } }; self.startFlying = function () { if (!self.isTransformed || self.characterType !== 'dee') return; var originalY = self.y; tween(self, { y: originalY - 30 }, { duration: 1000, easing: tween.easeInOut, onFinish: function onFinish() { if (self.isTransformed) { tween(self, { y: originalY + 30 }, { duration: 1000, easing: tween.easeInOut, onFinish: function onFinish() { if (self.isTransformed) { self.startFlying(); } } }); } } }); }; self.untransform = function () { self.isTransformed = false; // Stop any ongoing animations tween.stop(self); tween.stop(baseGraphics); // Reset base graphics tween(baseGraphics, { scaleX: 1, scaleY: 1 }, { duration: 200, easing: tween.easeOut }); // Remove transformation elements for (var i = 0; i < self.transformElements.length; i++) { tween(self.transformElements[i], { alpha: 0, scaleX: 0, scaleY: 0 }, { duration: 200, easing: tween.easeIn, onFinish: function onFinish() { if (self.transformElements[i]) { self.transformElements[i].destroy(); } } }); } self.transformElements = []; // Reset position for Dee if (self.characterType === 'dee') { tween(self, { y: self.originalY }, { duration: 300 }); } }; self.down = function (x, y, obj) { self.transform(); }; return self; }); /**** * Initialize Game ****/ var game = new LK.Game({ backgroundColor: 0x87ceeb }); /**** * Game Code ****/ // Sound effects // Transformation effects // Character base assets // Title text var titleText = new Text2('PBS KIDS SUPER HEROES', { size: 80, fill: 0xFFFFFF }); titleText.anchor.set(0.5, 0.5); titleText.x = 2048 / 2; titleText.y = 200; game.addChild(titleText); // Instructions text var instructionsText = new Text2('TAP TO TRANSFORM!', { size: 60, fill: 0xFFFF00 }); instructionsText.anchor.set(0.5, 0.5); instructionsText.x = 2048 / 2; instructionsText.y = 300; game.addChild(instructionsText); // Create characters var characters = []; var characterTypes = ['dash', 'dot', 'del', 'dee']; var characterNames = ['DASH', 'DOT', 'DEL', 'DEE']; // Position characters in a 2x2 grid var gridPositions = [{ x: 2048 / 4, y: 2732 / 2 - 200 }, // Top left { x: 3 * 2048 / 4, y: 2732 / 2 - 200 }, // Top right { x: 2048 / 4, y: 2732 / 2 + 200 }, // Bottom left { x: 3 * 2048 / 4, y: 2732 / 2 + 200 } // Bottom right ]; for (var i = 0; i < characterTypes.length; i++) { var character = new Character(characterTypes[i]); character.x = gridPositions[i].x; character.y = gridPositions[i].y; character.originalY = character.y; // Store original Y for reset game.addChild(character); characters.push(character); } // Add sparkle effects periodically var sparkleTimer = 0; game.update = function () { sparkleTimer++; // Add sparkle effects every 2 seconds if (sparkleTimer % 120 === 0) { for (var i = 0; i < characters.length; i++) { if (characters[i].isTransformed) { LK.effects.flashObject(characters[i], 0xffffff, 300); } } } };
/****
* Plugins
****/
var tween = LK.import("@upit/tween.v1");
/****
* Classes
****/
var Character = Container.expand(function (characterType) {
var self = Container.call(this);
self.characterType = characterType;
self.isTransformed = false;
// Base character graphics
var baseGraphics = self.attachAsset(characterType + 'Base', {
anchorX: 0.5,
anchorY: 0.5
});
// Character name text
var nameText = new Text2(characterType.toUpperCase(), {
size: 60,
fill: 0xFFFFFF
});
nameText.anchor.set(0.5, 0.5);
nameText.x = 0;
nameText.y = -250;
self.addChild(nameText);
// Transformation elements
self.transformElements = [];
self.createTransformationElements = function () {
// Clear existing transformation elements
for (var i = 0; i < self.transformElements.length; i++) {
self.transformElements[i].destroy();
}
self.transformElements = [];
if (self.characterType === 'dash') {
// Create muscles
var leftMuscle = LK.getAsset('muscle', {
anchorX: 0.5,
anchorY: 0.5
});
leftMuscle.x = -120;
leftMuscle.y = -50;
self.addChild(leftMuscle);
self.transformElements.push(leftMuscle);
var rightMuscle = LK.getAsset('muscle', {
anchorX: 0.5,
anchorY: 0.5
});
rightMuscle.x = 120;
rightMuscle.y = -50;
self.addChild(rightMuscle);
self.transformElements.push(rightMuscle);
} else if (self.characterType === 'dot') {
// Create teeth
var leftTooth = LK.getAsset('tooth', {
anchorX: 0.5,
anchorY: 0.5
});
leftTooth.x = -40;
leftTooth.y = 50;
self.addChild(leftTooth);
self.transformElements.push(leftTooth);
var rightTooth = LK.getAsset('tooth', {
anchorX: 0.5,
anchorY: 0.5
});
rightTooth.x = 40;
rightTooth.y = 50;
self.addChild(rightTooth);
self.transformElements.push(rightTooth);
} else if (self.characterType === 'del') {
// Create stretchy arms
var leftArm = LK.getAsset('arm', {
anchorX: 0,
anchorY: 0.5
});
leftArm.x = -200;
leftArm.y = 0;
leftArm.scaleX = 1.5;
self.addChild(leftArm);
self.transformElements.push(leftArm);
var rightArm = LK.getAsset('arm', {
anchorX: 1,
anchorY: 0.5
});
rightArm.x = 200;
rightArm.y = 0;
rightArm.scaleX = 1.5;
self.addChild(rightArm);
self.transformElements.push(rightArm);
} else if (self.characterType === 'dee') {
// Create cape
var cape = LK.getAsset('cape', {
anchorX: 0.5,
anchorY: 0
});
cape.x = 0;
cape.y = -200;
self.addChild(cape);
self.transformElements.push(cape);
}
};
self.transform = function () {
if (self.isTransformed) {
self.untransform();
return;
}
self.isTransformed = true;
self.createTransformationElements();
// Base transformation animation
tween(baseGraphics, {
scaleX: 1.2,
scaleY: 1.2
}, {
duration: 300,
easing: tween.elasticOut
});
// Character-specific transformations and animations
if (self.characterType === 'dash') {
LK.getSound('powerUp').play();
LK.effects.flashObject(self, 0xffff00, 500);
// Animate muscles growing
for (var i = 0; i < self.transformElements.length; i++) {
var muscle = self.transformElements[i];
muscle.scaleX = 0;
muscle.scaleY = 0;
tween(muscle, {
scaleX: 1.3,
scaleY: 1.3
}, {
duration: 400,
easing: tween.bounceOut
});
}
} else if (self.characterType === 'dot') {
LK.getSound('chomp').play();
// Animate teeth appearing and chomping
for (var i = 0; i < self.transformElements.length; i++) {
var tooth = self.transformElements[i];
tooth.scaleY = 0;
tween(tooth, {
scaleY: 1.5
}, {
duration: 300,
easing: tween.bounceOut,
onFinish: function onFinish() {
// Chomping animation
tween(tooth, {
scaleY: 1.2
}, {
duration: 200
});
}
});
}
} else if (self.characterType === 'del') {
LK.getSound('stretch').play();
// Animate arms stretching
for (var i = 0; i < self.transformElements.length; i++) {
var arm = self.transformElements[i];
var originalScaleX = arm.scaleX;
tween(arm, {
scaleX: originalScaleX * 2
}, {
duration: 600,
easing: tween.elasticOut
});
}
} else if (self.characterType === 'dee') {
LK.getSound('fly').play();
// Animate cape and flying motion
var cape = self.transformElements[0];
cape.alpha = 0;
tween(cape, {
alpha: 1
}, {
duration: 300
});
// Flying animation - move up and down
self.startFlying();
}
};
self.startFlying = function () {
if (!self.isTransformed || self.characterType !== 'dee') return;
var originalY = self.y;
tween(self, {
y: originalY - 30
}, {
duration: 1000,
easing: tween.easeInOut,
onFinish: function onFinish() {
if (self.isTransformed) {
tween(self, {
y: originalY + 30
}, {
duration: 1000,
easing: tween.easeInOut,
onFinish: function onFinish() {
if (self.isTransformed) {
self.startFlying();
}
}
});
}
}
});
};
self.untransform = function () {
self.isTransformed = false;
// Stop any ongoing animations
tween.stop(self);
tween.stop(baseGraphics);
// Reset base graphics
tween(baseGraphics, {
scaleX: 1,
scaleY: 1
}, {
duration: 200,
easing: tween.easeOut
});
// Remove transformation elements
for (var i = 0; i < self.transformElements.length; i++) {
tween(self.transformElements[i], {
alpha: 0,
scaleX: 0,
scaleY: 0
}, {
duration: 200,
easing: tween.easeIn,
onFinish: function onFinish() {
if (self.transformElements[i]) {
self.transformElements[i].destroy();
}
}
});
}
self.transformElements = [];
// Reset position for Dee
if (self.characterType === 'dee') {
tween(self, {
y: self.originalY
}, {
duration: 300
});
}
};
self.down = function (x, y, obj) {
self.transform();
};
return self;
});
/****
* Initialize Game
****/
var game = new LK.Game({
backgroundColor: 0x87ceeb
});
/****
* Game Code
****/
// Sound effects
// Transformation effects
// Character base assets
// Title text
var titleText = new Text2('PBS KIDS SUPER HEROES', {
size: 80,
fill: 0xFFFFFF
});
titleText.anchor.set(0.5, 0.5);
titleText.x = 2048 / 2;
titleText.y = 200;
game.addChild(titleText);
// Instructions text
var instructionsText = new Text2('TAP TO TRANSFORM!', {
size: 60,
fill: 0xFFFF00
});
instructionsText.anchor.set(0.5, 0.5);
instructionsText.x = 2048 / 2;
instructionsText.y = 300;
game.addChild(instructionsText);
// Create characters
var characters = [];
var characterTypes = ['dash', 'dot', 'del', 'dee'];
var characterNames = ['DASH', 'DOT', 'DEL', 'DEE'];
// Position characters in a 2x2 grid
var gridPositions = [{
x: 2048 / 4,
y: 2732 / 2 - 200
},
// Top left
{
x: 3 * 2048 / 4,
y: 2732 / 2 - 200
},
// Top right
{
x: 2048 / 4,
y: 2732 / 2 + 200
},
// Bottom left
{
x: 3 * 2048 / 4,
y: 2732 / 2 + 200
} // Bottom right
];
for (var i = 0; i < characterTypes.length; i++) {
var character = new Character(characterTypes[i]);
character.x = gridPositions[i].x;
character.y = gridPositions[i].y;
character.originalY = character.y; // Store original Y for reset
game.addChild(character);
characters.push(character);
}
// Add sparkle effects periodically
var sparkleTimer = 0;
game.update = function () {
sparkleTimer++;
// Add sparkle effects every 2 seconds
if (sparkleTimer % 120 === 0) {
for (var i = 0; i < characters.length; i++) {
if (characters[i].isTransformed) {
LK.effects.flashObject(characters[i], 0xffffff, 300);
}
}
}
};