Relearning web development by writing a clicking game using React, Npm and Browserify
I had some free time this vacation, and came across this interesting little sandbox game called Pokemon or BigData by pixelastic.
The main code is located in app/index.jsx, which has some syntatic sugar react code that can be converted into plain javascript code automatically using
browserify -t [ babelify --presets [ react ] ] app/index.jsx -o app/public/bundle.js
Then I'd have to manually move the html and javascript over to the gh-pages branch. Instead I did as pixelastic did with his deploy script, and used a deploy script to nicely automate this process.
The aesthetics of the code are clean and simple. It uses React, which seems to be used for real-time web UIs. It also uses npm as a package manager. My previous forays into async calls in web dev were not nearly as pretty, so this seems like a good opportunity to learn something new.
I decided a fun first start would be a simple game, and the simplest game I could think of was clicking a button to make a count go up. To give it some real-time feedback, I added some upgrade buttons that automatically click for you, a common incremental game technique.
The buttons don't show up until there are enough clicks, and are grayed out if there's not enough to further upgrade. I set it to run at 50Hz to feel responsive.
The heart of the code is basically a state machine that contains the current number of clicks and the number of upgrades bought.
The main code is located in app/index.jsx, which has some syntatic sugar react code that can be converted into plain javascript code automatically using
Then I'd have to manually move the html and javascript over to the gh-pages branch. Instead I did as pixelastic did with his deploy script, and used a deploy script to nicely automate this process.
