/**** * 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
};