Code edit (1 edits merged)
Please save this source code
User prompt
Piano Play
Initial prompt
Toca piano (2012). Rosie 🐹 is playing piano. Tap on the piano keys, tap on the Mary had a little lamb button, old macdonald button, jingle bells button, twinkle twinkle little star button, or the abc song button to make the Piano do a sequence, tap on the piano sequence keys
/****
* Plugins
****/
var tween = LK.import("@upit/tween.v1");
/****
* Classes
****/
var PianoKey = Container.expand(function (note, isBlack, position) {
var self = Container.call(this);
self.note = note;
self.isBlack = isBlack;
self.isPressed = false;
var keyAsset = isBlack ? 'blackKey' : 'whiteKey';
var keyPressedAsset = isBlack ? 'blackKeyPressed' : 'whiteKeyPressed';
self.normalGraphics = self.attachAsset(keyAsset, {
anchorX: 0.5,
anchorY: 0
});
self.pressedGraphics = self.attachAsset(keyPressedAsset, {
anchorX: 0.5,
anchorY: 0
});
self.pressedGraphics.visible = false;
self.x = position.x;
self.y = position.y;
self.press = function () {
if (self.isPressed) return;
self.isPressed = true;
self.normalGraphics.visible = false;
self.pressedGraphics.visible = true;
LK.getSound(self.note).play();
var releaseTimeout = LK.setTimeout(function () {
self.release();
}, 200);
};
self.release = function () {
self.isPressed = false;
self.normalGraphics.visible = true;
self.pressedGraphics.visible = false;
};
self.down = function (x, y, obj) {
self.press();
};
return self;
});
var SongButton = Container.expand(function (songName, position) {
var self = Container.call(this);
self.songName = songName;
self.buttonGraphics = self.attachAsset('songButton', {
anchorX: 0.5,
anchorY: 0.5
});
self.buttonText = new Text2(songName, {
size: 32,
fill: 0xFFFFFF
});
self.buttonText.anchor.set(0.5, 0.5);
self.addChild(self.buttonText);
self.x = position.x;
self.y = position.y;
self.down = function (x, y, obj) {
tween(self, {
scaleX: 0.95,
scaleY: 0.95
}, {
duration: 100,
onFinish: function onFinish() {
tween(self, {
scaleX: 1,
scaleY: 1
}, {
duration: 100
});
}
});
playSong(self.songName);
};
return self;
});
/****
* Initialize Game
****/
var game = new LK.Game({
backgroundColor: 0x87CEEB
});
/****
* Game Code
****/
var keys = [];
var songButtons = [];
var currentSong = null;
var songTimeout = null;
var songIndex = 0;
// Define songs with note sequences and timings
var songs = {
"Mary Had a Little Lamb": [{
note: "E4",
duration: 500
}, {
note: "D4",
duration: 500
}, {
note: "C4",
duration: 500
}, {
note: "D4",
duration: 500
}, {
note: "E4",
duration: 500
}, {
note: "E4",
duration: 500
}, {
note: "E4",
duration: 1000
}, {
note: "D4",
duration: 500
}, {
note: "D4",
duration: 500
}, {
note: "D4",
duration: 1000
}, {
note: "E4",
duration: 500
}, {
note: "G4",
duration: 500
}, {
note: "G4",
duration: 1000
}],
"Old MacDonald": [{
note: "G4",
duration: 500
}, {
note: "G4",
duration: 500
}, {
note: "G4",
duration: 500
}, {
note: "D4",
duration: 500
}, {
note: "E4",
duration: 500
}, {
note: "E4",
duration: 500
}, {
note: "D4",
duration: 1000
}, {
note: "B4",
duration: 500
}, {
note: "B4",
duration: 500
}, {
note: "A4",
duration: 500
}, {
note: "A4",
duration: 500
}, {
note: "G4",
duration: 1000
}],
"Jingle Bells": [{
note: "E4",
duration: 500
}, {
note: "E4",
duration: 500
}, {
note: "E4",
duration: 1000
}, {
note: "E4",
duration: 500
}, {
note: "E4",
duration: 500
}, {
note: "E4",
duration: 1000
}, {
note: "E4",
duration: 500
}, {
note: "G4",
duration: 500
}, {
note: "C4",
duration: 500
}, {
note: "D4",
duration: 500
}, {
note: "E4",
duration: 1000
}],
"Twinkle Twinkle Little Star": [{
note: "C4",
duration: 500
}, {
note: "C4",
duration: 500
}, {
note: "G4",
duration: 500
}, {
note: "G4",
duration: 500
}, {
note: "A4",
duration: 500
}, {
note: "A4",
duration: 500
}, {
note: "G4",
duration: 1000
}, {
note: "F4",
duration: 500
}, {
note: "F4",
duration: 500
}, {
note: "E4",
duration: 500
}, {
note: "E4",
duration: 500
}, {
note: "D4",
duration: 500
}, {
note: "D4",
duration: 500
}, {
note: "C4",
duration: 1000
}],
"ABC Song": [{
note: "C4",
duration: 500
}, {
note: "C4",
duration: 500
}, {
note: "G4",
duration: 500
}, {
note: "G4",
duration: 500
}, {
note: "A4",
duration: 500
}, {
note: "A4",
duration: 500
}, {
note: "G4",
duration: 1000
}, {
note: "F4",
duration: 500
}, {
note: "F4",
duration: 500
}, {
note: "E4",
duration: 500
}, {
note: "E4",
duration: 500
}, {
note: "D4",
duration: 1000
}]
};
// Create piano keys
var whiteKeyNotes = ["C4", "D4", "E4", "F4", "G4", "A4", "B4", "C5", "D5", "E5", "F5", "G5"];
var blackKeyNotes = ["Cs4", "Ds4", "Fs4", "Gs4", "As4", "Cs5", "Ds5"];
var blackKeyPositions = [1, 2, 4, 5, 6, 8, 9]; // Positions relative to white keys
var keyboardStartX = 200;
var keyboardY = 1800;
var whiteKeyWidth = 90;
var whiteKeySpacing = 95;
// Create white keys
for (var i = 0; i < whiteKeyNotes.length; i++) {
var whiteKey = new PianoKey(whiteKeyNotes[i], false, {
x: keyboardStartX + i * whiteKeySpacing,
y: keyboardY
});
keys.push(whiteKey);
game.addChild(whiteKey);
}
// Create black keys
for (var i = 0; i < blackKeyNotes.length; i++) {
var blackKeyPos = blackKeyPositions[i];
var blackKey = new PianoKey(blackKeyNotes[i], true, {
x: keyboardStartX + blackKeyPos * whiteKeySpacing - whiteKeySpacing / 2,
y: keyboardY
});
keys.push(blackKey);
game.addChild(blackKey);
}
// Create song buttons
var songNames = ["Mary Had a Little Lamb", "Old MacDonald", "Jingle Bells", "Twinkle Twinkle Little Star", "ABC Song"];
var buttonStartY = 400;
var buttonSpacing = 120;
for (var i = 0; i < songNames.length; i++) {
var songButton = new SongButton(songNames[i], {
x: 1024,
y: buttonStartY + i * buttonSpacing
});
songButtons.push(songButton);
game.addChild(songButton);
}
function playSong(songName) {
if (currentSong) {
LK.clearTimeout(songTimeout);
currentSong = null;
}
var songNotes = songs[songName];
if (!songNotes) return;
currentSong = songNotes;
songIndex = 0;
playNextNote();
}
function playNextNote() {
if (!currentSong || songIndex >= currentSong.length) {
currentSong = null;
return;
}
var noteData = currentSong[songIndex];
var note = noteData.note;
var duration = noteData.duration;
// Find and press the corresponding key
var keyToPress = null;
for (var i = 0; i < keys.length; i++) {
if (keys[i].note === note) {
keyToPress = keys[i];
break;
}
}
if (keyToPress) {
keyToPress.press();
}
songIndex++;
songTimeout = LK.setTimeout(function () {
playNextNote();
}, duration);
}
game.update = function () {
// Game update logic if needed
}; /****
* Plugins
****/
var tween = LK.import("@upit/tween.v1");
/****
* Classes
****/
var PianoKey = Container.expand(function (note, isBlack, position) {
var self = Container.call(this);
self.note = note;
self.isBlack = isBlack;
self.isPressed = false;
var keyAsset = isBlack ? 'blackKey' : 'whiteKey';
var keyPressedAsset = isBlack ? 'blackKeyPressed' : 'whiteKeyPressed';
self.normalGraphics = self.attachAsset(keyAsset, {
anchorX: 0.5,
anchorY: 0
});
self.pressedGraphics = self.attachAsset(keyPressedAsset, {
anchorX: 0.5,
anchorY: 0
});
self.pressedGraphics.visible = false;
self.x = position.x;
self.y = position.y;
self.press = function () {
if (self.isPressed) return;
self.isPressed = true;
self.normalGraphics.visible = false;
self.pressedGraphics.visible = true;
LK.getSound(self.note).play();
var releaseTimeout = LK.setTimeout(function () {
self.release();
}, 200);
};
self.release = function () {
self.isPressed = false;
self.normalGraphics.visible = true;
self.pressedGraphics.visible = false;
};
self.down = function (x, y, obj) {
self.press();
};
return self;
});
var SongButton = Container.expand(function (songName, position) {
var self = Container.call(this);
self.songName = songName;
self.buttonGraphics = self.attachAsset('songButton', {
anchorX: 0.5,
anchorY: 0.5
});
self.buttonText = new Text2(songName, {
size: 32,
fill: 0xFFFFFF
});
self.buttonText.anchor.set(0.5, 0.5);
self.addChild(self.buttonText);
self.x = position.x;
self.y = position.y;
self.down = function (x, y, obj) {
tween(self, {
scaleX: 0.95,
scaleY: 0.95
}, {
duration: 100,
onFinish: function onFinish() {
tween(self, {
scaleX: 1,
scaleY: 1
}, {
duration: 100
});
}
});
playSong(self.songName);
};
return self;
});
/****
* Initialize Game
****/
var game = new LK.Game({
backgroundColor: 0x87CEEB
});
/****
* Game Code
****/
var keys = [];
var songButtons = [];
var currentSong = null;
var songTimeout = null;
var songIndex = 0;
// Define songs with note sequences and timings
var songs = {
"Mary Had a Little Lamb": [{
note: "E4",
duration: 500
}, {
note: "D4",
duration: 500
}, {
note: "C4",
duration: 500
}, {
note: "D4",
duration: 500
}, {
note: "E4",
duration: 500
}, {
note: "E4",
duration: 500
}, {
note: "E4",
duration: 1000
}, {
note: "D4",
duration: 500
}, {
note: "D4",
duration: 500
}, {
note: "D4",
duration: 1000
}, {
note: "E4",
duration: 500
}, {
note: "G4",
duration: 500
}, {
note: "G4",
duration: 1000
}],
"Old MacDonald": [{
note: "G4",
duration: 500
}, {
note: "G4",
duration: 500
}, {
note: "G4",
duration: 500
}, {
note: "D4",
duration: 500
}, {
note: "E4",
duration: 500
}, {
note: "E4",
duration: 500
}, {
note: "D4",
duration: 1000
}, {
note: "B4",
duration: 500
}, {
note: "B4",
duration: 500
}, {
note: "A4",
duration: 500
}, {
note: "A4",
duration: 500
}, {
note: "G4",
duration: 1000
}],
"Jingle Bells": [{
note: "E4",
duration: 500
}, {
note: "E4",
duration: 500
}, {
note: "E4",
duration: 1000
}, {
note: "E4",
duration: 500
}, {
note: "E4",
duration: 500
}, {
note: "E4",
duration: 1000
}, {
note: "E4",
duration: 500
}, {
note: "G4",
duration: 500
}, {
note: "C4",
duration: 500
}, {
note: "D4",
duration: 500
}, {
note: "E4",
duration: 1000
}],
"Twinkle Twinkle Little Star": [{
note: "C4",
duration: 500
}, {
note: "C4",
duration: 500
}, {
note: "G4",
duration: 500
}, {
note: "G4",
duration: 500
}, {
note: "A4",
duration: 500
}, {
note: "A4",
duration: 500
}, {
note: "G4",
duration: 1000
}, {
note: "F4",
duration: 500
}, {
note: "F4",
duration: 500
}, {
note: "E4",
duration: 500
}, {
note: "E4",
duration: 500
}, {
note: "D4",
duration: 500
}, {
note: "D4",
duration: 500
}, {
note: "C4",
duration: 1000
}],
"ABC Song": [{
note: "C4",
duration: 500
}, {
note: "C4",
duration: 500
}, {
note: "G4",
duration: 500
}, {
note: "G4",
duration: 500
}, {
note: "A4",
duration: 500
}, {
note: "A4",
duration: 500
}, {
note: "G4",
duration: 1000
}, {
note: "F4",
duration: 500
}, {
note: "F4",
duration: 500
}, {
note: "E4",
duration: 500
}, {
note: "E4",
duration: 500
}, {
note: "D4",
duration: 1000
}]
};
// Create piano keys
var whiteKeyNotes = ["C4", "D4", "E4", "F4", "G4", "A4", "B4", "C5", "D5", "E5", "F5", "G5"];
var blackKeyNotes = ["Cs4", "Ds4", "Fs4", "Gs4", "As4", "Cs5", "Ds5"];
var blackKeyPositions = [1, 2, 4, 5, 6, 8, 9]; // Positions relative to white keys
var keyboardStartX = 200;
var keyboardY = 1800;
var whiteKeyWidth = 90;
var whiteKeySpacing = 95;
// Create white keys
for (var i = 0; i < whiteKeyNotes.length; i++) {
var whiteKey = new PianoKey(whiteKeyNotes[i], false, {
x: keyboardStartX + i * whiteKeySpacing,
y: keyboardY
});
keys.push(whiteKey);
game.addChild(whiteKey);
}
// Create black keys
for (var i = 0; i < blackKeyNotes.length; i++) {
var blackKeyPos = blackKeyPositions[i];
var blackKey = new PianoKey(blackKeyNotes[i], true, {
x: keyboardStartX + blackKeyPos * whiteKeySpacing - whiteKeySpacing / 2,
y: keyboardY
});
keys.push(blackKey);
game.addChild(blackKey);
}
// Create song buttons
var songNames = ["Mary Had a Little Lamb", "Old MacDonald", "Jingle Bells", "Twinkle Twinkle Little Star", "ABC Song"];
var buttonStartY = 400;
var buttonSpacing = 120;
for (var i = 0; i < songNames.length; i++) {
var songButton = new SongButton(songNames[i], {
x: 1024,
y: buttonStartY + i * buttonSpacing
});
songButtons.push(songButton);
game.addChild(songButton);
}
function playSong(songName) {
if (currentSong) {
LK.clearTimeout(songTimeout);
currentSong = null;
}
var songNotes = songs[songName];
if (!songNotes) return;
currentSong = songNotes;
songIndex = 0;
playNextNote();
}
function playNextNote() {
if (!currentSong || songIndex >= currentSong.length) {
currentSong = null;
return;
}
var noteData = currentSong[songIndex];
var note = noteData.note;
var duration = noteData.duration;
// Find and press the corresponding key
var keyToPress = null;
for (var i = 0; i < keys.length; i++) {
if (keys[i].note === note) {
keyToPress = keys[i];
break;
}
}
if (keyToPress) {
keyToPress.press();
}
songIndex++;
songTimeout = LK.setTimeout(function () {
playNextNote();
}, duration);
}
game.update = function () {
// Game update logic if needed
};