Category Archives: angularjs

Balance a web and mobile math game

What do you think of this post?
  • Awesome (0.0%)
  • Interesting (0.0%)
  • Useful (0.0%)
  • Boring (0.0%)
  • Sucks (0.0%)

Hi,

Balance is the next version of my ball12 game with a new interface.

Balance is a Logical game inspired by a famous variation of weighing coin mathematical problems.

In this game you have 12 balls, 11 of them have the same weight and 1 of them has a different weight, it could be heavier or lighter. You have a two plate’s scale and your goal is to find which ball has a different weight, and if it is heavier or lighter than the others. You have to find this out with just three weightings to get the best score.

Source Code

I released the source code of the game here https://github.com/fsvieira/balance. Its a simple small game so I think anyone looking for a ionic/angular example to study may find the code usefully (even if the code is not great, and all messy lol).

The Algorithm

If you have read the previews (balls12) game algorithm you will find this one much more easy, because we don’t need to keep track of the individual balls, just total for each group like: Equal, Heavier, Lighter and Unknown.
Maybe I will explain the algorithm on some post, if anyone is interested please post it on the comments.

Happy coding/gaming :)

What do you think of this post?
  • Awesome (0.0%)
  • Interesting (0.0%)
  • Useful (0.0%)
  • Boring (0.0%)
  • Sucks (0.0%)

Html5: Mobile, web, desktop!!

What do you think of this post?
  • Awesome (0.0%)
  • Interesting (0.0%)
  • Useful (0.0%)
  • Boring (0.0%)
  • Sucks (0.0%)

On the past days I been playing with different tools/frameworks to make html5 applications, actually I want to code once deploy everywhere kind of thing.

And I discover this awesome tools:

Ionic Framework

The Ionic Framework let you make applications in html5 that you can deploy on the web and mobile.

The ionic framework is made on top of other existing technologies like cordova and angular.js, hammer.js and it provides a lot additional features, its easy
to make a clean UI that will look good on mobile and web.

Obviously if you use specific mobile features they will not work on the web, but its easy to make fall-back code to deal with this limitations.

I made two applications, available on Android App Store and online, you see them here.

Node-Webkit

The node-webkit lets you make standalone application to run on desktop (linux, windows, mac OS),
its also easy to deploy application on the web (but with no access to node modules).

The node-webkit is node and webkit running in the same thread, this is great because you can use any node module seamless on your html5 application
letting you access for example local file system.

I started an application with node webkit, and it easy really easy to work with. I think my next experiment would be using ionic with node-webkit and get an application working on the web, mobile and desktop.

Grunt: The JavaScript Task Runner

I just wanted to mention the Grunt Tool because it is really handy that can be used to automate many development processes and already have some nice ready to use scripts: For example there is a node-webkit script to automate the process of packaging for multiple platforms.

Well that’s it :D, happy coding…

What do you think of this post?
  • Awesome (0.0%)
  • Interesting (0.0%)
  • Useful (0.0%)
  • Boring (0.0%)
  • Sucks (0.0%)

12 Balls WebSite with mathML and AngularJS

What do you think of this post?
  • Awesome (100.0%)
  • Interesting (0.0%)
  • Useful (0.0%)
  • Boring (0.0%)
  • Sucks (0.0%)

I started to learn AngularJS, the main motivation to learn AngularJS is to use it on my day job, where I have to build a WebGIS Application. But AngularJS seems so cool that I am thinking in use it for other projects.

Since I am still learning I decided to start with a really basic website, so I choose to updated my 12 Balls game website that is coded in php. I also took the opportunity to update some content :).

The website is static and is only using php for routing pages, so converting the site to use AngularJS templates was petty easy, I just had to make a js file with my Application and define the routes:

var balls12App = angular.module('balls12App', [
	'ngRoute'
]);

balls12App.config(['$routeProvider',
	function($routeProvider) {
	$routeProvider.
		when('/play', {
			templateUrl: 'partials/play.html'
		}).
		when('/about', {
			templateUrl: 'partials/about.html'
		}).
		when('/caanoo', {
			templateUrl: 'partials/caanoo.html'
		}).
		when('/algorithm', {
			templateUrl: 'partials/algorithm.html'
		}).
		when('/todo', {
			templateUrl: 'partials/todo.html'
		}).
		when('/downloads', {
			templateUrl: 'partials/downloads.html'
		}).
		otherwise({
			redirectTo: '/play'
		});
}]);

Now on my index.html page I added the following code:



... Import JS and Angular dependencies ...






...
   
...

The routes that we defined for ball12App will be rendered on the ng-view, Angular knows that he has to use ball12App because we defined the ng-view inside the
ng-app=”balls12App”, so I guess this would be the scope for ng-view?

So this is how it works on my website, when I go to the link balls12/, the route / is not defined in js file so it will use the otherwise rule, witch is

otherwise({
   redirectTo: '/play'
});

And the link is rewritten as http://fsvieira.com/balls12/#/play, now the /play route is defined in the js file like this:

when('/play', {
    templateUrl: 'partials/play.html'
}).

So the ng-view content is replaced by the template content ‘partials/play.html’ (in this case just a static page 😀 ).

And thats it. AngularJS can do much much more but I wanted to start with a really simple exercise.

Also I think its cool that Angular uses anchors to do this routing stuff.

Note: You can download the full website here: balls12/#/downloads.

MathML

I almost forget about this, I written about the 12 balls algorithm using MathML, you can see it here.

And right now I know one thing: I hate MathML, is hard to write and its ugly, maybe with some css gets better but it is still a pain to write.

So my advice if you are thinking in writing stuff in MathML use a latex to MathML converter, I found this online converter http://www.mathtowebonline.com/ and its pretty good!

Have fun!

What do you think of this post?
  • Awesome (100.0%)
  • Interesting (0.0%)
  • Useful (0.0%)
  • Boring (0.0%)
  • Sucks (0.0%)