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 // Variables to track dragging state var isDragging = false; var joystickRadius = 200; // Half of joystickBG width (400/2) // 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 distanceFromJoystick = Math.sqrt(Math.pow(x - joystickGlobalPos.x, 2) + Math.pow(y - joystickGlobalPos.y, 2)); if (distanceFromJoystick <= joystickRadius) { isDragging = true; } }; // 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 (isDragging) { // Get joystick center position in global coordinates var joystickGlobalPos = joystickBG.toGlobal({ x: 0, y: 0 }); // Calculate offset from joystick center var offsetX = x - joystickGlobalPos.x; var offsetY = y - joystickGlobalPos.y; // Calculate distance from center var distance = Math.sqrt(offsetX * offsetX + offsetY * offsetY); // Limit movement within joystick boundary if (distance <= joystickRadius) { // Move freely within boundary joystickPoint.x = offsetX; joystickPoint.y = offsetY; } else { // Clamp to boundary var angle = Math.atan2(offsetY, offsetX); joystickPoint.x = Math.cos(angle) * joystickRadius; joystickPoint.y = Math.sin(angle) * joystickRadius; } } }; // Touch up event - hide pointer game.up = function (x, y, obj) { pointer.visible = false; isDragging = false; };

===================================================================
--- original.js
+++ change.js
@@ -1,10 +1,5 @@
 /**** 
-* Plugins
-****/ 
-var tween = LK.import("@upit/tween.v1");
-
-/**** 
 * Initialize Game
 ****/ 
 var game = new LK.Game({
 	backgroundColor: 0x000000
@@ -61,65 +56,58 @@
 	anchorX: 0.5,
 	anchorY: 0.5
 });
 pointer.visible = false; // Initially hidden
-// Joystick control variables
-var isDraggingJoystick = false;
-var joystickMaxDistance = 200; // Maximum distance from center (joystickBG radius is 200)
+// Variables to track dragging state
+var isDragging = false;
+var joystickRadius = 200; // Half of joystickBG width (400/2)
 // 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
+	// Check if touch is within joystick area
 	var joystickGlobalPos = joystickBG.toGlobal({
 		x: 0,
 		y: 0
 	});
 	var distanceFromJoystick = Math.sqrt(Math.pow(x - joystickGlobalPos.x, 2) + Math.pow(y - joystickGlobalPos.y, 2));
-	if (distanceFromJoystick <= joystickMaxDistance) {
-		isDraggingJoystick = true;
+	if (distanceFromJoystick <= joystickRadius) {
+		isDragging = true;
 	}
 };
 // Touch move event - update pointer position
 game.move = function (x, y, obj) {
 	if (pointer.visible) {
 		pointer.x = x;
 		pointer.y = y;
 	}
-	// Handle joystick movement if dragging
-	if (isDraggingJoystick) {
+	// Handle joystick dragging
+	if (isDragging) {
+		// Get joystick center position in global coordinates
 		var joystickGlobalPos = joystickBG.toGlobal({
 			x: 0,
 			y: 0
 		});
-		var deltaX = x - joystickGlobalPos.x;
-		var deltaY = y - joystickGlobalPos.y;
-		var distance = Math.sqrt(deltaX * deltaX + deltaY * deltaY);
-		// Constrain movement within joystick background area
-		if (distance <= joystickMaxDistance) {
-			// Move freely within the circle
-			joystickPoint.x = deltaX;
-			joystickPoint.y = deltaY;
+		// Calculate offset from joystick center
+		var offsetX = x - joystickGlobalPos.x;
+		var offsetY = y - joystickGlobalPos.y;
+		// Calculate distance from center
+		var distance = Math.sqrt(offsetX * offsetX + offsetY * offsetY);
+		// Limit movement within joystick boundary
+		if (distance <= joystickRadius) {
+			// Move freely within boundary
+			joystickPoint.x = offsetX;
+			joystickPoint.y = offsetY;
 		} else {
-			// Clamp to circle edge
-			var angle = Math.atan2(deltaY, deltaX);
-			joystickPoint.x = Math.cos(angle) * joystickMaxDistance;
-			joystickPoint.y = Math.sin(angle) * joystickMaxDistance;
+			// Clamp to boundary
+			var angle = Math.atan2(offsetY, offsetX);
+			joystickPoint.x = Math.cos(angle) * joystickRadius;
+			joystickPoint.y = Math.sin(angle) * joystickRadius;
 		}
 	}
 };
 // Touch up event - hide pointer
 game.up = function (x, y, obj) {
 	pointer.visible = false;
-	// Return joystick to center when released
-	if (isDraggingJoystick) {
-		isDraggingJoystick = false;
-		tween(joystickPoint, {
-			x: 0,
-			y: 0
-		}, {
-			duration: 200,
-			easing: tween.easeOut
-		});
-	}
+	isDragging = false;
 };
\ No newline at end of file

Creation History

Images

Used plugins