Category Archives: games

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%)

Space-Combat: Old School Space shooter for the web.

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



I was bored so I made a 48h game old school space shooter, also I wanted to draw and paint with my markers :D.

So the code is here, the game can be played here and the media is on opengameart levels and opengameart actors or in git repo.

The game is expandable so can be improved with new levels and graphics, maybe I will paint some more…

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

Testing Browser Gamepad API

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

I did not bother to see the Browser Gamepad API specs I just grab the first code on the Internet that works for me and modified it to my needs.
I would like to put here the original code url but I lost it :(. The code was made by Marcin Wichary from google and is license under Apache license.

So I am doing a simple application that is on development phase (BETA) and can be found in my new website Fsvieira Desktop that I am working on. To access the app just click on the gamepad icon. I have to develop some solution so I can pass a direct url to my applications 😀 instead of saying please click on the icon X.

The only browser that I was able to put the application working was with latest Chrome, I tested with Firefox and Chromium and it doesn’t work. Gamepad API is still in discussion so I guess its not very well supported.

If anyone tests this please tell me how it goes. Just comment on this post or if you like send me a email.

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