Guess Who? HTML5 Game

I have released another HTML5 game on CodeCanyon.
big_banner
A classic game for a modern browser

Features:
HTML5 and CSS3 technologies
Supports all modern browsers and tablets
Multi-language architecture
Highly customizable to change avatars/pictures/names/questions
Fully functional with AI
No-globals means wordpress compatible
Files include version of the game in Greek. Names and questions can be changed to every language.

Game is already responsive but can be further extended via media-queries.


Continue reading

Facebooktwittergoogle_pluspinterestlinkedin
linkedin

Using SoundJS for games

So I was building a new game and wanted to include some sounds and an ambient sound as background music. So I bought a sound from Envato Audio Jungle, and also I asked my cousin to make me an ambient/sci-fi/space sound… He came up with a rather nice composition for a space game.
So I wanted to incorporate all these into my game, so I used one of the best libraries for javascript sound out there, SoundJS

What I did however is to create a custom javascript function/class to handle all of the game sounds and have them ready for playback when I need to fire a bullet or stop the background-sound.

EXAMPLE Here

This is how I did it:
Continue reading

Facebooktwittergoogle_pluspinterestlinkedin
linkedin

Canvas grid pattern constructor v1.1 released

Hello, I just released a grid pattern constructor on Envato Codecanyon. This Grid-pattern is ideal for wireframe templates, blueprint designs or as a simple background.

The grid contains a build-in mechanism for responsive re-draw, and can be easily customized to include other grid-patterns, right now it can produce: blocks, diamonds, hexagons, circles and diagonal lines

The script is pure javascript and has no dependencies of other javascript libraries. However it can be easily extended to become a JQuery or other library plugin.

Multi-Grid

You can find it here: Canvas Multi-Grid

Examples Preview


Enjoy!

Facebooktwittergoogle_pluspinterestlinkedin
linkedin

Particles with KineticJS and collision detection

Hello once again, this time I will show a nice technique to create exploding particles with KineticJS.

First of all we setup the stage and the canvas objects.

DEMO:

http://cdpn.io/IwAoc

See the Pen kineticjs collision detection by Michael Dobekidis (@netgfx) on CodePen.

Continue reading

Facebooktwittergoogle_pluspinterestlinkedin
linkedin

Zoom to point and scale (kineticjs+mousewheel)

This is a simple tip of how to create a zoom to point effect with kineticjs and mousewheel event.

So lets say that you want to zoom into a specific point on a canvas, of course you have used the excellent kineticjs framework, well then you are in luck.

To begin with this is the end-result for all the “quick-fix” people out there.

See the Pen Kineticjs zoom to point by Michael Dobekidis (@netgfx) on CodePen

The rest… come along…

Continue reading

Facebooktwittergoogle_pluspinterestlinkedin
linkedin

Create simple graph with css flexbox

When I first read about flexbox I was quite sceptical because I thought that this would be poorly executed and the developers would have to hack around several things.
But I was delighted to be wrong… flexbox seems quite promising and it actually makes creating a simple timeline graph a 5 minute procedure.

For those unfamiliar with the CSS Flexbox spec here are some cool resources:

https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes

Now onward to our little project.

What we are trying to achieve here is to create a “timeline” based block-graph.

This is the end result:

See the Pen Flexbox graph by Michael Dobekidis (@netgfx) on CodePen

Continue reading

Facebooktwittergoogle_pluspinterestlinkedin
linkedin

All Available CSS Color Names

For a fun project I wrote a little javascript class/function that returns all the availabe CSS color-names like (“red”,”royalBlue”,etc) in many different ways (assosiative-array, indexed-array, object,etc) as well as the selected color shades.

You can find it on gitHub here -> ColorNames Fn

And some examples here -> Examples

[[code]]czowOlwiXCI7e1smKiZdfQ==[[/code]]<a href="http://codepen.io/netgfx/pen/hvsfB">Check out this Pen!</a>

The use is quite easy and it has no library dependencies

Engage the function:


var colorNames = new ColorNames({
"numOfShades":10 // optional
});

And then ask for the type of return object that you wish:


var _colorNames = colorNames.returnItems('all_names'); // returns only the names of the colors
var _colorValues = colorNames.returnItems('all_indexed_obj'); // returns an array of objects that contain both names and colors

Enjoy!

Facebooktwittergoogle_pluspinterestlinkedin
linkedin

Create grid patterns with canvas (blocks, diamonds, hex)

While making some experiments with a game, I felt the need to add a grid to the background, after much thinking I decided that canvas should be the “best” solutions for this.

However after creating a simple “square” grid I wanted also hexagons and diamond grids. And this is what I’m presenting here, how to create “blocks, diamonds and hexagon” grids with one convenient javascript class.

See the Pen Create grids by Michael Dobekidis (@netgfx) on CodePen.

Continue reading

Facebooktwittergoogle_pluspinterestlinkedin
linkedin

Quick Tip: Parse single object from unknown key-values JSON.

Sometimes we need to read data from JSON but we are not sure which value corresponds to a key or we need to parse a really large object. So here’s a tip about how to read key names and their corresponding values from a JSON object.

Let’s assume the following JSON structure:


var gameOps = {"tanks":[
{
  "type":"T1",
  "velocity":"800",
  "speed":"100",
  "bulletType":"t1Ammo",
  "damagePerHit":"0.25",
  "tankWidth":"74",
  "tankHeight":"128",
  "bulletWidth":"7",
  "bulletHeight":"15"
},
{
  "type":"T2",
  "velocity":"800",
  "speed":"100",
  "bulletType":"t1Ammo",
  "damagePerHit":"0.25"
},
{
  "type":"",
  "velocity":"",
  "speed":"",
  "bulletType":"",
  "damagePerHit":""
}

]};

In this object we notice how the first object has values that the others do not, if we tried to parse it based on the first object the code would halt on error because it would be unable to find the rest of the keys.

So what if we only wanted one of the objects but we did not know what properties it has?

Let’s consider the following snippet:


var myObj = getOptions(gameOps);

function getOptions(type, opts){
    var counter = 0;
    var obj = {};
      
    for(var i = 0; i<opts.tanks.length; i++){
      var temp = opts.tanks[counter];
      var keys = Object.keys( temp );
      
      if( temp.type == type){
        
        for(var j=0; j<keys.length; j++){
          
          obj[ keys[ j ] ] = temp[ keys[ j ] ];
        
                        }
               }
      
      counter += 1;
    }
    
    return obj;
  }

Here we check if the desired “type” is among the object properties, if it is we read the available “keys” that the object has, and then we construct another object with those keys and values.

Browser compatibility:
This solution is compatible with
Firefox (Gecko) – 4 (2.0)
Chrome – 5
Internet Explorer – 9
Opera – 12
Safari – 5

Because it uses: Object.keys(obj)

Read more here: https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/Object/keys

Facebooktwittergoogle_pluspinterestlinkedin
linkedin

My game template on Codecanyon!

Finally I have had some free time and thought to try my luck with Codecanyon, which is a place were authors and coders get to monetize their works and for people to get some high-quality code/themes/templates/apps build-in and ready to go.

So I managed to “transform” my game of Easter-egg-hunting into a framework for gathering games (games where items drop and the player has to collect them) I added some code, removed much, and generalized the core to actually adapt and be manageable through a JS file that the user can alter to create his own game.

The template offers:

  • mobile and modern browser support
  • media-queries baked inside
  • responsive gameplay
  • auto pause when the player changes tab or browser loses focus
  • highly customizable options like: background, items, gathering image, score, etc…
  • High performace even on mobile devices, by using multiple canvases
  • And per frame collision detection
So check it out, and buy if you also want to create your own gathering game…

http://codecanyon.net/item/gathering-items-game-template-jquery-tweenmax/4525985

Note: The template uses jQuery, jQueryUI for dragging, and GSAP to manage animation and update functions per frame.

Facebooktwittergoogle_pluspinterestlinkedin
linkedin