Upit | Learn about creating the game Demolition derby with gen AI

/**** * Plugins ****/ var tween = LK.import("@upit/tween.v1"); /**** * Initialize Game ****/ var game = new LK.Game({ backgroundColor: 0x000000 }); /**** * Game Code ****/ // Create gameplay background - 4/5 of screen height (top portion) var gameplayBackground = game.attachAsset('gameplayBg', { x: 0, y: 0, anchorX: 0, anchorY: 0 }); // Create carPlayer character on top of gameplayBackground var carPlayer = gameplayBackground.attachAsset('CarPlayer', { x: 1024, // Center horizontally y: 1800, // Position in lower portion of gameplay area anchorX: 0.5, anchorY: 0.5 }); // Create UI background - 1/5 of screen height (bottom portion) var uiBackground = game.attachAsset('uiBg', { x: 0, y: 2186, anchorX: 0, anchorY: 0 }); // Create joystickBG centered in UI background var joystickBG = uiBackground.attachAsset('JoystickBG', { x: 1024, // Center horizontally in UI y: 273, // Center vertically in UI (546/2 = 273) anchorX: 0.5, anchorY: 0.5 }); // Create JoystickPoinr centered in joystickBG var joystickPoint = joystickBG.attachAsset('JoystickPoinr', { x: 0, // Center horizontally in joystickBG y: 0, // Center vertically in joystickBG anchorX: 0.5, anchorY: 0.5 }); // Variables for dragging functionality var isDragging = false; var joystickRadius = 200; // Half of joystickBG width (400/2) // Mouse/touch down event for joystickPoint joystickPoint.down = function (x, y, obj) { isDragging = true; // Stop any existing tween on joystickPoint tween.stop(joystickPoint); }; // Mouse/touch move event for game (handles dragging) game.move = function (x, y, obj) { if (isDragging) { // Convert global coordinates to joystickBG local coordinates var localPos = joystickBG.toLocal(obj.position); // Calculate distance from center var distance = Math.sqrt(localPos.x * localPos.x + localPos.y * localPos.y); // Constrain movement within joystick circle if (distance <= joystickRadius) { // Move freely within the circle joystickPoint.x = localPos.x; joystickPoint.y = localPos.y; } else { // Constrain to circle edge var angle = Math.atan2(localPos.y, localPos.x); joystickPoint.x = Math.cos(angle) * joystickRadius; joystickPoint.y = Math.sin(angle) * joystickRadius; } } }; // Mouse/touch up event for game (stops dragging) game.up = function (x, y, obj) { if (isDragging) { isDragging = false; // Smoothly return joystick to center tween(joystickPoint, { x: 0, y: 0 }, { duration: 300, easing: tween.easeOut }); } };

===================================================================
--- original.js
+++ change.js
@@ -53,73 +53,47 @@
 	// Center vertically in joystickBG
 	anchorX: 0.5,
 	anchorY: 0.5
 });
-// Create pointer that appears on touch, positioned above all objects
-var pointer = game.attachAsset('Puntero', {
-	x: 0,
-	y: 0,
-	anchorX: 0.5,
-	anchorY: 0.5
-});
-pointer.visible = false; // Initially hidden
+// Variables for dragging functionality
 var isDragging = false;
-// Touch down event - show pointer at touch position
-game.down = function (x, y, obj) {
-	pointer.visible = true;
-	pointer.x = x;
-	pointer.y = y;
-	// Check if touch is within joystick area
-	var joystickGlobalPos = joystickBG.toGlobal({
-		x: 0,
-		y: 0
-	});
-	var distance = Math.sqrt(Math.pow(x - joystickGlobalPos.x, 2) + Math.pow(y - joystickGlobalPos.y, 2));
-	if (distance <= 200) {
-		// joystickBG radius is 200
-		isDragging = true;
-	}
+var joystickRadius = 200; // Half of joystickBG width (400/2)
+// Mouse/touch down event for joystickPoint
+joystickPoint.down = function (x, y, obj) {
+	isDragging = true;
+	// Stop any existing tween on joystickPoint
+	tween.stop(joystickPoint);
 };
-// Touch move event - update pointer position and joystick
+// Mouse/touch move event for game (handles dragging)
 game.move = function (x, y, obj) {
-	if (pointer.visible) {
-		pointer.x = x;
-		pointer.y = y;
-		if (isDragging) {
-			// Convert global pointer position to joystickBG local coordinates
-			var localPos = joystickBG.toLocal({
-				x: x,
-				y: y
-			});
-			// Limit joystick point within joystick background radius
-			var distance = Math.sqrt(localPos.x * localPos.x + localPos.y * localPos.y);
-			var maxRadius = 150; // Keep some margin within the joystickBG
-			if (distance > maxRadius) {
-				localPos.x = localPos.x / distance * maxRadius;
-				localPos.y = localPos.y / distance * maxRadius;
-			}
-			// Smoothly tween joystickPoint to the new position
-			tween(joystickPoint, {
-				x: localPos.x,
-				y: localPos.y
-			}, {
-				duration: 100,
-				easing: tween.easeOut
-			});
+	if (isDragging) {
+		// Convert global coordinates to joystickBG local coordinates
+		var localPos = joystickBG.toLocal(obj.position);
+		// Calculate distance from center
+		var distance = Math.sqrt(localPos.x * localPos.x + localPos.y * localPos.y);
+		// Constrain movement within joystick circle
+		if (distance <= joystickRadius) {
+			// Move freely within the circle
+			joystickPoint.x = localPos.x;
+			joystickPoint.y = localPos.y;
+		} else {
+			// Constrain to circle edge
+			var angle = Math.atan2(localPos.y, localPos.x);
+			joystickPoint.x = Math.cos(angle) * joystickRadius;
+			joystickPoint.y = Math.sin(angle) * joystickRadius;
 		}
 	}
 };
-// Touch up event - hide pointer and reset joystick
+// Mouse/touch up event for game (stops dragging)
 game.up = function (x, y, obj) {
-	pointer.visible = false;
 	if (isDragging) {
 		isDragging = false;
-		// Smoothly return joystick point to center
+		// Smoothly return joystick to center
 		tween(joystickPoint, {
 			x: 0,
 			y: 0
 		}, {
-			duration: 200,
+			duration: 300,
 			easing: tween.easeOut
 		});
 	}
 };
\ No newline at end of file

Creation History

Images

Used plugins