Upit | Learn about creating the game Hyper Stocks with gen AI

Play

game-community-background

user photo

game-pic

529

0

9mo

Play the Game of Stocks! Buy low, sell high, and build a fortune before the bell rings! Test your trading skills for free!

#hypercasual

#stockmarket

#tradinggame

#realtime

#financefun

Creation History

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

===================================================================
--- original.js
+++ change.js
@@ -9,17 +9,27 @@
 			self.x -= slideAmount;
 		}
 		if (moveSegmentsVertically) {
 			if (self.yValue > verticalSlideThreshold) {
-				self.y -= slideAmountVertical;
-			} else if (self.yValue < verticalSlideThreshold) {
 				self.y += slideAmountVertical;
+			} else if (self.yValue < -verticalSlideThreshold) {
+				self.y -= slideAmountVertical;
 			}
 		}
 	};
 	var segmentGraphics = self.createAsset('segment', 'Graph Segment', 0, 0.5);
 	// Function to slide the segment to the left
 });
+// Axis class to represent the graph axes
+var Axis = Container.expand(function () {
+	var self = Container.call(this);
+	self.drawAxis = function () {
+		var axisGraphics = self.createAsset('axis', 'Graph Axis', 0, 0);
+		axisGraphics.width = game.width;
+		axisGraphics.height = 2; // Thin line for the axis
+		self.addChild(axisGraphics);
+	};
+});
 // 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);
@@ -89,8 +99,17 @@
 	var newValue = Math.max(previousValue + delta, 0);
 	stockValuesHistory.push(newValue);
 	previousValue = newValue;
 }
+// Create and draw horizontal axis
+var horizontalAxis = game.addChild(new Axis());
+horizontalAxis.drawAxis();
+horizontalAxis.y = game.height / 2;
+// Create and draw vertical axis
+var verticalAxis = game.addChild(new Axis());
+verticalAxis.drawAxis();
+verticalAxis.rotation = Math.PI / 2; // Rotate to make it vertical
+verticalAxis.x = game.width / 2;
 var graphPoints = [];
 var graphWidth = game.width;
 var segmentWidth = graphWidth / 6; //; / stockValuesHistory.length;
 var x, y;

Showing 926 to 950 of 1264

1 ...36 37 38 39 40 ...51

Images

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.

a basic empty ui popup with a black background.
Single Game Texture. In-Game asset. 2d. Blank background. High contrast. No shadows.

Sounds & Music

countdown

Sound effect

countdownGo

Sound effect

increase

Sound effect

decrease

Sound effect

buy

Sound effect

sell

Sound effect

victory

Sound effect

failed

Sound effect

finalCountdown

Sound effect

Main