User prompt
Haz que el cambio de un lado a otro sea suave y no brusco ↪💡 Consider importing and using the following plugins: @upit/tween.v1
User prompt
haz que el arrastre del cubo tenga una separación según la esquina de gameplay: Si está en la esquina superior derecha el tower se separa 200 pixeles arriba y a la derecha, así parscada esquina
User prompt
Crea un objeto llamado Gameplay que ocupe 4/5 de la pantalla en la parte superior
Code edit (2 edits merged)
Please save this source code
User prompt
Optimiza el código
User prompt
Crea un objeto llamado UI que ocupe 1/5 de la pantalla en el eje Y y este en todo el largo. Cololocalo en la parte inferoor
Code edit (1 edits merged)
Please save this source code
User prompt
Haz que la torre esté separado 20 pixeles a la izquierda y 20 abajo cuando se arrastra
User prompt
Elimina el cubo que se genera en la parte superior, haz que la posición de aparición inicial de tower sea el botón de creación
User prompt
Agrega un BG detrás de los botones de tower y haz que el displsy dela torre se centre
User prompt
Agrega un objeto llamado torre de prueba. agrega un botón en la parte inferior, con el mismo asset de la torre, que al mantener presionado crea un clon que se puede arrastrar y colocar en el mundo
User prompt
Agrega un objeto llamado torre de prueba, agrega un botón en la parte inferior que al mantener presionado crea un clon que se puede arrastrar y colocar en el mundo
User prompt
Elimina el proyecto
User prompt
Elimina todo el codigo incluído asset
Remix started
Copy Tower Defense Template
/**** * Plugins ****/ var tween = LK.import("@upit/tween.v1"); /**** * Classes ****/ var Gameplay = Container.expand(function () { var self = Container.call(this); var gameplayGraphics = self.attachAsset('gameplayBackground', { anchorX: 0.5, anchorY: 0.5 }); return self; }); var Tower = Container.expand(function () { var self = Container.call(this); var towerGraphics = self.attachAsset('testTower', { anchorX: 0.5, anchorY: 0.5 }); return self; }); var UI = Container.expand(function () { var self = Container.call(this); var uiGraphics = self.attachAsset('uiBackground', { anchorX: 0.5, anchorY: 0.5 }); return self; }); /**** * Initialize Game ****/ // Game variables var game = new LK.Game({ backgroundColor: 0x000000 //Init game with black background }); /**** * Game Code ****/ var draggedTower = null; var isDragging = false; // Create Gameplay object at top (4/5 of screen height = 2186 pixels) var gameplay = game.addChild(new Gameplay()); gameplay.x = 1024; // Center horizontally gameplay.y = 1093; // Position at top (2186/2 = 1093) // Create UI object at bottom (1/5 of screen height = 546 pixels) var ui = game.addChild(new UI()); ui.x = 1024; // Center horizontally ui.y = 2459; // Position at bottom (2732 - 546/2 = 2459) // Create button background and tower button at bottom center var buttonBG = game.addChild(LK.getAsset('BGbuttonTower', { anchorX: 0.5, anchorY: 0.5 })); buttonBG.x = 1024; buttonBG.y = 2600; var dragButton = game.addChild(new Tower()); dragButton.x = 1024; dragButton.y = 2600; // Button press event dragButton.down = function (x, y, obj) { isDragging = true; draggedTower = game.addChild(new Tower()); draggedTower.x = 1024; draggedTower.y = 2600; draggedTower.alpha = 0.7; }; // Game move handler for dragging game.move = function (x, y, obj) { if (isDragging && draggedTower) { // Calculate offset based on position relative to gameplay area corners var offsetX = 0; var offsetY = 0; var gameplayLeft = gameplay.x - gameplay.width / 2; var gameplayRight = gameplay.x + gameplay.width / 2; var gameplayTop = gameplay.y - gameplay.height / 2; var gameplayBottom = gameplay.y + gameplay.height / 2; var gameplayCenterX = gameplay.x; var gameplayCenterY = gameplay.y; // Determine which corner/quadrant the touch is in if (x >= gameplayCenterX && y <= gameplayCenterY) { // Upper right corner offsetX = 200; offsetY = -200; } else if (x <= gameplayCenterX && y <= gameplayCenterY) { // Upper left corner offsetX = -200; offsetY = -200; } else if (x <= gameplayCenterX && y >= gameplayCenterY) { // Lower left corner offsetX = -200; offsetY = 200; } else if (x >= gameplayCenterX && y >= gameplayCenterY) { // Lower right corner offsetX = 200; offsetY = 200; } // Stop any existing tweens on the tower tween.stop(draggedTower, { x: true, y: true }); // Smoothly animate to new position tween(draggedTower, { x: x + offsetX, y: y + offsetY }, { duration: 150, easing: tween.easeOut }); } }; // Game release handler game.up = function (x, y, obj) { if (isDragging && draggedTower) { draggedTower.alpha = 1.0; isDragging = false; draggedTower = null; } };
===================================================================
--- original.js
+++ change.js
@@ -1,5 +1,10 @@
/****
+* Plugins
+****/
+var tween = LK.import("@upit/tween.v1");
+
+/****
* Classes
****/
var Gameplay = Container.expand(function () {
var self = Container.call(this);
@@ -94,10 +99,21 @@
// Lower right corner
offsetX = 200;
offsetY = 200;
}
- draggedTower.x = x + offsetX;
- draggedTower.y = y + offsetY;
+ // Stop any existing tweens on the tower
+ tween.stop(draggedTower, {
+ x: true,
+ y: true
+ });
+ // Smoothly animate to new position
+ tween(draggedTower, {
+ x: x + offsetX,
+ y: y + offsetY
+ }, {
+ duration: 150,
+ easing: tween.easeOut
+ });
}
};
// Game release handler
game.up = function (x, y, obj) {