A-Frame : Web XR Idle Click Game Demo & Overview
Tags: aframe, gamedev, javascript, webdev
Published: 2022-06-26 05:43:16

<span id="#articleText">

<h2>Table of Contents</h2>
<a href="#summary" target="_blank">Summary</a>
<a href="#controls" target="_blank">Controls</a>
<a href="#how-to-play" target="_blank">How to Play</a>
<a href="#components" target="_blank">Components</a>
<a href="#game-functions" target="_blank">Game Functions</a>
<a href="#favorites" target="_blank">Favorites</a>
<a href="#difficulties" target="_blank">Difficulties</a>
<a href="#future-builds" target="_blank">Future Builds</a>

<!-- Demo -->
<h3><a href="https://mintycrisp.com/xr-making-genie-gold-idle-clicker-game-part1-aframe-fullscreen-share.html" target="_blank">Open Demo &gt;</a></h3>
<h4><a href="https://github.com/Minty-Crisp/mintycrispblog/blob/main/assets/js/geniegold.js" target="_blank">Open JS File &gt;</a></h4>
<!-- Line Break -->
<hr />

<h2 id="summary">Summary</h2>
<p>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.</p>
<!-- Line Break -->
<hr />
<h2 id="controls">Controls</h2>
<div class="row">
<div class="col-6 col-12-medium">
<h4 >Orbit Cursor Movement</h4>
<ul>
	<li>Desktop - Mouse : Left Click - Orbit, Right Click - Pan, Scroll - Zoom In/Out</li>
	<li>Mobile - Screen : Swipe - Orbit, Two Finger - Pan, Pinch - Zoom In/Out</li>
</ul>
</div>
<div class="col-6 col-12-medium">
<h4 >Click &amp; Selection</h4>
<p>Only the movement options are active.</p>
<ul>
	<li>Desktop - Click</li>
	<li>Mobile - Tap</li>
</ul>
</div>
</div>


<!-- Line Break -->
<hr />

<h2 id="how-to-play">How to Play</h2>
<p>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 <strong>2 game buttons</strong> ,<strong>Menu</strong> (internal functions incomplete) and the <strong>Store</strong> which is complete. You start with a tiny fortune that wont buy all that much, but have access to <strong>100 half off / full off coupons</strong> to buy and test all the various upgrades. All Store items currently fall within 3 categories of <strong>Player Upgradesfor Click Earnings</strong>, <strong>Auto Clicker Unlockables / Upgrades</strong> as well as <strong>Event Upgrades</strong> . The game has an internal <strong>day/night cycle</strong> that lasts every <strong>24 minutes</strong> and has a <strong>Sun</strong> and <strong>Moon</strong> orbiting the scene in sync for current reference of the time. During these daily time periods (afternoon, sunrise, midnight, etc..) a total of <strong>7 unique events</strong> have a chance of popping up and are influenced by missed chances as well as store upgrades. You can see the <strong>Slot Machine</strong> 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.</p>

<!-- Line Break -->
<hr />

<div class="row">
<div class="col-12 col-12-medium">
<h2 id="components">Components</h2>
<h4>Built</h4>
<ul class="alt">
	<li><strong>timer-system : </strong>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)</li>
</ul>
<h4 >Public</h4>
<ul>
	<li><a href="https://github.com/aframevr/aframe/" target="_blank">A-Frame 1.2.0</a></li>
	<li><a href="https://github.com/n5ro/aframe-extras" target="_blank">A-Frame Extras 6.1.0 </a></li>
	<li><a href="https://github.com/supermedium/superframe/tree/master/components/orbit-controls" target="_blank">A-Frame Orbit Controls </a></li>
	<li><a href="https://github.com/supermedium/superframe/tree/master/components/animation-timeline/" target="_blank">A-Frame Timeline 2.0.0</a></li>
	<li><a href="https://github.com/tlaukkan/aframe-three-color-gradient-shader" target="_blank">A-Frame Three Color Gradient Shader</a></li>
	<li><a href="https://github.com/protyze/aframe-curve-component" target="_blank">A-Frame Curve</a></li>
	<li><a href="https://github.com/protyze/aframe-alongpath-component" target="_blank">A-Frame Along Path | Requires A-Frame 1.2.0</a></li>
</ul>
</div>
</div>

<div class="row">
<div class="col-12 col-12-medium">
<h4 id="game-functions">Game Functions Built</h4>
<ul class="alt">
	<li><strong>Event High Noon w/ Animations : </strong>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)</li>
	<li><strong>Event Gold Coin Storm w/ Animations: </strong>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)</li>
	<li><strong>Event Genie Challenge w/ Animations : </strong>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)</li>
	<li><strong>Event Bonus Round w/ Animations : </strong>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)</li>
	<li><strong>Event Blue Moon w/ Animations : </strong>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)</li>
	<li><strong>Event Hades Prowl w/ Animations : </strong>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)</li>
	<li><strong>Event Cosmic Aurora w/ Animations : </strong>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)</li>
	<li><strong>Event Checker w/ Animations : </strong>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)</li>
	<li><strong>PrettyNums : </strong>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)</li>
	<li><strong>Store Screen Control &amp; Updates : </strong>Handling of CSS changes, but also updating the 1 shared badge sub screen in the store. Find in JS(#findScreenControls)</li>
	<li><strong>Player Click : </strong>Checks for critical hits on every tap as well as handles event player click stats and some event bonuses. Find in JS(#findPlayerClick)</li>
	<li><strong>Auto Clicker 1/2/3 Synced : </strong>Checks for critical hits on every tap as well as handles event player click stats and some event bonuses. Find in JS(#findAutoClickers)</li>
	<li><strong>A few A-Frame and HTML updates : </strong>Included as much feedback as reasonable with inside A-Frame and HTML entities. Find in JS(#findHTMLUpdaters)</li>

</ul>
</div>
</div>

<!-- Line Break -->
<hr />

<div class="row">
<h2 id="favorites">Favorites</h2>
<p>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.</p>
</div>

<!-- Line Break -->
<hr />

<div class="row">
<h2 id="difficulties">Difficulties</h2>
<p>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.</p>
</div>
<!-- Line Break -->
<hr />

<h3 id="future-builds">What I want to build upon this, in the future...</h3>
<blockquote>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.</blockquote>
<!-- Line Break -->
<hr />

<div class="row">
<h2>Thank you for your time!</h2>
<li>More <a href="https://dev.to/mintycrisp">Dev</a> Articles</li>
<li>My homepage <a href="https://mintycrisp.com" target="_blank" >mintycrisp.com</a></li>
<li>View my <a href="https://github.com/Minty-Crisp" target="_blank" >Github</a> Repositories</li>
<li>Peruse my <a href="https://twitter.com/minty_crisp" target="_blank" >Tweets</a></li>
<li><a href="https://ko-fi.com/mintycrisp" target="_blank" >Ko-fi</a> tips if you enjoy my work</li>
<h2> - Minty Crisp ^-^</h2>
<a href="https://mintycrisp.com/xr-making-genie-gold-idle-clicker-game-part1-aframe.html"><img src="http://mintycrisp.com/assets/img/logo-tiny.png"></a>
</div>

<!-- End Article Text -->
</span>