User prompt
don't rest the position of background1 image to the middle let it move freely by cursor from any point on its image.
Code edit (2 edits merged)
Please save this source code
User prompt
Remove the tween plugin for the drag of background1 image. ↪💡 Consider importing and using the following plugins: @upit/tween.v1
User prompt
remove teleportation of background1 image to the cursor position
Code edit (1 edits merged)
Please save this source code
User prompt
Remove teleportation of background1 image.
User prompt
Let the image of background can be moved by cursor only
User prompt
center the background1 image in the middle of the screen
User prompt
remove the plugin from the image of background1
User prompt
Sync the grids of verticalline and horizontalline with the image background1.
User prompt
Please fix the bug: 'Uncaught TypeError: tween.create is not a function' in or related to this line: 'tween.create(this).to({' Line Number: 87 ↪💡 Consider importing and using the following plugins: @upit/tween.v1
User prompt
Please fix the bug: 'Uncaught TypeError: tween.to is not a function' in or related to this line: 'tween.to(this, {' Line Number: 87
User prompt
don't teleport the image of background1 just move it with the cursor from any area on the image of background1.
User prompt
Move the background1 image with same time of moving the cursor
User prompt
Let the image of background1 moved smoothly by cursor and from any point on it. ↪💡 Consider importing and using the following plugins: @upit/tween.v1
User prompt
Add plugin tween for smooth dragging the background1 image. ↪💡 Consider importing and using the following plugins: @upit/tween.v1
User prompt
Let the background1 image can be moved by dragging the grids.
User prompt
add drag function to background1 image by cursor.
User prompt
Fill the entire background1 image with grids size 200x200 by adding horizontal and vertical lines.
User prompt
Create more grids of 200x200 and fill all the image of background1 with it.
User prompt
fill the background1 image with grids.
User prompt
Sync the grids with background1 image.
User prompt
center the background1 on the screen.
User prompt
Let the grids position be after the background2 and background3.
User prompt
Set the grids position before the background1 image.
/**** * Initialize Game ****/ var game = new LK.Game({ backgroundColor: 0x000000 }); /**** * Game Code ****/ var background1 = LK.getAsset('background1', { anchorX: 0.5, anchorY: 0.5, x: 2048 / 2, // Center horizontally y: 2732 / 2 // Center vertically }); background1.dragOffset = { x: 0, y: 0 }; // Initialize dragOffset // Add drag functionality to background1 background1.down = function (x, y, obj) { this.dragging = true; this.data = obj; var newPosition = this.parent.toLocal(obj.global); this.dragOffset.x = this.x - newPosition.x; // Calculate offset this.dragOffset.y = this.y - newPosition.y; // Calculate offset }; background1.move = function (x, y, obj) { if (this.dragging) { var newPosition = this.parent.toLocal(obj.global); this.x = newPosition.x + this.dragOffset.x; // Update position with offset this.y = newPosition.y + this.dragOffset.y; // Update position with offset } }; background1.up = function () { this.dragging = false; this.data = null; }; // Add horizontal lines to create grid for (var y = 0; y <= background1.height; y += 200) { var horizontalLine = LK.getAsset('horizontalLine', { anchorX: 0.0, anchorY: 0.0, x: background1.x - background1.width / 2, y: background1.y - background1.height / 2 + y }); game.addChildAt(horizontalLine, 0); } // Add vertical lines to create grid for (var x = 0; x <= background1.width; x += 200) { var verticalLine = LK.getAsset('verticalLine', { anchorX: 0.0, anchorY: 0.0, x: background1.x - background1.width / 2 + x, y: background1.y - background1.height / 2 }); game.addChildAt(verticalLine, 0); } game.addChildAt(background1, 0); var scrollbar = LK.getAsset('scrollbar', { anchorX: 1.0, anchorY: 0.0, x: 2048, y: 0, visible: false // Initially hidden }); game.addChild(scrollbar); var scrollbutton = LK.getAsset('scrollbutton', { anchorX: 1.0, anchorY: 0.5, x: 2048, y: 0, visible: false // Initially hidden }); game.addChild(scrollbutton); var background2 = LK.getAsset('background2', { anchorX: 0.0, anchorY: 0.0, x: 0, y: 0, speed: 10, // Speed property for background2 visible: false // Initially hidden }); game.addChildAt(background2, 1); background2.children.forEach(function (child) { return child.visible = false; }); var background3 = LK.getAsset('background3', { anchorX: 0.0, anchorY: 0.0, x: 0, y: 0, speed: 10, // Speed property for background3 visible: false // Initially hidden }); game.addChildAt(background3, 2); background3.children.forEach(function (child) { return child.visible = false; }); var scrollbar3 = LK.getAsset('scrollbar', { anchorX: 1.0, anchorY: 0.0, x: 2048, y: 0, visible: false // Initially hidden }); game.addChild(scrollbar3); var scrollbutton3 = LK.getAsset('scrollbutton', { anchorX: 1.0, anchorY: 0.5, x: 2048, y: 0, visible: false // Initially hidden }); game.addChild(scrollbutton3); var slotSpacing3 = 50; // Define the space between slots for background3 for (var i = 0; i < 4; i++) { var slot3 = LK.getAsset('Slot', { anchorX: 0.5, anchorY: 0.5, x: i * (slotSpacing3 + 450) + slotSpacing3 + 200, y: 300 // Arbitrary y position }); background3.addChildAt(slot3, background3.children.length); // Add trees to the slots of background3 if (i === 0) { var tree1 = LK.getAsset('tree1', { anchorX: 0.5, anchorY: 0.5, x: slot3.x, y: slot3.y }); background3.addChild(tree1); tree1.down = function (x, y, obj) { var duplicate = LK.getAsset('tree1', { anchorX: 0.5, anchorY: 0.5, x: x, y: y }); game.addChild(duplicate); duplicate.dragging = true; duplicate.data = obj; // Hide background3 and its components background3.visible = false; scrollbar3.visible = false; scrollbutton3.visible = false; background3.children.forEach(function (child) { child.visible = false; }); duplicate.down = function (x, y, obj) { this.dragging = true; this.data = obj; }; duplicate.move = function (x, y, obj) { if (this.dragging) { var newPosition = this.parent.toLocal(obj.global); this.x = newPosition.x; this.y = newPosition.y; } }; duplicate.up = function () { this.dragging = false; this.data = null; }; }; } else if (i === 1) { var tree2 = LK.getAsset('tree2', { anchorX: 0.5, anchorY: 0.5, x: slot3.x, y: slot3.y }); background3.addChild(tree2); tree2.down = function (x, y, obj) { var duplicate = LK.getAsset('tree2', { anchorX: 0.5, anchorY: 0.5, x: x, y: y }); game.addChild(duplicate); duplicate.dragging = true; duplicate.data = obj; // Hide background3 and its components background3.visible = false; scrollbar3.visible = false; scrollbutton3.visible = false; background3.children.forEach(function (child) { child.visible = false; }); duplicate.down = function (x, y, obj) { this.dragging = true; this.data = obj; }; duplicate.move = function (x, y, obj) { if (this.dragging) { var newPosition = this.parent.toLocal(obj.global); this.x = newPosition.x; this.y = newPosition.y; } }; duplicate.up = function () { this.dragging = false; this.data = null; }; }; } else if (i === 2) { var tree3 = LK.getAsset('tree3', { anchorX: 0.5, anchorY: 0.5, x: slot3.x, y: slot3.y }); background3.addChild(tree3); tree3.down = function (x, y, obj) { var duplicate = LK.getAsset('tree3', { anchorX: 0.5, anchorY: 0.5, x: x, y: y }); game.addChild(duplicate); duplicate.dragging = true; duplicate.data = obj; // Hide background3 and its components background3.visible = false; scrollbar3.visible = false; scrollbutton3.visible = false; background3.children.forEach(function (child) { child.visible = false; }); duplicate.down = function (x, y, obj) { this.dragging = true; this.data = obj; }; duplicate.move = function (x, y, obj) { if (this.dragging) { var newPosition = this.parent.toLocal(obj.global); this.x = newPosition.x; this.y = newPosition.y; } }; duplicate.up = function () { this.dragging = false; this.data = null; }; }; } else if (i === 3) { var tree4 = LK.getAsset('tree4', { anchorX: 0.5, anchorY: 0.5, x: slot3.x, y: slot3.y }); background3.addChild(tree4); tree4.down = function (x, y, obj) { var duplicate = LK.getAsset('tree4', { anchorX: 0.5, anchorY: 0.5, x: x, y: y }); game.addChild(duplicate); duplicate.dragging = true; duplicate.data = obj; // Hide background3 and its components background3.visible = false; scrollbar3.visible = false; scrollbutton3.visible = false; background3.children.forEach(function (child) { child.visible = false; }); duplicate.down = function (x, y, obj) { this.dragging = true; this.data = obj; }; duplicate.move = function (x, y, obj) { if (this.dragging) { var newPosition = this.parent.toLocal(obj.global); this.x = newPosition.x; this.y = newPosition.y; } }; duplicate.up = function () { this.dragging = false; this.data = null; }; }; } } // Add 4 slots below the first slots that are synced in background3 for (var i = 0; i < 4; i++) { var slot3 = LK.getAsset('Slot', { anchorX: 0.5, anchorY: 0.5, x: i * (slotSpacing3 + 450) + slotSpacing3 + 200, y: 900 // Increase y position to add more space }); background3.addChildAt(slot3, background3.children.length); // Add trees to the slots of background3 if (i === 0) { var tree5 = LK.getAsset('tree5', { anchorX: 0.5, anchorY: 0.5, x: slot3.x, y: slot3.y }); background3.addChild(tree5); tree5.down = function (x, y, obj) { var duplicate = LK.getAsset('tree5', { anchorX: 0.5, anchorY: 0.5, x: x, y: y }); game.addChild(duplicate); duplicate.dragging = true; duplicate.data = obj; // Hide background3 and its components background3.visible = false; scrollbar3.visible = false; scrollbutton3.visible = false; background3.children.forEach(function (child) { child.visible = false; }); duplicate.down = function (x, y, obj) { this.dragging = true; this.data = obj; }; duplicate.move = function (x, y, obj) { if (this.dragging) { var newPosition = this.parent.toLocal(obj.global); this.x = newPosition.x; this.y = newPosition.y; } }; duplicate.up = function () { this.dragging = false; this.data = null; }; }; } else if (i === 1) { var tree6 = LK.getAsset('tree6', { anchorX: 0.5, anchorY: 0.5, x: slot3.x, y: slot3.y }); background3.addChild(tree6); tree6.down = function (x, y, obj) { var duplicate = LK.getAsset('tree6', { anchorX: 0.5, anchorY: 0.5, x: x, y: y }); game.addChild(duplicate); duplicate.dragging = true; duplicate.data = obj; // Hide background3 and its components background3.visible = false; scrollbar3.visible = false; scrollbutton3.visible = false; background3.children.forEach(function (child) { child.visible = false; }); duplicate.down = function (x, y, obj) { this.dragging = true; this.data = obj; }; duplicate.move = function (x, y, obj) { if (this.dragging) { var newPosition = this.parent.toLocal(obj.global); this.x = newPosition.x; this.y = newPosition.y; } }; duplicate.up = function () { this.dragging = false; this.data = null; }; }; } else if (i === 2) { var tree7 = LK.getAsset('tree7', { anchorX: 0.5, anchorY: 0.5, x: slot3.x, y: slot3.y }); background3.addChild(tree7); tree7.down = function (x, y, obj) { var duplicate = LK.getAsset('tree7', { anchorX: 0.5, anchorY: 0.5, x: x, y: y }); game.addChild(duplicate); duplicate.dragging = true; duplicate.data = obj; // Hide background3 and its components background3.visible = false; scrollbar3.visible = false; scrollbutton3.visible = false; background3.children.forEach(function (child) { child.visible = false; }); duplicate.down = function (x, y, obj) { this.dragging = true; this.data = obj; }; duplicate.move = function (x, y, obj) { if (this.dragging) { var newPosition = this.parent.toLocal(obj.global); this.x = newPosition.x; this.y = newPosition.y; } }; duplicate.up = function () { this.dragging = false; this.data = null; }; }; } else if (i === 3) { var tree8 = LK.getAsset('tree8', { anchorX: 0.5, anchorY: 0.5, x: slot3.x, y: slot3.y }); background3.addChild(tree8); tree8.down = function (x, y, obj) { var duplicate = LK.getAsset('tree8', { anchorX: 0.5, anchorY: 0.5, x: x, y: y }); game.addChild(duplicate); duplicate.dragging = true; duplicate.data = obj; // Hide background3 and its components background3.visible = false; scrollbar3.visible = false; scrollbutton3.visible = false; background3.children.forEach(function (child) { child.visible = false; }); duplicate.down = function (x, y, obj) { this.dragging = true; this.data = obj; }; duplicate.move = function (x, y, obj) { if (this.dragging) { var newPosition = this.parent.toLocal(obj.global); this.x = newPosition.x; this.y = newPosition.y; } }; duplicate.up = function () { this.dragging = false; this.data = null; }; }; } } // Add another 4 slots below the second 4 slots for (var i = 0; i < 4; i++) { var slot3 = LK.getAsset('Slot', { anchorX: 0.5, anchorY: 0.5, x: i * (slotSpacing3 + 450) + slotSpacing3 + 200, y: 1500 // Increase y position to add more space }); background3.addChildAt(slot3, background3.children.length); // Add trees to the slots of background3 if (i === 0) { var tree9 = LK.getAsset('tree9', { anchorX: 0.5, anchorY: 0.5, x: slot3.x, y: slot3.y }); background3.addChild(tree9); tree9.down = function (x, y, obj) { var duplicate = LK.getAsset('tree9', { anchorX: 0.5, anchorY: 0.5, x: x, y: y }); game.addChild(duplicate); duplicate.dragging = true; duplicate.data = obj; // Hide background3 and its components background3.visible = false; scrollbar3.visible = false; scrollbutton3.visible = false; background3.children.forEach(function (child) { child.visible = false; }); duplicate.down = function (x, y, obj) { this.dragging = true; this.data = obj; }; duplicate.move = function (x, y, obj) { if (this.dragging) { var newPosition = this.parent.toLocal(obj.global); this.x = newPosition.x; this.y = newPosition.y; } }; duplicate.up = function () { this.dragging = false; this.data = null; }; }; } else if (i === 1) { var tree10 = LK.getAsset('tree10', { anchorX: 0.5, anchorY: 0.5, x: slot3.x, y: slot3.y }); background3.addChild(tree10); tree10.down = function (x, y, obj) { var duplicate = LK.getAsset('tree10', { anchorX: 0.5, anchorY: 0.5, x: x, y: y }); game.addChild(duplicate); duplicate.dragging = true; duplicate.data = obj; // Hide background3 and its components background3.visible = false; scrollbar3.visible = false; scrollbutton3.visible = false; background3.children.forEach(function (child) { child.visible = false; }); duplicate.down = function (x, y, obj) { this.dragging = true; this.data = obj; }; duplicate.move = function (x, y, obj) { if (this.dragging) { var newPosition = this.parent.toLocal(obj.global); this.x = newPosition.x; this.y = newPosition.y; } }; duplicate.up = function () { this.dragging = false; this.data = null; }; }; } else if (i === 2) { var tree11 = LK.getAsset('tree11', { anchorX: 0.5, anchorY: 0.5, x: slot3.x, y: slot3.y }); background3.addChild(tree11); tree11.down = function (x, y, obj) { var duplicate = LK.getAsset('tree11', { anchorX: 0.5, anchorY: 0.5, x: x, y: y }); game.addChild(duplicate); duplicate.dragging = true; duplicate.data = obj; // Hide background3 and its components background3.visible = false; scrollbar3.visible = false; scrollbutton3.visible = false; background3.children.forEach(function (child) { child.visible = false; }); duplicate.down = function (x, y, obj) { this.dragging = true; this.data = obj; }; duplicate.move = function (x, y, obj) { if (this.dragging) { var newPosition = this.parent.toLocal(obj.global); this.x = newPosition.x; this.y = newPosition.y; } }; duplicate.up = function () { this.dragging = false; this.data = null; }; }; } else if (i === 3) { var tree12 = LK.getAsset('tree12', { anchorX: 0.5, anchorY: 0.5, x: slot3.x, y: slot3.y }); background3.addChild(tree12); tree12.down = function (x, y, obj) { var duplicate = LK.getAsset('tree12', { anchorX: 0.5, anchorY: 0.5, x: x, y: y }); game.addChild(duplicate); duplicate.dragging = true; duplicate.data = obj; // Hide background3 and its components background3.visible = false; scrollbar3.visible = false; scrollbutton3.visible = false; background3.children.forEach(function (child) { child.visible = false; }); duplicate.down = function (x, y, obj) { this.dragging = true; this.data = obj; }; duplicate.move = function (x, y, obj) { if (this.dragging) { var newPosition = this.parent.toLocal(obj.global); this.x = newPosition.x; this.y = newPosition.y; } }; duplicate.up = function () { this.dragging = false; this.data = null; }; }; } } // Add another 4 slots below the third 4 slots for (var i = 0; i < 4; i++) { var slot3 = LK.getAsset('Slot', { anchorX: 0.5, anchorY: 0.5, x: i * (slotSpacing3 + 450) + slotSpacing3 + 200, y: 2100 // Increase y position to add more space }); background3.addChildAt(slot3, background3.children.length); // Add trees to the slots of background3 if (i === 0) { var tree13 = LK.getAsset('tree13', { anchorX: 0.5, anchorY: 0.5, x: slot3.x, y: slot3.y }); background3.addChild(tree13); tree13.down = function (x, y, obj) { var duplicate = LK.getAsset('tree13', { anchorX: 0.5, anchorY: 0.5, x: x, y: y }); game.addChild(duplicate); duplicate.dragging = true; duplicate.data = obj; // Hide background3 and its components background3.visible = false; scrollbar3.visible = false; scrollbutton3.visible = false; background3.children.forEach(function (child) { child.visible = false; }); duplicate.down = function (x, y, obj) { this.dragging = true; this.data = obj; }; duplicate.move = function (x, y, obj) { if (this.dragging) { var newPosition = this.parent.toLocal(obj.global); this.x = newPosition.x; this.y = newPosition.y; } }; duplicate.up = function () { this.dragging = false; this.data = null; }; }; } else if (i === 1) { var tree14 = LK.getAsset('tree14', { anchorX: 0.5, anchorY: 0.5, x: slot3.x, y: slot3.y }); background3.addChild(tree14); tree14.down = function (x, y, obj) { var duplicate = LK.getAsset('tree14', { anchorX: 0.5, anchorY: 0.5, x: x, y: y }); game.addChild(duplicate); duplicate.dragging = true; duplicate.data = obj; // Hide background3 and its components background3.visible = false; scrollbar3.visible = false; scrollbutton3.visible = false; background3.children.forEach(function (child) { child.visible = false; }); duplicate.down = function (x, y, obj) { this.dragging = true; this.data = obj; }; duplicate.move = function (x, y, obj) { if (this.dragging) { var newPosition = this.parent.toLocal(obj.global); this.x = newPosition.x; this.y = newPosition.y; } }; duplicate.up = function () { this.dragging = false; this.data = null; }; }; } else if (i === 2) { var tree15 = LK.getAsset('tree15', { anchorX: 0.5, anchorY: 0.5, x: slot3.x, y: slot3.y }); background3.addChild(tree15); tree15.down = function (x, y, obj) { var duplicate = LK.getAsset('tree15', { anchorX: 0.5, anchorY: 0.5, x: x, y: y }); game.addChild(duplicate); duplicate.dragging = true; duplicate.data = obj; // Hide background3 and its components background3.visible = false; scrollbar3.visible = false; scrollbutton3.visible = false; background3.children.forEach(function (child) { child.visible = false; }); duplicate.down = function (x, y, obj) { this.dragging = true; this.data = obj; }; duplicate.move = function (x, y, obj) { if (this.dragging) { var newPosition = this.parent.toLocal(obj.global); this.x = newPosition.x; this.y = newPosition.y; } }; duplicate.up = function () { this.dragging = false; this.data = null; }; }; } else if (i === 3) { var tree16 = LK.getAsset('tree16', { anchorX: 0.5, anchorY: 0.5, x: slot3.x, y: slot3.y }); background3.addChild(tree16); tree16.down = function (x, y, obj) { var duplicate = LK.getAsset('tree16', { anchorX: 0.5, anchorY: 0.5, x: x, y: y }); game.addChild(duplicate); duplicate.dragging = true; duplicate.data = obj; // Hide background3 and its components background3.visible = false; scrollbar3.visible = false; scrollbutton3.visible = false; background3.children.forEach(function (child) { child.visible = false; }); duplicate.down = function (x, y, obj) { this.dragging = true; this.data = obj; }; duplicate.move = function (x, y, obj) { if (this.dragging) { var newPosition = this.parent.toLocal(obj.global); this.x = newPosition.x; this.y = newPosition.y; } }; duplicate.up = function () { this.dragging = false; this.data = null; }; }; } } scrollbutton3.down = function (x, y, obj) { this.dragging = true; this.data = obj; this.alpha = 0.5; }; scrollbutton3.up = function () { this.alpha = 1; this.dragging = false; this.data = null; }; scrollbutton3.move = function (x, y, obj) { if (this.dragging) { var newPosition = this.parent.toLocal(obj.global); // Limit the y position of the scrollbutton to the height of the scrollbar this.y = Math.max(Math.min(newPosition.y, scrollbar3.height - this.height / 2), this.height / 2); // Calculate the ratio of the scrollbutton's position to the scrollbar's height var ratio = (this.y - this.height / 2) / (scrollbar3.height - this.height); // Move the background3 up or down based on the ratio and the speed background3.y = -ratio * (background3.height - game.height); } }; var buildAsset = LK.getAsset('Build', { anchorX: 0.5, // Center the anchor point horizontally anchorY: 0.0, // Anchor point at the top x: 150, // Position on the left side of the screen y: 400 // Position directly below the pause button }); game.addChild(buildAsset); var button1Asset = LK.getAsset('button1', { anchorX: 0.5, anchorY: 0.0, x: 400, y: 0, visible: false // Initially hidden }); game.addChild(button1Asset); var button2Asset = LK.getAsset('button2', { anchorX: 0.5, anchorY: 0.0, x: button1Asset.x + button1Asset.width + 10, y: 0, visible: false // Initially hidden }); game.addChild(button2Asset); // Add text 'House' to button1 var button1Text = new Text2('House', { size: 80, fill: 0xFFFFFF }); button1Text.anchor.set(0.5, 0.5); // Center the text on the button button1Text.x = button1Asset.x; button1Text.y = button1Asset.y + button1Asset.height / 2; button1Text.visible = false; game.addChild(button1Text); // Add text 'Tree' to button2 var button2Text = new Text2('Tree', { size: 80, fill: 0xFFFFFF }); button2Text.anchor.set(0.5, 0.5); // Center the text on the button button2Text.x = button2Asset.x; button2Text.y = button2Asset.y + button2Asset.height / 2; button2Text.visible = false; game.addChild(button2Text); // Add click event to button2 to toggle visibility of background3, its slots, and scroll components button2Asset.down = function (x, y, obj) { // Toggle visibility of background3 and its components background3.visible = !background3.visible; scrollbar3.visible = !scrollbar3.visible; scrollbutton3.visible = !scrollbutton3.visible; background3.children.forEach(function (child) { child.visible = background3.visible; }); }; // Add click event to button1 to toggle visibility of background2, its slots, and scroll components button1Asset.down = function (x, y, obj) { // Toggle visibility of background2 and its components background2.visible = !background2.visible; scrollbar.visible = !scrollbar.visible; scrollbutton.visible = !scrollbutton.visible; background2.children.forEach(function (child) { child.visible = background2.visible; }); }; // Add click event to build asset to hide background2 and background3 with their components buildAsset.down = function (x, y, obj) { button1Asset.visible = !button1Asset.visible; button1Text.visible = !button1Text.visible; button2Asset.visible = !button2Asset.visible; button2Text.visible = !button2Text.visible; background2.visible = false; scrollbar.visible = false; scrollbutton.visible = false; background3.visible = false; scrollbar3.visible = false; scrollbutton3.visible = false; }; var slotSpacing = 50; // Define the space between slots for (var i = 0; i < 4; i++) { var slot = LK.getAsset('Slot', { anchorX: 0.5, anchorY: 0.5, x: i * (slotSpacing + 450) + slotSpacing + 200, // Position slots with space between them y: 300 // Arbitrary y position }); background2.addChildAt(slot, background2.children.length); // Add house1 to the first slot on the left if (i === 0) { var house1 = LK.getAsset('house1', { anchorX: 0.5, anchorY: 0.5, x: slot.x, y: slot.y }); background2.addChild(house1); house1.down = function (x, y, obj) { var duplicate = LK.getAsset('house1', { anchorX: 0.5, anchorY: 0.5, x: x, y: y }); game.addChild(duplicate); duplicate.dragging = true; duplicate.data = obj; duplicate.down = function (x, y, obj) { this.dragging = true; this.data = obj; }; duplicate.move = function (x, y, obj) { if (this.dragging) { var newPosition = this.parent.toLocal(obj.global); this.x = newPosition.x; this.y = newPosition.y; } }; duplicate.up = function () { this.dragging = false; this.data = null; }; }; } else if (i === 1) { var house2 = LK.getAsset('house2', { anchorX: 0.5, anchorY: 0.5, x: slot.x, y: slot.y }); background2.addChild(house2); house2.down = function (x, y, obj) { var duplicate = LK.getAsset('house2', { anchorX: 0.5, anchorY: 0.5, x: x, y: y }); game.addChild(duplicate); duplicate.dragging = true; duplicate.data = obj; duplicate.down = function (x, y, obj) { this.dragging = true; this.data = obj; }; duplicate.move = function (x, y, obj) { if (this.dragging) { var newPosition = this.parent.toLocal(obj.global); this.x = newPosition.x; this.y = newPosition.y; } }; duplicate.up = function () { this.dragging = false; this.data = null; }; }; } else if (i === 2) { var house3 = LK.getAsset('house3', { anchorX: 0.5, anchorY: 0.5, x: slot.x, y: slot.y }); background2.addChild(house3); house3.down = function (x, y, obj) { var duplicate = LK.getAsset('house3', { anchorX: 0.5, anchorY: 0.5, x: x, y: y }); game.addChild(duplicate); duplicate.dragging = true; duplicate.data = obj; duplicate.down = function (x, y, obj) { this.dragging = true; this.data = obj; }; duplicate.move = function (x, y, obj) { if (this.dragging) { var newPosition = this.parent.toLocal(obj.global); this.x = newPosition.x; this.y = newPosition.y; } }; duplicate.up = function () { this.dragging = false; this.data = null; }; }; } else if (i === 3) { var house4 = LK.getAsset('house4', { anchorX: 0.5, anchorY: 0.5, x: slot.x, y: slot.y }); background2.addChild(house4); house4.down = function (x, y, obj) { var duplicate = LK.getAsset('house4', { anchorX: 0.5, anchorY: 0.5, x: x, y: y }); game.addChild(duplicate); duplicate.dragging = true; duplicate.data = obj; duplicate.down = function (x, y, obj) { this.dragging = true; this.data = obj; }; duplicate.move = function (x, y, obj) { if (this.dragging) { var newPosition = this.parent.toLocal(obj.global); this.x = newPosition.x; this.y = newPosition.y; } }; duplicate.up = function () { this.dragging = false; this.data = null; }; }; } } // Add 4 slots below the first line of slots that are synced in background2 for (var i = 0; i < 4; i++) { var slot = LK.getAsset('Slot', { anchorX: 0.5, anchorY: 0.5, x: i * (slotSpacing + 450) + slotSpacing + 200, y: 900 // Increase y position to add more space }); background2.addChildAt(slot, background2.children.length); // Add house5 to the first slot in the second line if (i === 0) { var house5 = LK.getAsset('house5', { anchorX: 0.5, anchorY: 0.5, x: slot.x, y: slot.y }); background2.addChild(house5); house5.down = function (x, y, obj) { var duplicate = LK.getAsset('house5', { anchorX: 0.5, anchorY: 0.5, x: x, y: y }); game.addChild(duplicate); duplicate.dragging = true; duplicate.data = obj; duplicate.down = function (x, y, obj) { this.dragging = true; this.data = obj; }; duplicate.move = function (x, y, obj) { if (this.dragging) { var newPosition = this.parent.toLocal(obj.global); this.x = newPosition.x; this.y = newPosition.y; } }; duplicate.up = function () { this.dragging = false; this.data = null; }; }; } else if (i === 1) { var house6 = LK.getAsset('house6', { anchorX: 0.5, anchorY: 0.5, x: slot.x, y: slot.y }); background2.addChild(house6); house6.down = function (x, y, obj) { var duplicate = LK.getAsset('house6', { anchorX: 0.5, anchorY: 0.5, x: x, y: y }); game.addChild(duplicate); duplicate.dragging = true; duplicate.data = obj; duplicate.down = function (x, y, obj) { this.dragging = true; this.data = obj; }; duplicate.move = function (x, y, obj) { if (this.dragging) { var newPosition = this.parent.toLocal(obj.global); this.x = newPosition.x; this.y = newPosition.y; } }; duplicate.up = function () { this.dragging = false; this.data = null; }; }; } else if (i === 2) { var house7 = LK.getAsset('house7', { anchorX: 0.5, anchorY: 0.5, x: slot.x, y: slot.y }); background2.addChild(house7); house7.down = function (x, y, obj) { var duplicate = LK.getAsset('house7', { anchorX: 0.5, anchorY: 0.5, x: x, y: y }); game.addChild(duplicate); duplicate.dragging = true; duplicate.data = obj; duplicate.down = function (x, y, obj) { this.dragging = true; this.data = obj; }; duplicate.move = function (x, y, obj) { if (this.dragging) { var newPosition = this.parent.toLocal(obj.global); this.x = newPosition.x; this.y = newPosition.y; } }; duplicate.up = function () { this.dragging = false; this.data = null; }; }; } else if (i === 3) { var house8 = LK.getAsset('house8', { anchorX: 0.5, anchorY: 0.5, x: slot.x, y: slot.y }); background2.addChild(house8); house8.down = function (x, y, obj) { var duplicate = LK.getAsset('house8', { anchorX: 0.5, anchorY: 0.5, x: x, y: y }); game.addChild(duplicate); duplicate.dragging = true; duplicate.data = obj; duplicate.down = function (x, y, obj) { this.dragging = true; this.data = obj; }; duplicate.move = function (x, y, obj) { if (this.dragging) { var newPosition = this.parent.toLocal(obj.global); this.x = newPosition.x; this.y = newPosition.y; } }; duplicate.up = function () { this.dragging = false; this.data = null; }; }; } } // Add 4 slots below the second line of slots that are synced in background2 for (var i = 0; i < 4; i++) { var slot = LK.getAsset('Slot', { anchorX: 0.5, anchorY: 0.5, x: i * (slotSpacing + 450) + slotSpacing + 200, y: 1500 // Increase y position to add more space }); background2.addChildAt(slot, background2.children.length); // Add houses to the third line of slots if (i === 0) { var house9 = LK.getAsset('house9', { anchorX: 0.5, anchorY: 0.5, x: slot.x, y: slot.y }); background2.addChild(house9); house9.down = function (x, y, obj) { var duplicate = LK.getAsset('house9', { anchorX: 0.5, anchorY: 0.5, x: x, y: y }); game.addChild(duplicate); duplicate.dragging = true; duplicate.data = obj; duplicate.down = function (x, y, obj) { this.dragging = true; this.data = obj; }; duplicate.move = function (x, y, obj) { if (this.dragging) { var newPosition = this.parent.toLocal(obj.global); this.x = newPosition.x; this.y = newPosition.y; } }; duplicate.up = function () { this.dragging = false; this.data = null; }; }; } else if (i === 1) { var house10 = LK.getAsset('house10', { anchorX: 0.5, anchorY: 0.5, x: slot.x, y: slot.y }); background2.addChild(house10); house10.down = function (x, y, obj) { var duplicate = LK.getAsset('house10', { anchorX: 0.5, anchorY: 0.5, x: x, y: y }); game.addChild(duplicate); duplicate.dragging = true; duplicate.data = obj; duplicate.down = function (x, y, obj) { this.dragging = true; this.data = obj; }; duplicate.move = function (x, y, obj) { if (this.dragging) { var newPosition = this.parent.toLocal(obj.global); this.x = newPosition.x; this.y = newPosition.y; } }; duplicate.up = function () { this.dragging = false; this.data = null; }; }; } else if (i === 2) { var house11 = LK.getAsset('house11', { anchorX: 0.5, anchorY: 0.5, x: slot.x, y: slot.y }); background2.addChild(house11); house11.down = function (x, y, obj) { var duplicate = LK.getAsset('house11', { anchorX: 0.5, anchorY: 0.5, x: x, y: y }); game.addChild(duplicate); duplicate.dragging = true; duplicate.data = obj; duplicate.down = function (x, y, obj) { this.dragging = true; this.data = obj; }; duplicate.move = function (x, y, obj) { if (this.dragging) { var newPosition = this.parent.toLocal(obj.global); this.x = newPosition.x; this.y = newPosition.y; } }; duplicate.up = function () { this.dragging = false; this.data = null; }; }; } else if (i === 3) { var house12 = LK.getAsset('house12', { anchorX: 0.5, anchorY: 0.5, x: slot.x, y: slot.y }); background2.addChild(house12); house12.down = function (x, y, obj) { var duplicate = LK.getAsset('house12', { anchorX: 0.5, anchorY: 0.5, x: x, y: y }); game.addChild(duplicate); duplicate.dragging = true; duplicate.data = obj; duplicate.down = function (x, y, obj) { this.dragging = true; this.data = obj; }; duplicate.move = function (x, y, obj) { if (this.dragging) { var newPosition = this.parent.toLocal(obj.global); this.x = newPosition.x; this.y = newPosition.y; } }; duplicate.up = function () { this.dragging = false; this.data = null; }; }; } } // Add 4 slots below the third line of slots that are synced in background2 for (var i = 0; i < 4; i++) { var slot = LK.getAsset('Slot', { anchorX: 0.5, anchorY: 0.5, x: i * (slotSpacing + 450) + slotSpacing + 200, y: 2100 // Increase y position to add more space }); background2.addChildAt(slot, background2.children.length); // Add houses to the fourth line of slots if (i === 0) { var house13 = LK.getAsset('house13', { anchorX: 0.5, anchorY: 0.5, x: slot.x, y: slot.y }); background2.addChild(house13); house13.down = function (x, y, obj) { var duplicate = LK.getAsset('house13', { anchorX: 0.5, anchorY: 0.5, x: x, y: y }); game.addChild(duplicate); duplicate.dragging = true; duplicate.data = obj; duplicate.down = function (x, y, obj) { this.dragging = true; this.data = obj; }; duplicate.move = function (x, y, obj) { if (this.dragging) { var newPosition = this.parent.toLocal(obj.global); this.x = newPosition.x; this.y = newPosition.y; } }; duplicate.up = function () { this.dragging = false; this.data = null; }; }; } else if (i === 1) { var house14 = LK.getAsset('house14', { anchorX: 0.5, anchorY: 0.5, x: slot.x, y: slot.y }); background2.addChild(house14); house14.down = function (x, y, obj) { var duplicate = LK.getAsset('house14', { anchorX: 0.5, anchorY: 0.5, x: x, y: y }); game.addChild(duplicate); duplicate.dragging = true; duplicate.data = obj; duplicate.down = function (x, y, obj) { this.dragging = true; this.data = obj; }; duplicate.move = function (x, y, obj) { if (this.dragging) { var newPosition = this.parent.toLocal(obj.global); this.x = newPosition.x; this.y = newPosition.y; } }; duplicate.up = function () { this.dragging = false; this.data = null; }; }; } else if (i === 2) { var house15 = LK.getAsset('house15', { anchorX: 0.5, anchorY: 0.5, x: slot.x, y: slot.y }); background2.addChild(house15); house15.down = function (x, y, obj) { var duplicate = LK.getAsset('house15', { anchorX: 0.5, anchorY: 0.5, x: x, y: y }); game.addChild(duplicate); duplicate.dragging = true; duplicate.data = obj; duplicate.down = function (x, y, obj) { this.dragging = true; this.data = obj; }; duplicate.move = function (x, y, obj) { if (this.dragging) { var newPosition = this.parent.toLocal(obj.global); this.x = newPosition.x; this.y = newPosition.y; } }; duplicate.up = function () { this.dragging = false; this.data = null; }; }; } else if (i === 3) { var house16 = LK.getAsset('house16', { anchorX: 0.5, anchorY: 0.5, x: slot.x, y: slot.y }); background2.addChild(house16); house16.down = function (x, y, obj) { var duplicate = LK.getAsset('house16', { anchorX: 0.5, anchorY: 0.5, x: x, y: y }); game.addChild(duplicate); duplicate.dragging = true; duplicate.data = obj; duplicate.down = function (x, y, obj) { this.dragging = true; this.data = obj; }; duplicate.move = function (x, y, obj) { if (this.dragging) { var newPosition = this.parent.toLocal(obj.global); this.x = newPosition.x; this.y = newPosition.y; } }; duplicate.up = function () { this.dragging = false; this.data = null; }; }; } } scrollbutton.down = function (x, y, obj) { this.dragging = true; this.data = obj; this.alpha = 0.5; }; scrollbutton.up = function () { this.alpha = 1; this.dragging = false; this.data = null; }; scrollbutton.move = function (x, y, obj) { if (this.dragging) { var newPosition = this.parent.toLocal(obj.global); // Limit the y position of the scrollbutton to the height of the scrollbar this.y = Math.max(Math.min(newPosition.y, scrollbar.height - this.height / 2), this.height / 2); // Calculate the ratio of the scrollbutton's position to the scrollbar's height var ratio = (this.y - this.height / 2) / (scrollbar.height - this.height); // Move the background2 up or down based on the ratio and the speed background2.y = -ratio * (background2.height - game.height); // Removed synchronization of scrollbar with background2 movement } }; // Removed up functionality from scrollbutton;
===================================================================
--- original.js
+++ change.js
@@ -14,28 +14,30 @@
x: 2048 / 2,
// Center horizontally
y: 2732 / 2 // Center vertically
});
+background1.dragOffset = {
+ x: 0,
+ y: 0
+}; // Initialize dragOffset
// Add drag functionality to background1
background1.down = function (x, y, obj) {
this.dragging = true;
this.data = obj;
- this.dragOffset = {
- x: 0,
- y: 0
- }; // Store the offset between the cursor and the image position
+ var newPosition = this.parent.toLocal(obj.global);
+ this.dragOffset.x = this.x - newPosition.x; // Calculate offset
+ this.dragOffset.y = this.y - newPosition.y; // Calculate offset
};
background1.move = function (x, y, obj) {
if (this.dragging) {
var newPosition = this.parent.toLocal(obj.global);
- this.x = newPosition.x + this.dragOffset.x; // Directly update position
- this.y = newPosition.y + this.dragOffset.y; // Directly update position
+ this.x = newPosition.x + this.dragOffset.x; // Update position with offset
+ this.y = newPosition.y + this.dragOffset.y; // Update position with offset
}
};
background1.up = function () {
this.dragging = false;
this.data = null;
- this.dragOffset = null; // Clear the offset when dragging stops
};
// Add horizontal lines to create grid
for (var y = 0; y <= background1.height; y += 200) {
var horizontalLine = LK.getAsset('horizontalLine', {
2D wreckage of wood, square, HD colors. Single Game Texture. In-Game asset. 2d. Blank background. High contrast. No shadows
House from the front facing the screen with big sign above it have description "SHOP", Hd colors
coin with colors, have "DA", hd colors. have black circles and black line for the "DA", between the 2 circles do small black lines all around. Single Game Texture. In-Game asset. 2d. Blank background. High contrast. No shadows
Modern App Store icon, square with rounded corners, HD colors for a 2d game titled "The Collector" and with the description "about building houses and trees and decorations on a map to make it look like city, which then generate "DA" coins after a countdown timer expires. Players can collect these coins to increase their score, which they can then use to purchase more houses and trees and decorations from the shop button on the middle left side of the screen". with text on the middle top of the banner "the collector"!