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);
}
}
}; ===================================================================
--- original.js
+++ change.js
@@ -1,6 +1,370 @@
-/****
+/****
+* 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: 0x000000
-});
\ No newline at end of file
+ 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);
+ }
+ }
+};
\ No newline at end of file