Code edit (1 edits merged)
Please save this source code
User prompt
Record & Play TV Studio
Initial prompt
Toca tv (2013). Make a video by recording. Tap and hold the red button to record, then tap the check mark when your done, tap on the play button to watch your own video on the tv till the powerpuff girls clapping and cheering and paper bags throwing
/**** * Plugins ****/ var tween = LK.import("@upit/tween.v1"); var facekit = LK.import("@upit/facekit.v1"); /**** * Classes ****/ var ControlPanel = Container.expand(function () { var self = Container.call(this); // Record Button var recordButton = self.attachAsset('recordButton', { anchorX: 0.5, anchorY: 0.5 }); recordButton.y = 0; recordButton.x = -200; // Play Button var playButton = self.attachAsset('playButton', { anchorX: 0.5, anchorY: 0.5 }); playButton.y = 0; playButton.x = 0; playButton.alpha = 0.5; // Check Button var checkButton = self.attachAsset('checkButton', { anchorX: 0.5, anchorY: 0.5 }); checkButton.y = 0; checkButton.x = 200; checkButton.alpha = 0; // Record indicator text var recordText = new Text2('REC', { size: 60, fill: 0xFF0000 }); recordText.anchor.set(0.5, 0.5); recordText.x = -200; recordText.y = -150; recordText.alpha = 0; self.addChild(recordText); self.getRecordButton = function () { return recordButton; }; self.getPlayButton = function () { return playButton; }; self.getCheckButton = function () { return checkButton; }; self.getRecordText = function () { return recordText; }; self.showRecording = function () { checkButton.alpha = 1; recordText.alpha = 1; playButton.alpha = 0.3; }; self.showPlaying = function () { checkButton.alpha = 0; recordText.alpha = 0; playButton.alpha = 1; recordButton.alpha = 0.5; }; self.showIdle = function () { checkButton.alpha = 0; recordText.alpha = 0; playButton.alpha = hasRecording ? 1 : 0.5; recordButton.alpha = 1; }; return self; }); var PaperBag = Container.expand(function () { var self = Container.call(this); var bag = self.attachAsset('paperBag', { anchorX: 0.5, anchorY: 0.5 }); self.throwAcrossScreen = function () { self.x = -100; self.y = Math.random() * 400 + 200; self.rotation = Math.random() * Math.PI * 2; tween(self, { x: 2148, rotation: self.rotation + Math.PI * 4 }, { duration: 2000 + Math.random() * 1000, easing: tween.easeOut, onFinish: function onFinish() { self.destroy(); } }); }; return self; }); var PowerpuffGirl = Container.expand(function (color, name) { var self = Container.call(this); var girl = self.attachAsset(name, { anchorX: 0.5, anchorY: 1 }); self.celebrate = function () { // Bounce animation tween(self, { scaleX: 1.2, scaleY: 1.2 }, { duration: 300, easing: tween.bounceOut }); tween(self, { scaleX: 1, scaleY: 1 }, { duration: 300, easing: tween.bounceOut }); // Jump animation tween(self, { y: self.y - 100 }, { duration: 400, easing: tween.easeOut }); tween(self, { y: self.y }, { duration: 400, easing: tween.bounceOut }); }; return self; }); var TVStudio = Container.expand(function () { var self = Container.call(this); // TV Frame var tvFrame = self.attachAsset('tvFrame', { anchorX: 0.5, anchorY: 0.5 }); // TV Screen var tvScreen = self.attachAsset('tvScreen', { anchorX: 0.5, anchorY: 0.5 }); self.getScreen = function () { return tvScreen; }; return self; }); /**** * Initialize Game ****/ var game = new LK.Game({ backgroundColor: 0x87ceeb }); /**** * Game Code ****/ // Game state var gameState = 'idle'; // 'idle', 'recording', 'playing', 'celebrating' var isRecording = false; var hasRecording = false; var recordingStartTime = 0; var recordingDuration = 0; var playbackStartTime = 0; // Create TV Studio var tvStudio = game.addChild(new TVStudio()); tvStudio.x = 2048 / 2; tvStudio.y = 800; // Create Control Panel var controlPanel = game.addChild(new ControlPanel()); controlPanel.x = 2048 / 2; controlPanel.y = 1800; // Create title text var titleText = new Text2('TV STUDIO', { size: 120, fill: 0xFFFFFF }); titleText.anchor.set(0.5, 0.5); titleText.x = 2048 / 2; titleText.y = 200; game.addChild(titleText); // Instructions text var instructionText = new Text2('Hold RED to record, tap PLAY to watch!', { size: 80, fill: 0x333333 }); instructionText.anchor.set(0.5, 0.5); instructionText.x = 2048 / 2; instructionText.y = 2400; game.addChild(instructionText); // Powerpuff Girls (initially hidden) var blossom = game.addChild(new PowerpuffGirl(0xff69b4, 'blossom')); blossom.x = 400; blossom.y = 2732; blossom.alpha = 0; var bubbles = game.addChild(new PowerpuffGirl(0x87ceeb, 'bubbles')); bubbles.x = 1024; bubbles.y = 2732; bubbles.alpha = 0; var buttercup = game.addChild(new PowerpuffGirl(0x9acd32, 'buttercup')); buttercup.x = 1648; buttercup.y = 2732; buttercup.alpha = 0; // Paper bags array var paperBags = []; // Recording blinking effect var recordBlinkTimer = 0; function startRecording() { if (gameState !== 'idle') return; gameState = 'recording'; isRecording = true; recordingStartTime = LK.ticks; controlPanel.showRecording(); LK.getSound('recordStart').play(); // Update instruction instructionText.setText('Recording... Release or tap CHECK to stop'); } function stopRecording() { if (gameState !== 'recording') return; gameState = 'idle'; isRecording = false; hasRecording = true; recordingDuration = LK.ticks - recordingStartTime; controlPanel.showIdle(); LK.getSound('recordStop').play(); // Update instruction instructionText.setText('Tap PLAY to watch your video!'); } function startPlayback() { if (gameState !== 'idle' || !hasRecording) return; gameState = 'playing'; playbackStartTime = LK.ticks; controlPanel.showPlaying(); // Show camera feed on TV screen tvStudio.getScreen().alpha = 0.8; // Update instruction instructionText.setText('Playing your video...'); } function startCelebration() { gameState = 'celebrating'; // Show Powerpuff Girls blossom.alpha = 1; bubbles.alpha = 1; buttercup.alpha = 1; // Move them up tween(blossom, { y: 2400 }, { duration: 800, easing: tween.easeOut }); tween(bubbles, { y: 2400 }, { duration: 900, easing: tween.easeOut }); tween(buttercup, { y: 2400 }, { duration: 1000, easing: tween.easeOut }); // Celebrate LK.setTimeout(function () { blossom.celebrate(); }, 800); LK.setTimeout(function () { bubbles.celebrate(); }, 1000); LK.setTimeout(function () { buttercup.celebrate(); }, 1200); // Play cheer sound LK.getSound('cheer').play(); // Throw paper bags for (var i = 0; i < 8; i++) { LK.setTimeout(function () { var bag = game.addChild(new PaperBag()); paperBags.push(bag); bag.throwAcrossScreen(); }, i * 200); } // Update instruction instructionText.setText('Great job! Tap RED to record again!'); // Reset to idle after celebration LK.setTimeout(function () { gameState = 'idle'; controlPanel.showIdle(); // Hide Powerpuff Girls tween(blossom, { y: 2732, alpha: 0 }, { duration: 1000, easing: tween.easeIn }); tween(bubbles, { y: 2732, alpha: 0 }, { duration: 1000, easing: tween.easeIn }); tween(buttercup, { y: 2732, alpha: 0 }, { duration: 1000, easing: tween.easeIn }); tvStudio.getScreen().alpha = 1; }, 4000); } // Touch handlers game.down = function (x, y, obj) { var localPos = controlPanel.toLocal({ x: x, y: y }); // Record button if (Math.abs(localPos.x - -200) < 100 && Math.abs(localPos.y) < 100) { startRecording(); } // Play button if (Math.abs(localPos.x) < 75 && Math.abs(localPos.y) < 75) { startPlayback(); } // Check button if (Math.abs(localPos.x - 200) < 60 && Math.abs(localPos.y) < 60) { stopRecording(); } }; game.up = function (x, y, obj) { if (isRecording) { stopRecording(); } }; // Main game loop game.update = function () { // Recording blink effect if (gameState === 'recording') { recordBlinkTimer++; if (recordBlinkTimer % 30 < 15) { controlPanel.getRecordText().alpha = 1; } else { controlPanel.getRecordText().alpha = 0.3; } } // Check if playback should end if (gameState === 'playing') { var playbackTime = LK.ticks - playbackStartTime; if (playbackTime >= recordingDuration) { startCelebration(); } } // Clean up destroyed paper bags for (var i = paperBags.length - 1; i >= 0; i--) { if (paperBags[i].destroyed) { paperBags.splice(i, 1); } } };
/****
* Plugins
****/
var tween = LK.import("@upit/tween.v1");
var facekit = LK.import("@upit/facekit.v1");
/****
* Classes
****/
var ControlPanel = Container.expand(function () {
var self = Container.call(this);
// Record Button
var recordButton = self.attachAsset('recordButton', {
anchorX: 0.5,
anchorY: 0.5
});
recordButton.y = 0;
recordButton.x = -200;
// Play Button
var playButton = self.attachAsset('playButton', {
anchorX: 0.5,
anchorY: 0.5
});
playButton.y = 0;
playButton.x = 0;
playButton.alpha = 0.5;
// Check Button
var checkButton = self.attachAsset('checkButton', {
anchorX: 0.5,
anchorY: 0.5
});
checkButton.y = 0;
checkButton.x = 200;
checkButton.alpha = 0;
// Record indicator text
var recordText = new Text2('REC', {
size: 60,
fill: 0xFF0000
});
recordText.anchor.set(0.5, 0.5);
recordText.x = -200;
recordText.y = -150;
recordText.alpha = 0;
self.addChild(recordText);
self.getRecordButton = function () {
return recordButton;
};
self.getPlayButton = function () {
return playButton;
};
self.getCheckButton = function () {
return checkButton;
};
self.getRecordText = function () {
return recordText;
};
self.showRecording = function () {
checkButton.alpha = 1;
recordText.alpha = 1;
playButton.alpha = 0.3;
};
self.showPlaying = function () {
checkButton.alpha = 0;
recordText.alpha = 0;
playButton.alpha = 1;
recordButton.alpha = 0.5;
};
self.showIdle = function () {
checkButton.alpha = 0;
recordText.alpha = 0;
playButton.alpha = hasRecording ? 1 : 0.5;
recordButton.alpha = 1;
};
return self;
});
var PaperBag = Container.expand(function () {
var self = Container.call(this);
var bag = self.attachAsset('paperBag', {
anchorX: 0.5,
anchorY: 0.5
});
self.throwAcrossScreen = function () {
self.x = -100;
self.y = Math.random() * 400 + 200;
self.rotation = Math.random() * Math.PI * 2;
tween(self, {
x: 2148,
rotation: self.rotation + Math.PI * 4
}, {
duration: 2000 + Math.random() * 1000,
easing: tween.easeOut,
onFinish: function onFinish() {
self.destroy();
}
});
};
return self;
});
var PowerpuffGirl = Container.expand(function (color, name) {
var self = Container.call(this);
var girl = self.attachAsset(name, {
anchorX: 0.5,
anchorY: 1
});
self.celebrate = function () {
// Bounce animation
tween(self, {
scaleX: 1.2,
scaleY: 1.2
}, {
duration: 300,
easing: tween.bounceOut
});
tween(self, {
scaleX: 1,
scaleY: 1
}, {
duration: 300,
easing: tween.bounceOut
});
// Jump animation
tween(self, {
y: self.y - 100
}, {
duration: 400,
easing: tween.easeOut
});
tween(self, {
y: self.y
}, {
duration: 400,
easing: tween.bounceOut
});
};
return self;
});
var TVStudio = Container.expand(function () {
var self = Container.call(this);
// TV Frame
var tvFrame = self.attachAsset('tvFrame', {
anchorX: 0.5,
anchorY: 0.5
});
// TV Screen
var tvScreen = self.attachAsset('tvScreen', {
anchorX: 0.5,
anchorY: 0.5
});
self.getScreen = function () {
return tvScreen;
};
return self;
});
/****
* Initialize Game
****/
var game = new LK.Game({
backgroundColor: 0x87ceeb
});
/****
* Game Code
****/
// Game state
var gameState = 'idle'; // 'idle', 'recording', 'playing', 'celebrating'
var isRecording = false;
var hasRecording = false;
var recordingStartTime = 0;
var recordingDuration = 0;
var playbackStartTime = 0;
// Create TV Studio
var tvStudio = game.addChild(new TVStudio());
tvStudio.x = 2048 / 2;
tvStudio.y = 800;
// Create Control Panel
var controlPanel = game.addChild(new ControlPanel());
controlPanel.x = 2048 / 2;
controlPanel.y = 1800;
// Create title text
var titleText = new Text2('TV STUDIO', {
size: 120,
fill: 0xFFFFFF
});
titleText.anchor.set(0.5, 0.5);
titleText.x = 2048 / 2;
titleText.y = 200;
game.addChild(titleText);
// Instructions text
var instructionText = new Text2('Hold RED to record, tap PLAY to watch!', {
size: 80,
fill: 0x333333
});
instructionText.anchor.set(0.5, 0.5);
instructionText.x = 2048 / 2;
instructionText.y = 2400;
game.addChild(instructionText);
// Powerpuff Girls (initially hidden)
var blossom = game.addChild(new PowerpuffGirl(0xff69b4, 'blossom'));
blossom.x = 400;
blossom.y = 2732;
blossom.alpha = 0;
var bubbles = game.addChild(new PowerpuffGirl(0x87ceeb, 'bubbles'));
bubbles.x = 1024;
bubbles.y = 2732;
bubbles.alpha = 0;
var buttercup = game.addChild(new PowerpuffGirl(0x9acd32, 'buttercup'));
buttercup.x = 1648;
buttercup.y = 2732;
buttercup.alpha = 0;
// Paper bags array
var paperBags = [];
// Recording blinking effect
var recordBlinkTimer = 0;
function startRecording() {
if (gameState !== 'idle') return;
gameState = 'recording';
isRecording = true;
recordingStartTime = LK.ticks;
controlPanel.showRecording();
LK.getSound('recordStart').play();
// Update instruction
instructionText.setText('Recording... Release or tap CHECK to stop');
}
function stopRecording() {
if (gameState !== 'recording') return;
gameState = 'idle';
isRecording = false;
hasRecording = true;
recordingDuration = LK.ticks - recordingStartTime;
controlPanel.showIdle();
LK.getSound('recordStop').play();
// Update instruction
instructionText.setText('Tap PLAY to watch your video!');
}
function startPlayback() {
if (gameState !== 'idle' || !hasRecording) return;
gameState = 'playing';
playbackStartTime = LK.ticks;
controlPanel.showPlaying();
// Show camera feed on TV screen
tvStudio.getScreen().alpha = 0.8;
// Update instruction
instructionText.setText('Playing your video...');
}
function startCelebration() {
gameState = 'celebrating';
// Show Powerpuff Girls
blossom.alpha = 1;
bubbles.alpha = 1;
buttercup.alpha = 1;
// Move them up
tween(blossom, {
y: 2400
}, {
duration: 800,
easing: tween.easeOut
});
tween(bubbles, {
y: 2400
}, {
duration: 900,
easing: tween.easeOut
});
tween(buttercup, {
y: 2400
}, {
duration: 1000,
easing: tween.easeOut
});
// Celebrate
LK.setTimeout(function () {
blossom.celebrate();
}, 800);
LK.setTimeout(function () {
bubbles.celebrate();
}, 1000);
LK.setTimeout(function () {
buttercup.celebrate();
}, 1200);
// Play cheer sound
LK.getSound('cheer').play();
// Throw paper bags
for (var i = 0; i < 8; i++) {
LK.setTimeout(function () {
var bag = game.addChild(new PaperBag());
paperBags.push(bag);
bag.throwAcrossScreen();
}, i * 200);
}
// Update instruction
instructionText.setText('Great job! Tap RED to record again!');
// Reset to idle after celebration
LK.setTimeout(function () {
gameState = 'idle';
controlPanel.showIdle();
// Hide Powerpuff Girls
tween(blossom, {
y: 2732,
alpha: 0
}, {
duration: 1000,
easing: tween.easeIn
});
tween(bubbles, {
y: 2732,
alpha: 0
}, {
duration: 1000,
easing: tween.easeIn
});
tween(buttercup, {
y: 2732,
alpha: 0
}, {
duration: 1000,
easing: tween.easeIn
});
tvStudio.getScreen().alpha = 1;
}, 4000);
}
// Touch handlers
game.down = function (x, y, obj) {
var localPos = controlPanel.toLocal({
x: x,
y: y
});
// Record button
if (Math.abs(localPos.x - -200) < 100 && Math.abs(localPos.y) < 100) {
startRecording();
}
// Play button
if (Math.abs(localPos.x) < 75 && Math.abs(localPos.y) < 75) {
startPlayback();
}
// Check button
if (Math.abs(localPos.x - 200) < 60 && Math.abs(localPos.y) < 60) {
stopRecording();
}
};
game.up = function (x, y, obj) {
if (isRecording) {
stopRecording();
}
};
// Main game loop
game.update = function () {
// Recording blink effect
if (gameState === 'recording') {
recordBlinkTimer++;
if (recordBlinkTimer % 30 < 15) {
controlPanel.getRecordText().alpha = 1;
} else {
controlPanel.getRecordText().alpha = 0.3;
}
}
// Check if playback should end
if (gameState === 'playing') {
var playbackTime = LK.ticks - playbackStartTime;
if (playbackTime >= recordingDuration) {
startCelebration();
}
}
// Clean up destroyed paper bags
for (var i = paperBags.length - 1; i >= 0; i--) {
if (paperBags[i].destroyed) {
paperBags.splice(i, 1);
}
}
};