/clickgame

Demo Code and Resources for Build 2014 Talk

Primary LanguageJavaScriptMIT LicenseMIT

ClickGame

//BUILD Demo App

Play it here!

This repo has all the code and links to the material I used in my talk at //BUILD 2014. See links to additional information and resources below.

Features:

  1. click-to-earn - clicking the big round button allows a player to earn virtual game money
  2. click-to-buy - clicking on a button allows a player to buy an item, if they have enough money
  3. item-price-increase - when any item is purchased the price increases
  4. Save players inventory, virtual money, and clicks-per-second
  5. Ability to Reset Game
  6. Ability to cheat by getting free money
  7. Credits for for the great images from The Noun Project

Tools and Libraries used:

  1. Yeoman - scaffolding for webapp
  2. Bootstrap - responsive layout
  3. Knockout - data binding
  4. jQuery - because jquery
  5. Accounting.js - formatting money values
  6. Also using the Microsoft Software Development Kit (SDK) for Windows 8.1 - needed makeapp.exe for creating the appx file for the Windows Store App package.

Building Chrome Packaged App and Windows Store App

In addition to supporting Internet Explorer 10+, Firefox, and Chrome, this project also has support for creating a Chrome Packaged App, and a Windows Store app.

To install the project as an appx file on Windows:

  1. run .\Build-AppX.ps1 from the AppX folder.
  2. this will package and install the appx file to your start menu

To create the folder for the Chrome Packaged App:

  1. run .\Build-ChromeApp.ps1 from the ChromeApp folder of the project.
  2. Open Chrome and install the package from the .\ChromeApp\dist folder

There are readme.md files in those folders with more information.

Oddities

Since I did not have time to deal with this issue I am using the knockout-latest.debug.js rather than the properly built minified version. A compromise that is ok for a demo, but not something you would want in production.

##Other Helpful Resources## My talk focused on building cross-platform HTML apps using community tools. If you want to learn more about building specifically for Windows, including taking advantage of platform specific capabilities I recommend this series that will walk you step by step through building a first class Windows app using HTML.

If you want to learn how to integrate your web resources with core platform capabilities, particularly using the webview control, this is a great talk.

If you want to check out WinJS as an open source library you can find the repo here on github. http://github.com/winjs. Also see the road ahead //BUILD talk which announced our move to open source.

It you want to learn more about the subtle but important differences between using HTML in the Browser vs. using HTML in apps, you can read this article.

If you wan to learn more about the execUnsafeLocalFunction you may want to watch my previous talk on the HTML security model in apps.

Helping out

Pull requests are most welcome...there is a lot I have not yet learned about Yeoman and grunt, and I am sure there are better ways of configuring the project and scripting the builds. If there is a better way, help me fix it.