Code edit (2 edits merged)
Please save this source code
User prompt
add a background asset
Code edit (1 edits merged)
Please save this source code
User prompt
add threshold to avoid small atomical direction changes
User prompt
in Knight rename move to moveToDirection
User prompt
Please fix the bug: 'TypeError: knightGraphics is undefined' in or related to this line: 'knightGraphics.visible = true;' Line Number: 112
User prompt
Please fix the bug: 'TypeError: knightGraphics is undefined' in or related to this line: 'knightGraphics.visible = true;' Line Number: 111
User prompt
Please fix the bug: 'TypeError: knightGraphics is undefined' in or related to this line: 'knightGraphics.visible = true;' Line Number: 108
Code edit (1 edits merged)
Please save this source code
User prompt
Please fix the bug: 'TypeError: knightGraphics is undefined' in or related to this line: 'knightGraphics.visible = true;' Line Number: 105
User prompt
Please fix the bug: 'TypeError: knightGraphics is undefined' in or related to this line: 'knightGraphics.visible = true;' Line Number: 105
User prompt
Please fix the bug: 'TypeError: knightGraphics is undefined' in or related to this line: 'knightGraphics.visible = true;' Line Number: 107
User prompt
Please fix the bug: 'TypeError: knightGraphics is undefined' in or related to this line: 'knightGraphics.visible = true;' Line Number: 104
User prompt
Please fix the bug: 'TypeError: knightGraphics is undefined' in or related to this line: 'knightGraphics.visible = true;' Line Number: 105
User prompt
don't use removeChild/addChild in switchAsset, instead just change visibility
User prompt
store previous direction, and only switch if direction change
Code edit (1 edits merged)
Please save this source code
User prompt
Don't self.attachAsset inside move function that's bad for perf. instead 1) pre-create a list of assets for each direction 2) create a function to switch the asset 3) call that function in move depending on the move
User prompt
3. **Dynamic Asset Switching**: In the knight's movement function, dynamically switch the knight's graphical asset based on the current movement direction. This can be done by detaching the current asset and attaching the new one corresponding to the direction.
Code edit (2 edits merged)
Please save this source code
User prompt
Let's go step by step : in Knight 2. **Direction Mapping**: Create a mapping between movement directions and the corresponding asset identifiers. For example: - `'down-left'` maps to `dir1` - `'left'` maps to `dir2` - `'up-left'` maps to `dir3` - `'up'` maps to `dir4` - `'up-right'` maps to `dir5` - `'right'` maps to `dir6` - `'down-right'` maps to `dir7` - `'down'` maps to `dir8`
Code edit (1 edits merged)
Please save this source code
User prompt
make knight move smoother, currently it shakes esspecially when moving in diagonal
User prompt
add a threshold so knight stops moving when close enough from target
Code edit (1 edits merged)
Please save this source code
/**** * Classes ****/ var Knight = Container.expand(function () { var self = Container.call(this); var directionMapping = { 'down-left': 'dir1', 'left': 'dir2', 'up-left': 'dir3', 'up': 'dir4', 'up-right': 'dir5', 'right': 'dir6', 'down-right': 'dir7', 'down': 'dir8' }; // Pre-create a list of assets for each direction var knightAssets = {}; for (var dir in directionMapping) { knightAssets[dir] = []; for (var i = 1; i <= 8; i++) { var frameNumber = i.toString().padStart(3, '0'); knightAssets[dir].push(LK.getAsset('knight-run-' + directionMapping[dir] + '-' + frameNumber, { anchorX: 0.5 })); } } var currentFrame = 0; var animationSpeed = 0.2; // Controls how fast the animation plays var frameCounter = 0; var knightGraphics = knightAssets['down'][0]; // Initialize with the 'down' direction asset, first frame self.addChild(knightGraphics); knightGraphics.anchor.set(0.5, 0.5); knightGraphics.visible = true; self.lastDirection = null; // Initialize lastDirection to track previous direction self.isMoving = false; // Track if the knight is currently moving self.speed = 10; self.switchAsset = function (direction) { if (!knightGraphics) { return; } // Detach current asset // Hide current asset knightGraphics.visible = false; // Switch to new asset based on direction and current frame knightGraphics = knightAssets[direction][currentFrame]; self.addChild(knightGraphics); // Show new asset knightGraphics.visible = true; }; self.updateAnimation = function () { if (self.isMoving) { // Only update animation if moving frameCounter += animationSpeed; if (frameCounter >= 1) { frameCounter = 0; currentFrame = (currentFrame + 1) % 8; // Cycle through 8 frames if (self.lastDirection) { self.switchAsset(self.lastDirection); } } } }; self.moveToDirection = function (direction) { if (self.lastDirection !== direction) { self.switchAsset(direction); self.lastDirection = direction; } switch (direction) { case 'up': self.y -= self.speed; break; case 'down': self.y += self.speed; break; case 'left': self.x -= self.speed; break; case 'right': self.x += self.speed; break; case 'up-left': self.x -= self.speed / Math.sqrt(2); self.y -= self.speed / Math.sqrt(2); break; case 'up-right': self.x += self.speed / Math.sqrt(2); self.y -= self.speed / Math.sqrt(2); break; case 'down-left': self.x -= self.speed / Math.sqrt(2); self.y += self.speed / Math.sqrt(2); break; case 'down-right': self.x += self.speed / Math.sqrt(2); self.y += self.speed / Math.sqrt(2); break; } }; }); var Target = Container.expand(function () { var self = Container.call(this); self.x = 0; self.y = 0; }); /**** * Initialize Game ****/ var game = new LK.Game({ backgroundColor: 0x000000 //Init game with black background }); /**** * Game Code ****/ //<Write entity 'classes' with empty functions for important behavior here> //<Write imports for supported plugins here> //<Assets used in the game will automatically appear here> //<Write game logic code here, including initializing arrays and variables> var background = LK.getAsset('background', { anchorX: 0.5, anchorY: 0.5 }); background.x = 2048 / 2; background.y = 2732 / 2; game.addChild(background); var knight = game.addChild(new Knight()); knight.x = 2048 / 2; knight.y = 2732 / 2; var target = game.addChild(new Target()); target.x = knight.x; target.y = knight.y; game.down = function (x, y, obj) { var game_position = game.toLocal(obj.global); target.x = game_position.x; target.y = game_position.y; }; game.update = function () { var dx = target.x - knight.x; var dy = target.y - knight.y; var distance = Math.sqrt(dx * dx + dy * dy); var distanceThreshold = 5; // Define a threshold to avoid small movements var directionThreshold = 5; // Define a threshold for direction changes to avoid shaking if (distance > distanceThreshold) { // Determine the primary direction based on the larger component (dx or dy) if (Math.abs(dx) > Math.abs(dy) + directionThreshold) { // Horizontal movement dominates if (dx > 0) { if (dy > directionThreshold) { knight.moveToDirection('down-right'); } else if (dy < -directionThreshold) { knight.moveToDirection('up-right'); } else { knight.moveToDirection('right'); } } else { if (dy > directionThreshold) { knight.moveToDirection('down-left'); } else if (dy < -directionThreshold) { knight.moveToDirection('up-left'); } else { knight.moveToDirection('left'); } } } else if (Math.abs(dy) > Math.abs(dx) + directionThreshold) { // Vertical movement dominates if (dy > 0) { if (dx > directionThreshold) { knight.moveToDirection('down-right'); } else if (dx < -directionThreshold) { knight.moveToDirection('down-left'); } else { knight.moveToDirection('down'); } } else { if (dx > directionThreshold) { knight.moveToDirection('up-right'); } else if (dx < -directionThreshold) { knight.moveToDirection('up-left'); } else { knight.moveToDirection('up'); } } } else { // The difference between dx and dy is small, use diagonal movement if (dx > 0 && dy > 0) { knight.moveToDirection('down-right'); } else if (dx > 0 && dy < 0) { knight.moveToDirection('up-right'); } else if (dx < 0 && dy > 0) { knight.moveToDirection('down-left'); } else if (dx < 0 && dy < 0) { knight.moveToDirection('up-left'); } } knight.isMoving = true; // Set knight to moving state } else { knight.isMoving = false; // Set knight to idle state when not moving } // Update knight animation knight.updateAnimation(); };
===================================================================
--- original.js
+++ change.js
@@ -138,10 +138,10 @@
game.update = function () {
var dx = target.x - knight.x;
var dy = target.y - knight.y;
var distance = Math.sqrt(dx * dx + dy * dy);
- var distanceThreshold = 50; // Define a threshold to avoid small movements
- var directionThreshold = 10; // Define a threshold for direction changes to avoid shaking
+ var distanceThreshold = 5; // Define a threshold to avoid small movements
+ var directionThreshold = 5; // Define a threshold for direction changes to avoid shaking
if (distance > distanceThreshold) {
// Determine the primary direction based on the larger component (dx or dy)
if (Math.abs(dx) > Math.abs(dy) + directionThreshold) {
// Horizontal movement dominates