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 }); // 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 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; } }; // Touch move event - update pointer position and joystick 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 }); } } }; // Touch up event - hide pointer and reset joystick game.up = function (x, y, obj) { pointer.visible = false; if (isDragging) { isDragging = false; // Smoothly return joystick point to center tween(joystickPoint, { x: 0, y: 0 }, { duration: 200, easing: tween.easeOut }); } };

===================================================================
--- original.js
+++ change.js
@@ -1,5 +1,10 @@
 /**** 
+* Plugins
+****/ 
+var tween = LK.import("@upit/tween.v1");
+
+/**** 
 * Initialize Game
 ****/ 
 var game = new LK.Game({
 	backgroundColor: 0x000000
@@ -56,59 +61,65 @@
 	anchorX: 0.5,
 	anchorY: 0.5
 });
 pointer.visible = false; // Initially hidden
-// Variable to track what is being dragged
-var dragNode = null;
+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 on joystick area (convert coordinates)
-	var joystickLocalPos = joystickBG.toLocal({
-		x: x,
-		y: y
+	// Check if touch is within joystick area
+	var joystickGlobalPos = joystickBG.toGlobal({
+		x: 0,
+		y: 0
 	});
-	var distanceFromCenter = Math.sqrt(joystickLocalPos.x * joystickLocalPos.x + joystickLocalPos.y * joystickLocalPos.y);
-	if (distanceFromCenter <= 200) {
-		// Within joystick radius
-		dragNode = joystickPoint;
+	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;
 	}
 };
-// Touch move event - update pointer position
+// Touch move event - update pointer position and joystick
 game.move = function (x, y, obj) {
 	if (pointer.visible) {
 		pointer.x = x;
 		pointer.y = y;
-	}
-	// Handle joystick dragging
-	if (dragNode === joystickPoint) {
-		// Convert touch position to joystickBG local coordinates
-		var joystickLocalPos = joystickBG.toLocal({
-			x: x,
-			y: y
-		});
-		// Calculate distance from center
-		var distanceFromCenter = Math.sqrt(joystickLocalPos.x * joystickLocalPos.x + joystickLocalPos.y * joystickLocalPos.y);
-		// Constrain within joystick boundary (radius 200)
-		if (distanceFromCenter <= 200) {
-			joystickPoint.x = joystickLocalPos.x;
-			joystickPoint.y = joystickLocalPos.y;
-		} else {
-			// Keep at boundary edge
-			var angle = Math.atan2(joystickLocalPos.y, joystickLocalPos.x);
-			joystickPoint.x = Math.cos(angle) * 200;
-			joystickPoint.y = Math.sin(angle) * 200;
+		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
+			});
 		}
 	}
 };
-// Touch up event - hide pointer
+// Touch up event - hide pointer and reset joystick
 game.up = function (x, y, obj) {
 	pointer.visible = false;
-	// Reset joystick position when releasing drag
-	if (dragNode === joystickPoint) {
-		joystickPoint.x = 0;
-		joystickPoint.y = 0;
+	if (isDragging) {
+		isDragging = false;
+		// Smoothly return joystick point to center
+		tween(joystickPoint, {
+			x: 0,
+			y: 0
+		}, {
+			duration: 200,
+			easing: tween.easeOut
+		});
 	}
-	dragNode = null;
 };
\ No newline at end of file

Creation History

Images

Used plugins