User prompt
To implement the vertical movement rules for the graph in the stock market game, we need to follow these steps: 1. Establish the Y-coordinate mapping for the stock values: - The Y-coordinate for $0 is set at `game.height * 0.75`. - The Y-coordinate for $50 (the center of the visible range) is set at `game.height * 0.5`. - The Y-coordinate for $100 is set at `game.height * 0.25`. - This means that each dollar increase in stock value corresponds to a vertical movement of `(game.height * 0.5) / 100` pixels upwards. 2. Calculate the Y-coordinate for each stock value: - For a given stock value `stockValue`, the corresponding Y-coordinate `y` can be calculated as `game.height * 0.5 - stockValue * ((game.height * 0.5) / 100)`. 3. Determine when to slide the graph vertically: - Before drawing the next segment, check the Y-coordinate of the end of the next segment (`pointB.y`). - If `pointB.y` is below `game.height * 0.25`, calculate the vertical slide amount as `(game.height * 0.25) - pointB.y`. Then, slide the entire graph upwards by this amount using the `moveSegmentsVertically` system. - If `pointB.y` is above `game.height * 0.75` and the stock value is not $0, calculate the vertical slide amount as `(game.height * 0.75) - pointB.y`. Then, slide the entire graph downwards by this amount using the `moveSegmentsVertically` system. 4. Implement the vertical sliding mechanism: - When the graph needs to be slid vertically, set the `moveSegmentsVertically` flag to `true`. - In the `updateSlide` method of each graph segment and axis, check if `moveSegmentsVertically` is `true`. If so, adjust the Y-coordinate of the segment or axis by the calculated vertical slide amount. - Once the graph has been moved, reset the `moveSegmentsVertically` flag to `false` to prevent continuous sliding. By following these steps, the graph will maintain a visible range of $100, sliding vertically as needed to keep the segments within the screen.
Code edit (1 edits merged)
Please save this source code
User prompt
Fix Bug: 'Uncaught TypeError: self.attachAsset is not a function' in this line: 'var axisGraphics = self.attachAsset('axis', {});' Line Number: 38
User prompt
Take into account the case moveSegmentsVertically = true in drawsegment
Code edit (1 edits merged)
Please save this source code
User prompt
Slide the horizontalAxis vertically with the same rule as segments
Code edit (5 edits merged)
Please save this source code
User prompt
Fix Bug: 'Uncaught ReferenceError: g0 is not defined' in this line: 'verticalAxis.y = g0;' Line Number: 113
Code edit (1 edits merged)
Please save this source code
Code edit (1 edits merged)
Please save this source code
User prompt
put the vertical axe on the left
User prompt
draw the axes
Code edit (1 edits merged)
Please save this source code
User prompt
updateStockValueText should be call in drawNextSegment
Code edit (2 edits merged)
Please save this source code
User prompt
updateStockValueText should display current Value that is stockValuesHistory[graphIndex]
User prompt
add a text on top right that displays the current stock value. Create a dedicated updateStockValueText function and ensure variables scopes are correct
User prompt
in "new segment" console log don't display decimals
Code edit (5 edits merged)
Please save this source code
User prompt
apply the same logic of lastSegmentEndX to the lastSegmentEndY in order to avoid vertical gaps between segments
Code edit (1 edits merged)
Please save this source code
User prompt
4. **Vertical Sliding Mechanism:** : Prevents the graph from raising out of the screen by applying a vertical slide - Similar to the horizontal sliding mechanism already in place for moving the graph segments leftward, you would implement a vertical sliding mechanism. - This vertical slide would be activated via a global varibale moveSegmentsVertically when the Y values of the segments exceed a predefined global threshold. - The direction of the slide (up or down) would depend on whether the stock price is increasing or decreasing. - This mecanism comes in addition to the horizontal slide mecanism and is is independant from it - the threshold is a global variable - All segments (the graph) move the same way. So the slideAmountVertical should be global like slideAmount
User prompt
4. **Vertical Sliding Mechanism:** : Prevents the graph from raising out of the screen by applying a vertical slide - Similar to the horizontal sliding mechanism already in place for moving the graph segments leftward, you would implement a vertical sliding mechanism. - This vertical slide would be activated via a global varibale moveSegmentsVertically when the Y values of the segments exceed a predefined global threshold. - The direction of the slide (up or down) would depend on whether the stock price is increasing or decreasing. - This mecanism comes in addition to the horizontal slide mecanism and is is independant from it - the threshold is a global variable - All segments (the graph) move the same way
User prompt
4. **Vertical Sliding Mechanism:** - Similar to the horizontal sliding mechanism already in place for moving the graph segments leftward, you would implement a vertical sliding mechanism. - This vertical slide would be activated via a global varibale moveSegmentsVertically when the Y values of the segments exceed a predefined global threshold. - The direction of the slide (up or down) would depend on whether the stock price is increasing or decreasing. - This mecanism comes in addition to the horizontal slide mecanism and is is independant from it - the threshold is a global variable - All segments (the graph) move the same way
User prompt
4. **Vertical Sliding Mechanism:** - Similar to the horizontal sliding mechanism already in place for moving the graph segments leftward, you would implement a vertical sliding mechanism. - This vertical slide would be activated when the Y values of the segments exceed a predefined global threshold. - The direction of the slide (up or down) would depend on whether the stock price is increasing or decreasing. - This mecanism comes in addition to the horizontal slide mecanism and is is independant from it
/**** * Classes ****/ var GraphSegment = Container.expand(function () { var self = Container.call(this); self.yValue = 0; // Track the Y value of the segment self.updateSlide = function () { if (moveSegments) { self.x -= slideAmount; } if (moveSegmentsVertically) { var slideDirection = lastStockValue < self.yValue ? 1 : -1; // Slide up if stock value is increasing, down if decreasing self.y += slideAmount * slideDirection; if (Math.abs(self.y - game.height / 2) > verticalSlideThreshold) { moveSegmentsVertically = false; // Stop vertical sliding when threshold is reached } } }; var segmentGraphics = self.createAsset('segment', 'Graph Segment', 0, 0.5); // Function to slide the segment to the left }); // 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; }; }); /**** * Initialize Game ****/ var game = new LK.Game({ // No need to set backgroundColor since we are adding a background asset }); /**** * Game Code ****/ var slideAmount = 5.0; // Create and add background asset var running = false; var moveSegments = false; var moveSegmentsVertically = false; var verticalSlideThreshold = 200; // Define a global threshold for vertical sliding var lastStockValue = 0; // Keep track of the last stock value to determine slide direction var drawingInProgress = false; var background = game.addChild(LK.getAsset('background', 'Game background', 0.5, 0.5)); background.x = 1024; // Center x position background.y = 2732 - background.height / 2; // Center y position // Initialize game elements var player = new Player(); var stocks = []; // Initialize stock values history with the first value of $10 var stockValuesHistory = [10]; // Define graphIndex and initialize to 0 var graphIndex = 0; // Declare a global array to store graph segments var graphSegments = []; // 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.random() - 0.5) * 100; // Generate a delta between -50 and 50 var newValue = Math.max(previousValue + delta, 0); stockValuesHistory.push(newValue); previousValue = newValue; } var graphPoints = []; var graphWidth = game.width; var segmentWidth = graphWidth / 6; //; / stockValuesHistory.length; var x, y; // Compute the coordinates for the graph based on stockValuesHistory for (var i = 0; i < stockValuesHistory.length; i++) { x = Math.min(segmentWidth * i, game.width * 0.75); y = game.height / 2 - stockValuesHistory[i] * 10; // Scale the stock value for display graphPoints.push({ x: x, y: y }); } function addNewStockValues() { if (moveSegments) { var newStockValue = Math.floor(Math.random() * 100) + 1; stockValuesHistory.push(newStockValue); var totalSlideDistance = graphSegments.length > 0 ? graphSegments[0].startX - graphSegments[0].x : 0; var newGraphPoint = { x: graphPoints[graphPoints.length - 1].x + segmentWidth - totalSlideDistance, y: game.height / 2 - newStockValue * 10 }; graphPoints.push(newGraphPoint); } LK.setTimeout(addNewStockValues, 1000); // Continue adding new values every second } var segmentDrawInterval = null; var stockDisplay = []; // Array to hold stock display elements var balanceText = new Text2('Balance: $' + player.getBalance(), { size: 50, fill: "#ffffff" }); balanceText.anchor.set(0.5, 0); LK.gui.top.addChild(balanceText); // 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) { var pointA = graphPoints[graphIndex]; var lastSegment = graphSegments.length > 0 ? graphSegments[graphSegments.length - 1] : null; var lastSegmentEndX = lastSegment ? lastSegment.x + Math.cos(lastSegment.rotation) * lastSegment.width : 0; pointA.x = lastSegment ? lastSegmentEndX : 0; var pointB = graphPoints[graphIndex + 1]; var delay = 1; // Reduce delay if segments are moving drawingInProgress = true; drawSegment(game, graphIndex, pointA.x, pointA.y, pointB.x, pointB.y, delay); graphIndex++; } } function drawSegment(gameRef, index, x1, y1, x2, y2, delay) { var segment = gameRef.addChild(new GraphSegment()); segment.yValue = y1; // Set the yValue to the starting Y of the segment // Add the new segment to the global graphSegments array graphSegments.push(segment); console.log('new segment index=' + index + '/' + (graphSegments.length - 1), x1, y1, x2, y2); segment.x = x1; segment.y = y1; segment.width = 1; segment.height = 20; var deltaX = x2 - x1; var deltaY = y2 - y1; if (deltaX === 0 && deltaY === 0) { console.error('Invalid deltaX and deltaY for rotation calculation.'); return; } var distance = Math.sqrt(deltaX * deltaX + deltaY * deltaY); segment.rotation = Math.atan2(deltaY, deltaX); /*console.log('segment.rotation ' + (graphSegments.length - 1), { deltaY: deltaY, deltaX: deltaX }, segment.rotation);*/ var startTime = Date.now(); var endTime = startTime + delay * 1000; var updateWidth = function updateWidth() { if (!running) { return; } var currentTime = Date.now(); var timeElapsed = currentTime - startTime; var newWidth = Math.min(timeElapsed / (delay * 1000) * distance, distance); 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 !"); } // Activate vertical sliding if the new segment's Y value exceeds the threshold if (!moveSegmentsVertically && Math.abs(segment.y - game.height / 2) > verticalSlideThreshold) { moveSegmentsVertically = true; lastStockValue = segment.yValue; // Update the last stock value for slide direction } drawingInProgress = false; } }; updateWidth(); } function startGame() { // Initialize and start the game logic here running = true; // Set up a tick event to call drawNextSegment every second segmentDrawInterval = LK.setInterval(drawNextSegment, 100); // Add ValueIndicator to the game and update its position //LK.setTimeout(addNewStockValues, 1000); } // Main game loop LK.on('tick', function () { if (!running) { return; } // Update slide for each graph segment graphSegments.forEach(function (segment) { segment.updateSlide(); }); // 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
@@ -3,22 +3,19 @@
****/
var GraphSegment = Container.expand(function () {
var self = Container.call(this);
self.yValue = 0; // Track the Y value of the segment
- self.verticalThreshold = 1366; // Half of the game height
self.updateSlide = function () {
if (moveSegments) {
self.x -= slideAmount;
- self.distanceToSlide -= slideAmount;
- if (self.distanceToSlide <= 0) {
- self.distanceToSlide = null;
+ }
+ if (moveSegmentsVertically) {
+ var slideDirection = lastStockValue < self.yValue ? 1 : -1; // Slide up if stock value is increasing, down if decreasing
+ self.y += slideAmount * slideDirection;
+ if (Math.abs(self.y - game.height / 2) > verticalSlideThreshold) {
+ moveSegmentsVertically = false; // Stop vertical sliding when threshold is reached
}
}
- // Check if the Y value exceeds the vertical threshold
- if (Math.abs(self.y - self.verticalThreshold) > verticalSlideThreshold) {
- var slideDirection = self.y > self.verticalThreshold ? -1 : 1;
- self.y += slideDirection * verticalSlideAmount;
- }
};
var segmentGraphics = self.createAsset('segment', 'Graph Segment', 0, 0.5);
// Function to slide the segment to the left
});
@@ -65,13 +62,14 @@
/****
* Game Code
****/
var slideAmount = 5.0;
-var verticalSlideThreshold = 200; // Define a global threshold for vertical sliding
-var verticalSlideAmount = 2.0; // Define the amount to slide vertically
// Create and add background asset
var running = false;
var moveSegments = false;
+var moveSegmentsVertically = false;
+var verticalSlideThreshold = 200; // Define a global threshold for vertical sliding
+var lastStockValue = 0; // Keep track of the last stock value to determine slide direction
var drawingInProgress = false;
var background = game.addChild(LK.getAsset('background', 'Game background', 0.5, 0.5));
background.x = 1024; // Center x position
background.y = 2732 - background.height / 2; // Center y position
@@ -198,8 +196,13 @@
if (!moveSegments && segment.x + segment.width / 2 >= game.width * 0.5) {
moveSegments = true;
console.log("Past center !");
}
+ // Activate vertical sliding if the new segment's Y value exceeds the threshold
+ if (!moveSegmentsVertically && Math.abs(segment.y - game.height / 2) > verticalSlideThreshold) {
+ moveSegmentsVertically = true;
+ lastStockValue = segment.yValue; // Update the last stock value for slide direction
+ }
drawingInProgress = false;
}
};
updateWidth();
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.