A-Frame : Web XR Idle Click Game Demo & Overview

Table of Contents

Summary
Controls
How to Play
Components
Game Functions
Favorites
Difficulties
Future Builds

Open Demo >

Open JS File >

Summary

A playable demo for an idle click game built with A-Frame. In the story, you meet a genie who grants you a few wishes where you end up with a magic coin that creates money on touch. Every tap / click earns your base gold amount and you can encounter 7 different events which can pop up to help you earn huge as well as a store to spend it in for upgrades.

Controls

Orbit Cursor Movement

• Desktop - Mouse : Left Click - Orbit, Right Click - Pan, Scroll - Zoom In/Out
• Mobile - Screen : Swipe - Orbit, Two Finger - Pan, Pinch - Zoom In/Out

Click & Selection

Only the movement options are active.

• Desktop - Click
• Mobile - Tap

How to Play

Use the orbit Cursor to move around the 3D genie coin for a better view of the environment scenery and effects. You have access to a 2 game buttons ,Menu (internal functions incomplete) and the Store which is complete. You start with a tiny fortune that wont buy all that much, but have access to 100 half off / full off coupons to buy and test all the various upgrades. All Store items currently fall within 3 categories of Player Upgradesfor Click Earnings, Auto Clicker Unlockables / Upgrades as well as Event Upgrades . The game has an internal day/night cycle that lasts every 24 minutes and has a Sun and Moon orbiting the scene in sync for current reference of the time. During these daily time periods (afternoon, sunrise, midnight, etc..) a total of 7 unique events have a chance of popping up and are influenced by missed chances as well as store upgrades. You can see the Slot Machine play during each of these chances. When it lands on 3 matches, an event will start. These events are the real game as they have various challenges and grant huge bonuses.

Components

Built

• timer-system : Throttled functions for every second, every 250ms and every 1 minute that handle html updates, auto clickers, day / night cycle and event checking. Find in JS(#findAframeComponent)

Public

• A-Frame 1.2.0
• A-Frame Extras 6.1.0
• A-Frame Orbit Controls
• A-Frame Timeline 2.0.0
• A-Frame Three Color Gradient Shader
• A-Frame Curve
• A-Frame Along Path | Requires A-Frame 1.2.0

Game Functions Built

• Event High Noon w/ Animations : During the afternoon, the sun radiates gold and grants the player / auto clickers a critical hit and chance increase bonus. Handles all event controls. Find in JS(#findEventHighNoon)
• Event Gold Coin Storm w/ Animations: Timing for event fluctuates every day, but the clouds erupt in gold coins and grants the player / auto clickers a straight bonus increase. Handles all event controls. Find in JS(#findEventGoldCoinStorm)
• Event Genie Challenge w/ Animations : Timing for event fluctuates every day, the genie will challenge you to a varied amount click challenge and deduct a bet based on the difficulty of the challenge. If you win, you win big otherwise you lose your bet. Handles all event controls. Find in JS(#findEventGenieChallenge)
• Event Bonus Round w/ Animations : During the sunrise, the genie being impressed with your recent work rewards you a slew of prize money options. And if you don't make a selection in time, 1 will be chosen for you. Find in JS(#findEventEventBonusRound)
• Event Blue Moon w/ Animations : During the midnight, the moon beams bright blue and offers a series of temp event bonuses and 1/2 off store coupons earnable at set, but unknown click amount goals. Handles all event controls. Find in JS(#findEventBlueMoon)
• Event Hades Prowl w/ Animations : Timing for event fluctuates every day, but a great beast named Hades attacks the player's gold pile syphoning off their treasure. If the player out earns the amount being stolen by the end of the event, they earn a 1 Free Item store coupon otherwise Hades will take 1 final swipe before fleeing. Handles all event controls. Find in JS(#findEventHadesProwl)
• Event Cosmic Aurora w/ Animations : During the sunset, the starry sky opens up and gives a cosmic light show granting the player / auto clickers critical hit / chance and straight bonus increase for huge jackpots. Handles all event controls. Find in JS(#findEventCosmicAurora)
• Event Checker w/ Animations : The main controller function for events and checking at the predetermined as well as generated times for each event every day. Event chance is varied every day from missed increases, pop resets to store upgrades. Find in JS(#findEventChecker)
• PrettyNums : Handles prettying js numbers for display in html by adding symbols, commas every 3rd post period digit and managing decimal points for quartered increments. Find in JS(#findPrettyNums)
• Store Screen Control & Updates : Handling of CSS changes, but also updating the 1 shared badge sub screen in the store. Find in JS(#findScreenControls)
• Player Click : Checks for critical hits on every tap as well as handles event player click stats and some event bonuses. Find in JS(#findPlayerClick)
• Auto Clicker 1/2/3 Synced : Checks for critical hits on every tap as well as handles event player click stats and some event bonuses. Find in JS(#findAutoClickers)
• A few A-Frame and HTML updates : Included as much feedback as reasonable with inside A-Frame and HTML entities. Find in JS(#findHTMLUpdaters)

Favorites

The overall scene itself and a few event animations. While an idle click game does not lend itself to vr in it's current form, the immersiveness of the scene would be extra effective on a headset. It would require a more interesting interact mechainc, something like strumming a string or banging a drum. Also, the slot machine and animations, gold fish and curve following, event animation sequences and that shiny gold coin with earning notifications all look good.

Difficulties

CSS and Project Scale. Took a bit at first to nail down the CSS animation workflow and how Javascript can control it, but after that hump it became clear how powerful it is especially in the normal 2D web. For the project scale. No matter how small of an idea I kept trying to design for, there was just too much I wanted to do. Took a bit whittling down that list a few times, but in the end I have the project goals all more managable to create my vision in a completable timeframe.

What I want to build upon this, in the future...

I still have a bit more polish and essential functions to implement before it's ready for general release. With all the basic gameplay completed, I can also start user testing and getting some feedback as well for additional tweaks while attacking my next roadblock of JSON file use.

Thank you for your time!

- Minty Crisp ^-^