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.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;
}
}
// 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
});
// 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;
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 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 !");
}
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);
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.