How I Built a Candlestick Recognition Game with JavaScript

How I Built a Candlestick Recognition Game with JavaScript

Learning technical analysis can be difficult for beginners. Reading about candlestick patterns is one thing, but recognising a pattern quickly on a chart is a completely different skill.

While working on financial education projects for StockMaster, I wanted to experiment with a simple idea:

What if learning candlestick patterns felt more like a game than a textbook?

That idea led me to build Candlestick Detective, a browser-based educational game that challenges players to identify candlestick patterns and learn what those patterns mean.

The project combines financial education with HTML, CSS and JavaScript, without requiring a complicated game engine.

The Basic Idea

The gameplay is intentionally simple.

A player is shown a candlestick pattern and has to identify it from several possible answers.

For example, the choices might include:

• Hammer
• Doji
• Shooting Star
• Engulfing Pattern

After selecting an answer, the game provides immediate feedback and explains the pattern.

The objective isn’t simply to achieve a high score. The game is designed to help players gradually become familiar with common candlestick formations.

I wanted the learning process to follow a simple cycle:

See → Identify → Answer → Learn → Repeat

Why Use JavaScript?

JavaScript was a natural choice because the game needed to run directly inside a web browser.

There was no need for a large game engine or a complicated backend.

JavaScript can handle the important parts of the game:

• Selecting questions
• Displaying patterns
• Checking answers
• Calculating scores
• Tracking progress
• Providing feedback
• Moving to the next question
• Restarting the game

This also makes the game relatively lightweight and accessible on desktop and mobile devices.

Creating the Game Data

One of the first things I needed was a structured collection of questions.

Instead of hard-coding every question separately, I used JavaScript objects.

A simplified example looks like this:

const questions = [
{
pattern: “Hammer”,
options: [
“Hammer”,
“Doji”,
“Shooting Star”,
“Morning Star”
],
answer: “Hammer”,
explanation:
“A hammer is commonly associated with a potential bullish reversal after a decline.”
}
];

Each question contains the pattern name, possible answers, the correct answer and an educational explanation.

This makes it easier to add more patterns later without rewriting the entire game.

Randomising the Questions

Showing the same questions in the same order would quickly become repetitive.

JavaScript’s randomisation capabilities make it easy to select questions dynamically.

A simple approach is:

const randomIndex = Math.floor(
Math.random() * questions.length
);

const currentQuestion = questions[randomIndex];

The selected question can then be displayed to the player.

For a larger game, the logic can be expanded to prevent the same question from appearing repeatedly during a single session.

Checking the Player’s Answer

When a player selects an option, JavaScript compares the selected answer with the correct answer.

A simplified version might look like:

if (selectedAnswer === currentQuestion.answer) {
score++;
showFeedback(“Correct!”);
} else {
showFeedback(“Try again.”);
}

The important part is that the game doesn’t simply tell the player whether the answer is correct.

It also provides an explanation.

That turns the answer screen into another learning opportunity.

Turning Mistakes Into Learning

One of the most useful features of an educational game is immediate feedback.

If someone incorrectly identifies a Shooting Star as a Hammer, simply displaying “Wrong” doesn’t teach much.

Instead, the game can explain the difference.

For example:

«A Shooting Star generally has a small real body near the lower part of the candle and a long upper shadow. It can indicate potential bearish pressure after an advance.»

This approach allows the player to learn from mistakes while continuing the game.

Adding a Scoring System

A scoring system gives players a reason to stay engaged.

A basic scoring model could award:

• +10 points for a correct answer
• 0 points for an incorrect answer
• Bonus points for consecutive correct answers

For example:

let score = 0;

function checkAnswer(selectedAnswer) {
if (selectedAnswer === currentQuestion.answer) {
score += 10;
}

updateScore();

Enter fullscreen mode Exit fullscreen mode

}

The scoring system can later become more sophisticated with levels, streaks, timers and achievements.

Making the Game Mobile-Friendly

A browser game needs to work well on small screens.

This was particularly important because many users access educational content from smartphones.

The interface therefore needs:

• Large buttons
• Readable text
• Clear candlestick graphics
• Simple navigation
• Minimal scrolling
• Touch-friendly controls

A game that works technically but is difficult to use on a phone isn’t really a successful browser game.

Connecting Game Development With Financial Education

The interesting part of this project wasn’t just writing JavaScript.

It was deciding how to translate a financial concept into an interactive experience.

Candlestick patterns have names, shapes and commonly discussed interpretations. A game can turn those characteristics into recognition challenges.

Instead of asking:

“What is a Hammer candlestick?”

the game asks the player to look at a visual pattern and make a decision.

That changes the learning experience from passive reading to active participation.

Expanding the Concept

Candlestick Detective is only one possible type of financial education game.

The same development approach can be used for other topics.

For example:

Chart Pattern Detective

Players identify patterns such as:

• Head and Shoulders
• Double Top
• Double Bottom
• Triangle
• Flag
• Cup and Handle

Technical Analysis Challenge

Players could identify:

• Moving average crossovers
• RSI conditions
• Support and resistance
• Breakouts
• Trendlines
• Volume signals

Fundamental Analysis Game

Players could compare companies using:

• Revenue
• Profit
• EPS
• P/E ratio
• Debt
• Cash flow
• Dividend information

This creates an opportunity to combine web development with financial education in many different ways.

What I Learned From Building It

The biggest lesson was that educational games don’t have to be complicated.

A simple combination of:

HTML + CSS + JavaScript + good educational content

can create an interactive learning experience.

The difficult part isn’t necessarily writing hundreds of lines of code.

The bigger challenge is designing the interaction so that every click has a learning purpose.

A good educational game should make the user curious, encourage them to think, provide feedback and make it easy to try again.

Try the Candlestick Detective Game

I built Candlestick Detective as part of StockMaster’s collection of interactive stock-market learning games.

The goal is simple: look at the candlestick, identify the pattern and learn from the explanation.

https://www.stockmaster.in/universe/a-candlestick-detective/

You can also explore the broader collection of StockMaster stock-market learning games:

https://www.stockmaster.in/universe/category/stock-market-games/

Final Thoughts

Building Candlestick Detective showed me that financial education and web development can work surprisingly well together.

JavaScript provides everything needed to create interactive browser-based learning experiences, while financial concepts provide an almost unlimited supply of ideas for challenges and simulations.

The next step is to make these games more sophisticated while keeping them simple enough for beginners.

Ultimately, the goal isn’t to turn learning technical analysis into entertainment for its own sake.

The goal is to make difficult concepts easier to understand by allowing people to practice, make mistakes and learn interactively.