DEV Community: BILLY

From Feature Graveyard to Viable Product: Beano v2.0 Redemption Arc

BILLY — Fri, 11 Apr 2025 22:41:03 +0000

Switching Strategies When Passion Projects Run into Technical Walls

The Vision vs The Validated Prototype

Every developer has that experience of excitement when scribbling feature lists on napkins, such that my Beano v2.0 blueprint included:

4 Player & 6 Player tournament modes
Real-time theme morphing
Dynamic difficulty scaling
Multi-round challenge modes

Then the coding began...

The Pivot Points That Saved the Project

Tournament Mode Intervention

A prospect of tournament logic (Multiple AI instances + human players) turned out to be an unmaintainable callback hell. Key failures:

Couldn't coordinate parallel match rounds
Beano's minmax algorithm refused to participate in tournaments
Could not cleanly save the tournament state between sessions for future reference

Salvage Operation:

Instead of full tournaments, I focused on keeping Player v Beano and PvP modes untouched - depth over breadth.

Victory Visualization Victory

The first version of winning-line implementation used absolute positioning - a nightmare across grid sizes. The solution called for:

Relative positioning containers
CSS transform origin adjustments
Viewport units for responsiveness

Theme Engine Tradeoffs

The performance destruction of live theme-switching taught me about:

The limits of CSS variables in animations
Limits of hardware acceleration
Costs of repainting in regular gameplay

The solution? Session-persisted themes with instant reloads - not as flashy but rock-solid.

Visions vs. Reality

When I began remaking Beano’s Tic Tac Toe, I thought of features like real-time color changer and 4 and 6 Player tournaments modes. But limited by my coding skills, I focused on reimagining the game’s core instead. The result? Four modes that add fresh twists while keeping the fun intact.

Classic Mode: The Reliable Favorite

After some failed experiments, the Classic version became my starting point again. A simple mode that retains the default game mode

Reverse Rules: Backward Thinking

Main Idea: Make opponents create a line of three first to win.
Breakthrough: I realized how players kept winning by accident during tests!

Challenges:

Teaching the AI to avoid winning patterns.
Rewriting code to flip the usual logic.
Explaining the rule without confusing people.

Result: Winning feels like losing, and losing feels like smart planning.

Blind Fight: Memory Challenge

Main Idea: Moves disappear after you place them, testing your memory.

Behind the Scenes:

Balancing hidden moves with hints to keep it fair.
Stopping players from cheating by peeking at the game’s code.
Designing visual clues that suggest patterns without giving answers.

Surprise: Casual gamers enjoyed it more than serious strategy fans!

No Middle: Creative Problem-Solving

Main Idea: Block the center spot to ruin classic strategies.

Reality Check:

Small 3x3 grids turned into tricky puzzles.
Players invented new tactics using corners and edges.
Mobile users found tiny touch targets frustrating.

Lesson: Limits can spark creativity!

Why These Modes Succeeded

Small Changes: Each mode tweaked just one rule, not the whole system.
Shared Code: All versions reused the same core AI and design.
Player Feedback: Testers helped improve the game at every step.

By mixing old and new, the game stayed familiar but fresha balance that worked!

External Links

Play Beano v2.0: Click here
Source code: Github
Github profile: beanboi64
Instagram profile: krissattack0

Game Shots

Building BlackJack Uno: A Fun Way to Learn JavaScript

BILLY — Mon, 03 Mar 2025 22:55:49 +0000

Introduction:

Hello, developers! Today, I want to share my experience building BlackJack Uno, a simple and fun card game. This project helped me learn more about JavaScript, HTML, and CSS. I will explain how I made the game and what I learned.

Why BlackJack Uno?

I wanted to create a game that is easy to understand but also fun to play. BlackJack Uno is like the classic Blackjack game, but simpler. The goal is to get close to 21 without going over. You start with some Valley Coins (VC) and earn more by winning games.

How I Built It:

Game Logic: I started by planning the game logic. I needed to know when to deal cards, when to check for wins or losses, and how to keep score.
HTML Structure: I created the structure of the game using HTML. This included buttons for "Hit," "Stand," and "New Game," as well as areas to display the cards and scores.
CSS Styling: I used CSS to make the game look nice. I added styles for the buttons, cards, and other elements to make them easy to see and use.
JavaScript Functionality: JavaScript was the key to making the game work. I wrote functions to handle card dealing, scoring, and updating the display. I also added sound effects to make the game more engaging.

Challenges Faced:

Credits Replenishment: Making the credits replenish automatically when the player was out was tricky. I had to ensure it worked smoothly without affecting gameplay.
Insufficient Credits: I needed to prevent players from starting a new game if they didn't have enough credits. This required checking the credits before allowing a new game to start.
Layout Design: Finding the right layout for the game was challenging. I had to make sure everything fit well on the screen and was easy to use.
Color Coordination: Choosing the best colors for the game was important to make it visually appealing. I experimented with different color schemes to find the right look.
Winning Calculation: Ensuring that players received their winnings correctly, especially when they used their last 150 VC and got a Blackjack, was crucial.

What I Learned:

Building BlackJack Uno helped me improve my JavaScript skills, especially in managing game states and handling user interactions. I also learned more about CSS and how to make a responsive design.

Conclusion:

Creating BlackJack Uno was a great learning experience. It was fun to see my code come to life in a playable game. If you're learning JavaScript, I recommend trying to build a simple game like this. It's a great way to practice your skills!

External Links:
Play BlackJack Uno: Click here
Source code: Github
Github profile: beanboi64
Instagram profile: krissattack0

Images of BlackJack Uno

Meet BeanoGuard – Your New Best Friend for Secure Passwords

BILLY — Thu, 27 Feb 2025 11:03:49 +0000

Introduction
Today, one significant requirement for protecting information in a digital world is to follow strong passwords in protecting one's online accounts. However, the process of creating secure, unique passwords can be tedious. BeanoGuard simplifies this, combining style and user-friendly interface, thus catering to both the developer and the person eager to increase their cybersecurity.

Key Features

Create strong, random passwords of any desired length.
Remember standard passwords for faster recalling.
In dark mode, adjust to any size screen with an attractive layout.
Future plans encompass more advanced settings like username descriptions, stamps, and other cool ideas of the same!

How it works

Open the app and choose the length you want for your password.
Click on the "Generate Password" button to secure your password.
Copy the newly-generated password to your clipboard or save it right inside your app.

Enrich the BeanoGuard project
The current status of BeanoGuard is just the tip of the iceberg compared to its potential. Amazing features are left to be discovered, some of them are:

Ability to choose a character type for passwords (numbers, alphabets or both).
The addition of a search feature in the application.
To change or create new dummy entries for passwords.

Contribute to BeanoGuard
If you want to help in the project’s further development, please visit the project’s GitHub. Feel free to make changes, Hope to see your Pull Request!

Conclusion
Try using BeanoGuard today and help us improve the software by becoming a contributor. The internet is ours to keep. Let us come and make it a better place for everyone.

External Links:
Try BeanoGuard: Click here
Source code: Github
Github profile: beanboi64
Instagram profile: krissattack0

Images Of BeanoGuard

Building Beano's Tic Tac Toe: A Modern Take on a Classic Game

BILLY — Wed, 26 Feb 2025 15:29:17 +0000

Description

The game of Tic Tac Toe has survived the test of time, enjoying the affection of every generation of players alike. But what would it be if we changed this classic slightly? Introducing Beano's Tic Tac Toe- a feature-rich instant delight for casual gamers and the perfect challenge for the competitive players among us.

Beano's Tic Tac Toe redefines the traditional game for the present-day tech-savvy generation-from life-like AI opponents to echoing sound effects with a beautiful interface and responsive design. Modern UI with HTML, CSS, and JavaScript highlights the use cases of modern web technologies for fun and interactive user experience.

Enhancing Mobile Experience
One of the standout features of Beano's Tic Tac Toe is its amazing mobile support, run through the mobile.js script. Key functionalities are:

Adaptive Layout Modifications: The game board automatically adapts and shifts, based on the orientation and size of the device, making it most comfortable in both, portrait and landscape modes.
Touch-Optimized Controls: During touch events, the system incorporates buttons with tactile response and disables double-tap zooming for better usage on touch screens.
No Accidental Scroll: The scrolling gets blocked while the interaction is going on with the game board so that there is no interruption while playing the game.
Pop-Up Centered: The popups like the tutorial and settings menu get repositioned and redesigned to remain centered and visible on smaller screens.

The other behind the scenes:
The mobile.js script involves behaviors and optimizations specific to mobile in order for the game to run smoothly on all devices. Event listeners, dynamic application of class names, and touch events render the script simple yet functional.

What features does the script offer?

Orientation Handling: Automatically resizes and rearranges the board when the device is rotated.
Touch Event Handling: Creates an intuitive feel with great feedback to ensure a good mobile experience.
Popup Positioning: Ensures that popups stay in the center and are easily accessible on small screens.

Developer Insights
Some lessons useful for developers derived from this project could include:

Realizing the significance of dynamic layout changes while providing responsive design.
Accounts for touch events while further enhancing usability for mobile devices.
Modal positions should be tweaked for better accessibility.

Keep following for further insights into the development process and how to code your own version of Beano's Tic Tac Toe!

Game Play Shots

Link to game: Play Now!