Code edit (1 edits merged)
Please save this source code
User prompt
add to the vertical axis dynamic values with a step of 50
Code edit (1 edits merged)
Please save this source code
User prompt
add dynamic values (step of 50) to the vertical axis
Code edit (3 edits merged)
Please save this source code
User prompt
fix text markers position because gui coordinates are not like other assets coordinates
User prompt
fix text markers position because LK.gui don't work with coordinates like game.height * 0.5
Code edit (4 edits merged)
Please save this source code
User prompt
add a series of 3 texts in the horizontal center of the screen to make stock value markers - text = "0$" at y=game.height*0.75 - text = "50$" at y=game.height*0.5 - text = "100$" at y=game.height*0.25
User prompt
flash the screen in the color of the button when pressed
Code edit (1 edits merged)
Please save this source code
User prompt
Set alpha of farbackground to 0.5
User prompt
Initialize the farBackground just before boardBackground
User prompt
Initialize farBackground like boardBackground
User prompt
Add a new background asset named FarBackground
Code edit (2 edits merged)
Please save this source code
User prompt
Add a new background asset named Board that will be placed under the current background
Code edit (4 edits merged)
Please save this source code
User prompt
Set horizontalAxis alpha to 0 when its y > game.height * 0.8 and else set it to 1
Code edit (4 edits merged)
Please save this source code
User prompt
Make buttons text a bit smaller when pressed to simulate press
Code edit (1 edits merged)
Please save this source code
User prompt
text of buttons should always be on top of buttons
User prompt
restore bigButton asset when buttons are released
Code edit (1 edits merged)
Please save this source code
/**** * Classes ****/ var AxisLabel = Container.expand(function (value) { var self = Container.call(this); self.value = value; var label = new Text2('$' + value, { size: 30, fill: "#ffffff" }); label.anchor.set(0.5, 0.5); self.addChild(label); self.updatePosition = function (axisY) { self.y = axisY - value * dollarToYPixelRatio; }; }); var GraphSegment = Container.expand(function () { var self = Container.call(this); self.index1 = null; self.stockValue1 = 0; self.stockValue2 = 0; self.x1 = 0; self.y1 = 0; self.x2 = 0; self.y2 = 0; self.isFinished = false; var verticalSlideRatio = 1; var interpolationSpeed = 0.5; // Adjust this value for speed self.updateSlide = function () { if (moveSegments) { self.x -= slideAmount * 1; } if (moveSegmentsVertically) { var currentDelta = horizontalAxis.y - game.height * 0.75; var targetY = game.height * 0.75 - dollarToYPixelRatio * self.stockValue1 + currentDelta; var deltaY = (targetY - self.y) * interpolationSpeed; self.y += deltaY; if (Math.abs(deltaY) <= 1) { self.y = targetY; } } }; var segmentGraphics = self.attachAsset('segment', { anchorY: 0.5 }); }); // Axis class to represent the graph axes var Axis = Container.expand(function (isVertical) { var self = Container.call(this); var interpolationSpeed = 0.02; // Adjust this value for speed var lowerLimit = game.height * 0.75; self.isVertical = isVertical; // Property to determine if the axis is vertical self.yValue = 0; // Track the Y value of the axis for vertical movement self.updateSlide = function () { // Current stock value excedent over 100$ (ignore below 100$) var stockDelta = Math.max(0, stockValuesHistory[graphIndex] - 100); // Target = base axis + delta in pixels var targetY = lowerLimit + stockDelta * dollarToYPixelRatio; if (!self.isVertical) { // Smooth interpolation var deltaY = (targetY - self.y) * interpolationSpeed; self.y += deltaY; if (Math.abs(deltaY) < 1) { self.y = targetY; } if (moveSegmentsVertically && self.y <= lowerLimit) { self.y = lowerLimit; moveSegmentsVertically = false; } // Set alpha based on y position self.alpha = self.y > game.height * 0.85 ? 0 : 1; } }; self.drawAxis = function () { var axisGraphics = self.addChild(LK.getAsset('axis', { height: 4 // Thin line for the axis })); if (self.isVertical) { for (var i = 50; i <= 1000; i += 50) { var label = new AxisLabel(i); label.x = 30; // Position the label to the left of the axis self.addChild(label); label.updatePosition(self.y); } } }; }); // ValueIndicator class to represent the current value of the stock on the graph // Player class to represent the player's portfolio var Player = Container.expand(function () { var self = Container.call(this); self.balance = 100; // Start with $100 self.stocks = {}; // Object to hold stocks and quantities self.buyStock = function (stock, quantity) { var cost = stock.getPrice() * quantity; if (self.balance >= cost) { self.balance -= cost; if (!self.stocks[stock]) { self.stocks[stock] = 0; } self.stocks[stock] += quantity; } }; self.sellStock = function (stock, quantity) { if (self.stocks[stock] && self.stocks[stock] >= quantity) { self.balance += stock.getPrice() * quantity; self.stocks[stock] -= quantity; if (self.stocks[stock] === 0) { delete self.stocks[stock]; } } }; self.getBalance = function () { return self.balance; }; self.getPortfolio = function () { return self.stocks; }; }); var BuyButton = Container.expand(function () { var self = Container.call(this); self.currentText = "ON"; self.setText = function (text, isPressed) { self.currentText = text; var buttonTextSize = isPressed ? 230 : 250; var buttonText = new Text2(text, { size: buttonTextSize, fill: "#ffffff", font: "'Arial-BoldMT', 'Arial', sans-serif" }); buttonText.anchor.set(0.5, 0.5); self.addChild(buttonText); }; var buttonGraphics = self.attachAsset('bigButton', { anchorX: 0.5, anchorY: 0.5, tint: 0xFFA500 }); self.on('down', function () { buttonGraphics = self.attachAsset('bigButtonPressed', { anchorX: 0.5, anchorY: 0.5, tint: 0xFFA500 }); LK.effects.flashScreen(0xFFA500, 100); self.setText(self.currentText, true); if (currentStock) { buyStock(currentStock); } }).on('up', function () { buttonGraphics = self.attachAsset('bigButton', { anchorX: 0.5, anchorY: 0.5, tint: 0xFFA500 }); self.setText(self.currentText); }); }); var SellButton = Container.expand(function () { var self = Container.call(this); self.currentText = "ON"; self.setText = function (text, isPressed) { self.currentText = text; var buttonTextSize = isPressed ? 230 : 250; var buttonText = new Text2(text, { size: buttonTextSize, fill: "#ffffff", font: "'Arial-BoldMT', 'Arial', sans-serif" }); buttonText.anchor.set(0.5, 0.5); self.addChild(buttonText); }; var buttonGraphics = self.attachAsset('bigButton', { anchorX: 0.5, anchorY: 0.5, tint: 0x008000 }); self.on('down', function () { buttonGraphics = self.attachAsset('bigButtonPressed', { anchorX: 0.5, anchorY: 0.5, tint: 0x008000 }); LK.effects.flashScreen(0x008000, 100); self.setText(self.currentText, true); if (currentStock) { sellStock(currentStock); } }).on('up', function () { buttonGraphics = self.attachAsset('bigButton', { anchorX: 0.5, anchorY: 0.5, tint: 0x008000 }); self.setText(self.currentText); }); }); /**** * Initialize Game ****/ var game = new LK.Game({}); /**** * Game Code ****/ var slideAmount = 6.5; var slideAmountVertical = 0.10; // Reduced speed for smoother vertical movement var moveSegmentsVertically = false; var verticalSlideThreshold = 500; // Define a global threshold for vertical sliding var upperLimit = game.height * 0.35; var lowerLimit = game.height * 0.75; // Define lowerLimit for use in segment positioning var running = false; var moveSegments = false; var drawingInProgress = false; // Initialize game elements var player = new Player(); var stocks = []; // Initialize stock values history with the first value of $10 var stockValuesHistory = [50]; // Define graphIndex and initialize to 0 var graphIndex = 0; // Declare a global array to store graph segments var graphSegments = []; // Define a global variable for the current stock var currentStock = null; var graphPoints = []; var graphWidth = game.width; var segmentWidth = graphWidth / 5; //; / stockValuesHistory.length; var dollarToYPixelRatio = game.height * 0.5 / 100; var segmentDrawInterval = null; var secondsPerSegment = 2.0; var stockDisplay = []; // Array to hold stock display elements /**** * UI Elements ****/ var farBackground = game.addChild(LK.getAsset('farBackground', { anchorX: 0.5, anchorY: 0.5, alpha: 0.25 })); farBackground.x = game.width / 2; farBackground.y = game.height / 2; var boardBackground = game.addChild(LK.getAsset('board', { anchorX: 0.5, anchorY: 0.5 })); boardBackground.x = game.width / 2; boardBackground.y = game.height * 0.9; var boardBorder = game.addChild(LK.getAsset('boardBorder', { anchorX: 0.5, anchorY: 0.5 })); boardBorder.x = game.width / 2; boardBorder.y = game.height * 0.85; var background = game.addChild(LK.getAsset('background', { anchorX: 0.5, anchorY: 0.5 })); background.x = 1024; // Center x position background.y = 2732 * 0.71; // Center y position // Create and draw horizontal axis var horizontalAxis = game.addChild(new Axis(false)); // false indicates this is a horizontal axis horizontalAxis.yValue = game.height * 0.75; // Initialize yValue for vertical movement horizontalAxis.drawAxis(); horizontalAxis.y = horizontalAxis.yValue; horizontalAxis.width = game.width; horizontalAxis.height = 10; horizontalAxis.x = 0; // Move axis to the left side of the screen // Create and draw fixed horizontal Marker axis // Create and draw vertical axis var verticalAxis = game.addChild(new Axis(true)); // true indicates this is a vertical axis verticalAxis.drawAxis(); verticalAxis.rotation = Math.PI / 2; // Rotate to make it vertical verticalAxis.x = 20; // Move axis to the left side of the screen verticalAxis.width = game.height; verticalAxis.height = 10; verticalAxis.y = 0; // Create buttons var buyButton = game.addChild(new BuyButton()); buyButton.setText('Buy'); buyButton.x = game.width * 0.25; buyButton.y = game.height - buyButton.height / 2 - 20; var sellButton = game.addChild(new SellButton()); sellButton.setText('Sell'); sellButton.x = game.width * 0.75; sellButton.y = game.height - sellButton.height / 2 - 20; var balanceText = new Text2('Balance: $' + player.getBalance(), { size: 50, fill: "#ffffff" }); // Create a text display for the verticalSlideAmount labeled VSA var verticalSlideAmount = 0; var vsaText = new Text2('VSA: ' + verticalSlideAmount.toFixed(0), { size: 50, fill: "#ffffff" }); vsaText.anchor.set(0, 0); LK.gui.topLeft.addChild(vsaText); var stockValueText = new Text2('Stock Value: $' + stockValuesHistory[stockValuesHistory.length - 1].toFixed(2), { size: 50, fill: "#ffffff" }); stockValueText.anchor.set(1, 0); LK.gui.topRight.addChild(stockValueText); function updateStockValueText() { if (graphIndex < stockValuesHistory.length) { stockValueText.setText('Stock Value: $' + stockValuesHistory[graphIndex + 1].toFixed(0)); } } balanceText.anchor.set(0.5, 0); LK.gui.top.addChild(balanceText); /**** * Game Functions ****/ // Update the player's balance display function updateBalanceDisplay() { balanceText.setText('Balance: $' + player.getBalance().toFixed(2)); } // Function to handle buying stocks function buyStock(stock) { player.buyStock(stock, 1); // Buy 1 stock for simplicity updateBalanceDisplay(); } // Function to handle selling stocks function sellStock(stock) { player.sellStock(stock, 1); // Sell 1 stock for simplicity updateBalanceDisplay(); } function drawNextSegment() { //console.log("drawNextSegment " + graphIndex + ' isDrawing = ' + drawingInProgress); var hasFinished = graphIndex >= graphPoints.length - 1; if (hasFinished) { running = false; LK.showGameOver(); return; } if (!drawingInProgress) { updateStockValueText(); var pointA = graphPoints[graphIndex]; var pointB = graphPoints[graphIndex + 1]; var nextSegmentRotation = Math.atan2(pointB.y - pointA.y, pointB.x - pointA.x); // Calculate next segment rotation based on pointA and pointB coordinates var distance = Math.sqrt(Math.pow(pointB.x - pointA.x, 2) + Math.pow(pointB.y - pointA.y, 2)); // Calculate the distance between points A and B var lastSegment = graphSegments.length > 0 ? graphSegments[graphSegments.length - 1] : null; var lastSegmentEndX = lastSegment ? lastSegment.x + Math.cos(lastSegment.rotation) * lastSegment.width : graphPoints[graphIndex].x; var lastSegmentEndY = lastSegment ? lastSegment.y + Math.sin(lastSegment.rotation) * lastSegment.width : graphPoints[graphIndex].y; var pointAXMovement = lastSegmentEndX - pointA.x; var pointAYMovement = lastSegmentEndY - pointA.y; pointA.x = lastSegmentEndX; pointA.y = lastSegmentEndY > lowerLimit ? lowerLimit : lastSegmentEndY; var nextSegmentEndY = pointA.y + Math.sin(nextSegmentRotation) * distance; // Adjust distance to ensure segment's end doesn't exceed lowerLimit if (nextSegmentEndY > lowerLimit) { distance = (lowerLimit - pointA.y) / Math.sin(nextSegmentRotation); } if (nextSegmentEndY < upperLimit || nextSegmentEndY > upperLimit && stockValuesHistory[graphIndex + 1] >= 100) { moveSegmentsVertically = true; } var delay = 0.5; // Reduce delay to speed up the drawing of segments drawingInProgress = true; drawSegment(game, graphIndex, pointA.x, pointA.y, nextSegmentRotation, distance, delay); } } function drawSegment(gameRef, index, x1, y1, rotation, width, delay) { var segment = gameRef.addChild(new GraphSegment()); segment.index1 = index; segment.stockValue1 = stockValuesHistory[index]; segment.stockValue2 = stockValuesHistory[index + 1]; segment.x1 = x1; segment.y1 = y1; segment.rotation = rotation; segment.width = 1; // Start with a width of 1 and animate to the target width segment.height = 20; // Add the new segment to the global graphSegments array graphSegments.push(segment); console.log('new segment index=' + index + '-' + (index + 1) + " " + stockValuesHistory[index] + "-" + stockValuesHistory[index + 1] + "$", Math.floor(x1), Math.floor(y1), 'rotation=' + (rotation * (180 / Math.PI)).toFixed(2) + ' degrees', 'width=' + width); segment.x = x1; segment.y = y1; var startTime = Date.now(); var endTime = startTime + delay * 1000 * secondsPerSegment; var updateWidth = function updateWidth() { if (!running) { return; } var currentTime = Date.now(); var timeElapsed = currentTime - startTime; var newWidth = Math.min(timeElapsed / (delay * 1000 * secondsPerSegment) * width, width); segment.width = newWidth; if (currentTime < endTime) { LK.setTimeout(updateWidth, 16); } else { if (!moveSegments && segment.x + segment.width / 2 >= game.width * 0.5) { moveSegments = true; console.log("Past center !"); } segment.isFinished = true; graphIndex++; drawingInProgress = false; } }; updateWidth(); } function setDebugValues() { stockValuesHistory = []; var series = [0, 25, 50, 75, 100, 125, 150, 175, 200, 175, 150, 125, 100, 75, 50, 25, 0, 0, 0]; //series = [0, 25, 50, 75, 100, 125, 125, 125, 125, 100, 75, 50, 25, 0, 0, 0]; for (var i = 0; i < 1; i++) { stockValuesHistory = stockValuesHistory.concat(series); } } function startGame() { // Initialize // Generate random deltas and add to previous value for stockValuesHistory var previousValue = stockValuesHistory[stockValuesHistory.length - 1]; for (var i = 0; i < 100; i++) { var delta = Math.floor((Math.random() - 0.5) * 100); // Generate a delta between -50 and 50 var newValue = Math.max(0, previousValue + (previousValue == 0 ? Math.abs(delta) : delta)); stockValuesHistory.push(newValue); previousValue = newValue; } //setDebugValues(); // DEBUG MODE var x, y; // Compute the coordinates for the graph based on stockValuesHistory for (var i = 0; i < stockValuesHistory.length; i++) { x = segmentWidth * i; y = game.height * 0.75 - stockValuesHistory[i] * dollarToYPixelRatio; // Calculate Y based on new mapping graphPoints.push({ x: x, y: y }); } running = true; // Set up a tick event to call drawNextSegment every second segmentDrawInterval = LK.setInterval(drawNextSegment, 20); } // Main game loop LK.on('tick', function () { if (!running) { return; } // Update slide for each graph segment and the horizontal axis graphSegments.forEach(function (segment) { segment.updateSlide(); }); horizontalAxis.updateSlide(); // Slide the horizontal axis vertically // Update the position of the axis labels if (verticalAxis.children) { verticalAxis.children.forEach(function (child) { if (child instanceof AxisLabel) { child.updatePosition(verticalAxis.y); } }); } // Update the vertical slide amount text periodically vsaText.setText(graphIndex + ' VSA: ' + verticalSlideAmount.toFixed(0) + " " + moveSegmentsVertically); // Check for game over conditions (e.g., player runs out of money) if (player.getBalance() <= 0) { LK.effects.flashScreen(0xff0000, 1000); LK.showGameOver(); } }); LK.setTimeout(function () { startGame(); }, 1000);
===================================================================
--- original.js
+++ change.js
@@ -77,9 +77,9 @@
}));
if (self.isVertical) {
for (var i = 50; i <= 1000; i += 50) {
var label = new AxisLabel(i);
- label.x = -30; // Position the label to the left of the axis
+ label.x = 30; // Position the label to the left of the axis
self.addChild(label);
label.updatePosition(self.y);
}
}
A Technical dark background. Nothing just a gradiant of colors from black to dark blue. Theme : stock market. background
A modern clean empty rectangular button without borders. Single Game Texture. In-Game asset. 2d. Blank background. High contrast. No shadows.
without shadow
a basic empty ui popup with a black background. Single Game Texture. In-Game asset. 2d. Blank background. High contrast. No shadows.