Upit | Learn about creating the game NOT QUITE MY TEMPO! with gen AI

/**** 
* Plugins
****/ 
var tween = LK.import("@upit/tween.v1");

/**** 
* Classes
****/ 
// DrumPad: Interactive drum pad at the bottom
var DrumPad = Container.expand(function () {
	var self = Container.call(this);
	// .padType: 'kick', 'snare', etc. (set after creation)
	self.padType = null;
	self.asset = null;
	// .isPressed: for visual feedback
	self.isPressed = false;
	// Set up asset
	self.setPadType = function (type) {
		self.padType = type;
		var assetId = type + 'Pad';
		if (self.asset) self.removeChild(self.asset);
		var size = PAD_SIZES[type];
		self.asset = self.attachAsset(assetId, {
			anchorX: 0.5,
			anchorY: 0.5,
			width: size ? size.w : undefined,
			height: size ? size.h : undefined
		});
	};
	// Visual feedback on press
	self.flash = function () {
		if (!self.asset) return;
		tween(self.asset, {
			alpha: 0.5
		}, {
			duration: 60,
			onFinish: function onFinish() {
				tween(self.asset, {
					alpha: 1
				}, {
					duration: 120
				});
			}
		});
	};
	return self;
});
// Note: Falling note bar
var Note = Container.expand(function () {
	var self = Container.call(this);
	// .noteType: 'kick', 'snare', etc.
	self.noteType = null;
	self.asset = null;
	self.hit = false; // If already hit
	self.setNoteType = function (type) {
		self.noteType = type;
		var assetId = type + 'Note';
		if (self.asset) self.removeChild(self.asset);
		self.asset = self.attachAsset(assetId, {
			anchorX: 0.5,
			anchorY: 0.5
		});
	};
	// Called every tick
	self.update = function () {
		self.y += noteSpeed;
	};
	return self;
});

/**** 
* Initialize Game
****/ 
var game = new LK.Game({
	backgroundColor: 0x181818
});

/**** 
* Game Code
****/ 
// --- Game constants ---
// Drum pads (kick, snare, hi-hat, tom1, tom2, crash1, crash2)
// Note bars (falling notes)
// Sounds for each drum
// Music track
// Drum pad sounds
var PAD_TYPES = ['kick', 'snare', 'hihat', 'tom1', 'crash1'];
var PAD_COLS = PAD_TYPES.length;
var GAME_W = 2048,
	GAME_H = 2732;
var PAD_Y = GAME_H - 320; // Y position for pads
// --- Pad Sizing and Full-Width Layout ---
// Each pad will be as wide as possible, with no side gaps, and all pads will be adjacent.
var PAD_SIZES = {};
var PAD_X_POSITIONS = {};
var padWidth = GAME_W / PAD_COLS;
var padCenterY = PAD_Y;
for (var i = 0; i < PAD_COLS; i++) {
	var type = PAD_TYPES[i];
	// Pad width: fill the column, pad height: keep previous aspect ratio (or max of previous)
	// We'll use the original aspect ratio for each pad type, but scale width to padWidth
	// Use original aspect ratios from previous PAD_SIZES
	var origSizes = {
		'kick': {
			w: 420,
			h: 210
		},
		'snare': {
			w: 340,
			h: 170
		},
		'hihat': {
			w: 300,
			h: 150
		},
		'tom1': {
			w: 320,
			h: 160
		},
		'crash1': {
			w: 340,
			h: 170
		}
	};
	var aspect = origSizes[type].h / origSizes[type].w;
	var w = padWidth;
	var h = w * aspect;
	PAD_SIZES[type] = {
		w: w,
		h: h
	};
	// Center of each pad: left edge + half width + i*padWidth
	PAD_X_POSITIONS[type] = i * padWidth + padWidth / 2;
}
// Swap hihat and tom1 X positions
var tmpX = PAD_X_POSITIONS['hihat'];
PAD_X_POSITIONS['hihat'] = PAD_X_POSITIONS['tom1'];
PAD_X_POSITIONS['tom1'] = tmpX;
// Note spawn area (top)
var NOTE_START_Y = -60;
var NOTE_TARGET_Y = PAD_Y - 80; // Where notes should be hit
// Note speed (pixels per frame)
var noteSpeed = 18;
// Timing window (pixels): how close to NOTE_TARGET_Y is a "hit"
var HIT_WINDOW = 100;
// --- State ---
var pads = [];
var notes = [];
var score = 0;
var combo = 0;
var maxCombo = 0;
var lastTick = 0;
var noteIndex = 0;
var isPlaying = false;
var songStartTick = 0;
// --- UI ---
var scoreTxt = new Text2('0', {
	size: 120,
	fill: "#fff"
});
scoreTxt.anchor.set(0.5, 0);
LK.gui.top.addChild(scoreTxt);
var comboTxt = new Text2('', {
	size: 70,
	fill: 0xFFE066
});
comboTxt.anchor.set(0.5, 0);
LK.gui.top.addChild(comboTxt);
comboTxt.y = 130;
// --- Song Data (custom pattern) ---
// Each entry: {tick: <when to spawn>, type: <padType>}
var songNotes = [{
	tick: 0,
	type: 'hihat'
}, {
	tick: 2,
	type: 'kick'
}, {
	tick: 19,
	type: 'hihat'
}, {
	tick: 38,
	type: 'hihat'
}, {
	tick: 38,
	type: 'snare'
}, {
	tick: 58,
	type: 'hihat'
}, {
	tick: 68,
	type: 'kick'
}, {
	tick: 74,
	type: 'hihat'
}, {
	tick: 78,
	type: 'kick'
}, {
	tick: 84,
	type: 'hihat'
}, {
	tick: 107,
	type: 'hihat'
}, {
	tick: 107,
	type: 'kick'
}, {
	tick: 127,
	type: 'hihat'
}, {
	tick: 128,
	type: 'snare'
}, {
	tick: 148,
	type: 'hihat'
}, {
	tick: 166,
	type: 'hihat'
}, {
	tick: 167,
	type: 'kick'
}, {
	tick: 186,
	type: 'hihat'
}, {
	tick: 205,
	type: 'hihat'
}, {
	tick: 205,
	type: 'snare'
}, {
	tick: 226,
	type: 'hihat'
}, {
	tick: 245,
	type: 'hihat'
}, {
	tick: 245,
	type: 'kick'
}, {
	tick: 265,
	type: 'hihat'
}, {
	tick: 265,
	type: 'kick'
}, {
	tick: 284,
	type: 'hihat'
}, {
	tick: 285,
	type: 'snare'
}, {
	tick: 307,
	type: 'hihat'
}, {
	tick: 328,
	type: 'kick'
}, {
	tick: 328,
	type: 'crash1'
}];
var isRecording = false;
var recordedNotes = [];
var recordStartTick = 0;
// --- Recording UI and Logic ---
var recordTxt = new Text2('KAYIT: KAPALI', {
	size: 70,
	fill: 0xFF6666
});
recordTxt.anchor.set(0.5, 0);
LK.gui.top.addChild(recordTxt);
recordTxt.x = LK.gui.top.width / 2;
recordTxt.y = 220;
// Toggle recording on tap of recordTxt
recordTxt.interactive = true;
recordTxt.buttonMode = true;
recordTxt.down = function () {
	if (!isRecording) {
		// Start recording
		isRecording = true;
		recordedNotes = [];
		recordStartTick = LK.ticks;
		recordTxt.setText('KAYIT: AÇIK');
		comboTxt.setText('KAYIT MODU');
	} else {
		// Stop recording and save as new level
		isRecording = false;
		recordTxt.setText('KAYIT: KAPALI');
		comboTxt.setText('');
		// Convert recordedNotes to songNotes format
		if (recordedNotes.length > 0) {
			// Normalize ticks to start at 0
			var minTick = recordedNotes.length > 0 ? recordedNotes[0].tick : 0;
			for (var i = 0; i < recordedNotes.length; i++) {
				recordedNotes[i].tick -= minTick;
			}
			songNotes = [];
			for (var i = 0; i < recordedNotes.length; i++) {
				songNotes.push({
					tick: recordedNotes[i].tick,
					type: recordedNotes[i].type
				});
			}
			// Print recorded notes as code in the console
			var codeStr = "var songNotes = [\n";
			for (var i = 0; i < recordedNotes.length; i++) {
				codeStr += "  { tick: " + recordedNotes[i].tick + ", type: '" + recordedNotes[i].type + "' },\n";
			}
			codeStr += "];";
			console.log(codeStr);
			// Restart game with new level
			startGame();
		}
	}
};
LK.gui.top.addChild(recordTxt);
// --- Record pad hits if in recording mode ---
function recordPadHit(padType) {
	if (isRecording) {
		var tick = LK.ticks - recordStartTick;
		recordedNotes.push({
			tick: tick,
			type: padType
		});
	}
}
// --- Create Drum Pads ---
for (var i = 0; i < PAD_COLS; i++) {
	var pad = new DrumPad();
	pad.setPadType(PAD_TYPES[i]);
	pad.x = PAD_X_POSITIONS[PAD_TYPES[i]];
	pad.y = PAD_Y;
	pad.padIndex = i;
	pads.push(pad);
	game.addChild(pad);
}
// --- Pad Touch Handling ---
var activePad = null;
function getPadAt(x, y) {
	for (var i = 0; i < pads.length; i++) {
		var pad = pads[i];
		var dx = x - pad.x,
			dy = y - pad.y;
		var rx = pad.asset.width / 2,
			ry = pad.asset.height / 2;
		if (dx * dx / (rx * rx) + dy * dy / (ry * ry) <= 1) return pad;
	}
	return null;
}
game.down = function (x, y, obj) {
	var pad = getPadAt(x, y);
	if (pad) {
		activePad = pad;
		handlePadHit(pad);
	}
};
game.move = function (x, y, obj) {
	// For multi-touch, could be extended
};
game.up = function (x, y, obj) {
	activePad = null;
};
// --- Note Spawning ---
function spawnNote(type) {
	var note = new Note();
	note.setNoteType(type);
	note.x = PAD_X_POSITIONS[type];
	note.y = NOTE_START_Y;
	note.noteType = type;
	note.hit = false;
	notes.push(note);
	game.addChild(note);
}
// --- Pad Hit Logic ---
function handlePadHit(pad) {
	// Play sound
	var soundId = pad.padType + 'Sound';
	var sound = LK.getSound(soundId);
	if (sound) {
		if (sound.stop) sound.stop(); // Stop if already playing to avoid overlap/delay
		sound.play();
	}
	// Record pad hit if in recording mode
	recordPadHit(pad.padType);
	// Visual feedback
	pad.flash();
	// Find closest note of this type in hit window
	var bestNote = null,
		bestDist = HIT_WINDOW;
	for (var i = 0; i < notes.length; i++) {
		var note = notes[i];
		if (note.hit) continue;
		if (note.noteType !== pad.padType) continue;
		var dist = Math.abs(note.y - NOTE_TARGET_Y);
		if (dist < bestDist) {
			bestDist = dist;
			bestNote = note;
		}
	}
	if (bestNote) {
		// Hit!
		bestNote.hit = true;
		LK.effects.flashObject(bestNote, 0xffffff, 120);
		tween(bestNote, {
			alpha: 0
		}, {
			duration: 120,
			onFinish: function onFinish() {
				bestNote.destroy();
			}
		});
		notes.splice(notes.indexOf(bestNote), 1);
		score += 100;
		combo += 1;
		if (combo > maxCombo) maxCombo = combo;
		scoreTxt.setText(score);
		comboTxt.setText(combo > 1 ? combo + 'x' : '');
	} else {
		// Miss!
		LK.effects.flashScreen(0xff0000, 200);
		combo = 0;
		comboTxt.setText('');
	}
}
// --- Game Update ---
game.update = function () {
	if (!isPlaying) return;
	// If recording, do not spawn notes, do not check for misses, do not end game
	if (isRecording) {
		// Allow player to play freely, but do not process notes
		return;
	}
	// Spawn notes according to songNotes
	var relTick = LK.ticks - songStartTick;
	while (noteIndex < songNotes.length && songNotes[noteIndex].tick <= relTick) {
		spawnNote(songNotes[noteIndex].type);
		noteIndex++;
	}
	// Update notes, check for misses
	for (var i = notes.length - 1; i >= 0; i--) {
		var note = notes[i];
		note.update();
		if (!note.hit && note.y > NOTE_TARGET_Y + HIT_WINDOW) {
			// Missed note
			LK.effects.flashObject(note, 0xff0000, 120);
			tween(note, {
				alpha: 0
			}, {
				duration: 120,
				onFinish: function onFinish() {
					note.destroy();
				}
			});
			notes.splice(i, 1);
			combo = 0;
			comboTxt.setText('');
		}
		// Remove notes that go off screen
		if (note.y > GAME_H + 100) {
			if (notes.indexOf(note) !== -1) notes.splice(notes.indexOf(note), 1);
			note.destroy();
		}
	}
	// End of song
	if (noteIndex >= songNotes.length && notes.length === 0) {
		isPlaying = false;
		LK.stopMusic();
		LK.showYouWin();
	}
};
// --- Start Game ---
function startGame() {
	score = 0;
	combo = 0;
	maxCombo = 0;
	scoreTxt.setText('0');
	comboTxt.setText('');
	notes = [];
	noteIndex = 0;
	isPlaying = true;
	songStartTick = LK.ticks;
	// Preload all drum sounds to reduce latency
	var preloadSounds = ['kickSound', 'snareSound', 'hihatSound', 'tom1Sound', 'crash1Sound'];
	for (var i = 0; i < preloadSounds.length; i++) {
		var s = LK.getSound(preloadSounds[i]);
		if (s && s.play) {
			// Play at zero volume to warm up, then stop immediately
			s.volume = 0;
			s.play();
			if (s.stop) s.stop();
			s.volume = 1;
		}
	}
	// Preload music to reduce latency
	var preloadMusic = LK.getMusic ? LK.getMusic('MasterofUpit') : null;
	if (preloadMusic && preloadMusic.play) {
		preloadMusic.volume = 0;
		preloadMusic.play();
		if (preloadMusic.stop) preloadMusic.stop();
		preloadMusic.volume = 1;
	}
	// Stop any currently playing music to ensure clean start
	LK.stopMusic();
	// Play MasterofUpit music with no fade, no loop, and start at full volume for best sync
	LK.playMusic('MasterofUpit', {
		loop: false,
		fade: {
			start: 1,
			end: 1,
			duration: 0
		}
	});
}
startGame();
// --- Game Over Handling (missed notes or end of song) ---
// Handled by LK.showYouWin() or LK.showGameOver() as needed
// --- Responsive UI (center score) ---
scoreTxt.x = LK.gui.top.width / 2;
comboTxt.x = LK.gui.top.width / 2;
Creation History

Images

Sounds & Music

Used plugins
