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

/**** * 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 // Variable to track what is being dragged var dragNode = null; // 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 }); var distanceFromCenter = Math.sqrt(joystickLocalPos.x * joystickLocalPos.x + joystickLocalPos.y * joystickLocalPos.y); if (distanceFromCenter <= 200) { // Within joystick radius dragNode = joystickPoint; } }; // Touch move event - update pointer position 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; } } }; // Touch up event - hide pointer game.up = function (x, y, obj) { pointer.visible = false; // Reset joystick position when releasing drag if (dragNode === joystickPoint) { joystickPoint.x = 0; joystickPoint.y = 0; } dragNode = null; };

===================================================================
--- original.js
+++ change.js
@@ -56,53 +56,59 @@
 	anchorX: 0.5,
 	anchorY: 0.5
 });
 pointer.visible = false; // Initially hidden
-var isDraggingJoystick = false;
-// Touch down event - show pointer at touch position and check joystick
+// Variable to track what is being dragged
+var dragNode = null;
+// 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 joystickPoint
-	var joystickGlobalPos = joystickBG.toGlobal({
-		x: joystickPoint.x,
-		y: joystickPoint.y
+	// Check if touch is on joystick area (convert coordinates)
+	var joystickLocalPos = joystickBG.toLocal({
+		x: x,
+		y: y
 	});
-	var distance = Math.sqrt(Math.pow(x - joystickGlobalPos.x, 2) + Math.pow(y - joystickGlobalPos.y, 2));
-	if (distance <= 50) {
-		// Within joystick point radius
-		isDraggingJoystick = true;
+	var distanceFromCenter = Math.sqrt(joystickLocalPos.x * joystickLocalPos.x + joystickLocalPos.y * joystickLocalPos.y);
+	if (distanceFromCenter <= 200) {
+		// Within joystick radius
+		dragNode = joystickPoint;
 	}
 };
-// Touch move event - update pointer position and drag joystick
+// Touch move event - update pointer position
 game.move = function (x, y, obj) {
 	if (pointer.visible) {
 		pointer.x = x;
 		pointer.y = y;
 	}
-	if (isDraggingJoystick) {
+	// Handle joystick dragging
+	if (dragNode === joystickPoint) {
 		// Convert touch position to joystickBG local coordinates
-		var localPos = joystickBG.toLocal({
+		var joystickLocalPos = joystickBG.toLocal({
 			x: x,
 			y: y
 		});
-		// Calculate distance from center of joystickBG
-		var distance = Math.sqrt(localPos.x * localPos.x + localPos.y * localPos.y);
-		var maxDistance = 200; // joystickBG radius (400/2)
-		// Constrain joystickPoint within joystickBG boundaries
-		if (distance <= maxDistance) {
-			joystickPoint.x = localPos.x;
-			joystickPoint.y = localPos.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 {
-			// Clamp to edge of joystickBG
-			var angle = Math.atan2(localPos.y, localPos.x);
-			joystickPoint.x = Math.cos(angle) * maxDistance;
-			joystickPoint.y = Math.sin(angle) * maxDistance;
+			// Keep at boundary edge
+			var angle = Math.atan2(joystickLocalPos.y, joystickLocalPos.x);
+			joystickPoint.x = Math.cos(angle) * 200;
+			joystickPoint.y = Math.sin(angle) * 200;
 		}
 	}
 };
-// Touch up event - hide pointer and stop dragging
+// Touch up event - hide pointer
 game.up = function (x, y, obj) {
 	pointer.visible = false;
-	isDraggingJoystick = false;
+	// Reset joystick position when releasing drag
+	if (dragNode === joystickPoint) {
+		joystickPoint.x = 0;
+		joystickPoint.y = 0;
+	}
+	dragNode = null;
 };
\ No newline at end of file

Creation History

Images

Used plugins