Who am I?

My Portfolio

Just another ordinary day in Netanya

Conduit Mobile - Best solution for mobile apps

Graphic & Technology blog

Compare Ninja

The Game

Canvas Element

Syntax

HTML Element

 <canvas id="myCanvas"></canvas>
 

JS Call

 var canvas = document.getElementById("myCanvas");
 var context = canvas.getContext("2d");
 

Basic Example

 window.onload = function() {
	var canvas = document.getElementById("myCanvas");
	var context = canvas.getContext("2d");

	context.beginPath();
	context.moveTo(100, 150);
	context.lineTo(450, 50);
	context.lineWidth = 10;
	context.strokeStyle = "#ff0000";
	context.stroke();
  };
 

Kinetic.js

Stage > Layers > Shapes

Stage

 <canvas id="board" width=350 height=350></canvas>

 var canvas = document.getElementById("myCanvas");
 var context = canvas.getContext("2d");
 

=

 <div id="board"></div>	
 

 var stage = new Kinetic.Stage({
	container: "board",
	width: 350,
	height: 350
 });
 // stage.content = div
 

Layer

 // Create a new layer
 var layer = new Kinetic.Layer();
 
 // Connect the stage to the layer
 stage.add(layer);
 

Shape

Rectangles, Circles, Lines, Images and so on...

 // Create a new shape
 var rect = new Kinetic.Rect({
    x: 10,
    y: 10,
    width: 200,
    height: 100,
    name: "square",
    fill: "red",
    stroke: "black",
    strokeWidth: 3
 });
 
 // Add the shape to the layer
 layer.add(rect);
 

Group

 // Create a new group
 var group = new Kinetic.Group();
 
 // Add the shape to the group
 group.add(rect);
 
 // Add the group to the layer
 layer.add(group);
 

Game init()

Defining Stage

 // Reset
 if(stage != null) {
	stage.clear();
 }

 // Create a new stage
 stage = new Kinetic.Stage({
	container: "board",
	width: 350,
	height: 350
 });

 var layer = new Kinetic.Layer();
 var group = new Kinetic.Group();     

 var squaresDimensions = 5;   

 // Get a single square's width and height    
 singleCubeWidth = stage.getWidth() / squaresDimensions;
 singleCubeHeight = stage.getHeight() / squaresDimensions;
	
 

Creating the Board

	
 var gameMapping = [];
 for (i = 0; i < squaresDimensions; i++) {
    gameMapping[i] = [];
    for (x = 0; x < squaresDimensions; x++) {
        gameMapping[i][x] = false;
        var box = new Kinetic.Rect({
            x : left,
            y : top,
            width : singleCubeWidth,
            height : singleCubeHeight,
            name : 'square' + [i],
            fill : '#cccccc',
            stroke : "#999999",
            strokeWidth : 3,
            shadow : {
                color : '#fff',
                blur : 0,
                offset : [-3, -3],
                alpha : 0.8
            }
        });

        group.add(box);
    }
 }

 layer.add(group);
 stage.add(layer);
 

Stage Creator

Placing Characters

Level Data

 {
   id: 1,
   characters: [
      {
         name: 'Stannis',
         position: [1,1]
      },
      {
         name: 'Robb',
         position: [3,2]
      },
      {
         // Main Character
         name: 'Daenerys',
         position: [1,4]
      }
   ]
 }

Creating a level

						
 playersLayer = new Kinetic.Layer();
 var playersGroup = new Kinetic.Group();
 var levelData = levels[level];	

 for(i = 0; i < levelData.characters.length; i++) {		
    
    // Get character's data
    var cahracter = levelData.characters[i];

    // Create a new player
    var player = new Kinetic.Image({
        x: x,
        y: y,
        stroke: '#971919',
        strokeWidth: 4,
        width: 46,
        height: 46,
        image: imageResources[cahracter.name],
        name: cahracter.name,
        position: [cahracter.position[0], cahracter.position[1]]
    });		

    // Add player to players group
    playersGroup.add(player);

    // Map the player to the mapping array
    gameMapping[cahracter.position[0]][cahracter.position[1]] = true;
 }

Game Events

Events

Hover Event

 // Add cursor styling
 playersGroup.on("mouseover", function(e) {
   document.body.style.cursor = "pointer";
 });
 
 playersGroup.on("mouseout", function(e) {
   document.body.style.cursor = "default";
 });
 

Click Event

 playersGroup.on('click tap', function(evt) {				
    // Clear previus options
    clearOptions();

    // Get the clicked shape
    var shape = evt.shape;

    // Highlight the relevant shape
    shape.setShadow({...});
    playersLayer.draw();
	
    // Create the options layer
    getOptions(level, shape);  
	
 });
 

Canvas web events

mouseover - mouseout - mouseenter - mouseleave - mousemove - mousedown - mouseup - click - dblclick - dragstart - dragend

Canvas mobile events

touchstart - touchmove - touchend - tap - dbltap - dragstart - dragmove - dragend

Animations

Animation example

Animate Player

 selectedPlayer.transitionTo({
    x: shape.getX(),
    y: shape.getY(),				
    duration: 0.5,
    easing: 'linear',
    callback: function() {
        checkWinning(selectedOne);
    }
 });
 

Properties to animate

Animation types

Sound effects

HTML5 Audio

 <audio id="move" preload="auto">
    <source src="audio/move.mp3" />  
 </audio>
 

 <audio id="move" preload="auto">
    <!-- Chrome -->
    <source src="audio/move.mp3" />
	
    <!-- Firefox -->
    <source src="audio/move.ogg" />
	
    <!-- Not supported -->
    Your browser sucks.
 </audio>
 

Audio Control

 // Get the sound's element
 var sound = document.getElementById('move');
 
 // Play the sound
 sound.play();
 

Resources

Demos

Frameworks

• Kinetic.js
• Impact.js
• EASELJS
• paper.js
• Fabric.js
• Processing.js

Articles

• How To Design A Mobile Game With HTML5
• Create a Game Character with HTML5 and JavaScript
• Tutorial: Simple game with HTML5 Canvas
• Make a snake game using HTML5 canvas and Jquery
• NO TEARS GUIDE TO HTML5 GAMES