Talking about Spellfall game, Game development, HTML5 and Javascript.
If you liked the Spellfall prototype I showed you earlier this week made with Phaser, i am going to show you the same prototype made with another HTML5 framework which works in a very similar manner: Kiwi.js.
Among its features you will find:
2D CANVAS AND WEBGL RENDERING: Your games can target both canvas and WebGL. Use canvas for older browsers and most mobile browsers. Use WebGL for the latest browsers, and in conjunction with Cocoon.js to build fast native mobile apps.
TARGET COCOON.JS: Make games for app stores by configuring your game to compile within the Cocoon.js system.
FLEXIBLE GAME OBJECTS: Support for spritesheets, texture atlases and individual images give you plenty of options for creating and managing animations and static images.
FULL DISPLAY LIST: Place your game objects within groups and subgroups to manage their transformation and z – ordering.
ENTITY / COMPONENT SYSTEM: Build your own game objects by extending the core game objects and attaching components such as physics to give them additional functionality.
MULTITOUCH SUPPORT: Make the most of touch device capability and make games for multitouch and well as single touch.
STATE MANAGEMENT: Easily create and manage your game states. States are the main way you arrange and manage your resources.
FILE MANAGEMENT AND LOADING: Easily add images, audio and data resources. Includes resource loaders, and easy access and management of your files.
The making of Spellfall prototype was very similar to the Phaser version, so here is the source code organized in the same way as the Phaser counterpart for you to compare them:
<!doctype html>
<html>
<head>
<script src="kiwi.min.js"></script>
<style>
body{margin:0}
</style>
<script type="text/javascript">
var game = new Kiwi.Game();
var gameState = new Kiwi.State("gameState");
//var stage = new Kiwi.Stage(game,"game",300,300,SCALE_FIT);
// variables to customize the game
var tileSize = 50; // tile size, in pixels
var fieldSize = 6; // number of tiles per row/column
var tileTypes = 6; // different kind of tiles allowed
var pickedZoom = 1.1; // zoom ratio to highlight picked tile
// variables used by game engine
var dragging = false; // are we dragging?
var movingRow; // row of the moving tile
var movingCol; // col of the moving tile
var tileArray = []; // array with all game tiles
var tileGroup; // group containing all tiles
var movingTileGroup; // group containing the moving tile
game.states.addState(gameState, true);
gameState.preload = function(){
this.game.stage.resize(300, 300);
this.game.stage.setRGBColor(0,0,0)
Kiwi.State.prototype.preload.call(this);
this.addSpriteSheet("tiles", "tiles.png", 50, 50);
}
gameState.create = function(){
Kiwi.State.prototype.create.call(this);
for(i=0;i<fieldSize;i++){
tileArray[i]=[];
for(j=0;j<fieldSize;j++){
var randomTile = Math.floor(Math.random()*tileTypes)
var theTile=new Kiwi.GameObjects.Sprite(this, this.textures["tiles"], j*tileSize, i*tileSize);
theTile.centerAnchorPoint();
theTile.animation.switchTo(randomTile);
this.addChild(theTile);
//theTile.anchor.setTo(0.5,0.5);
tileArray[i][j]=theTile;
//tileGroup.add(theTile);
}
}
this.game.input.onDown.add(pickTile);
}
function pickTile(inputX, inputY){
// save input coordinates
startX = inputX;
startY = inputY;
// retrieve picked row and column
movingRow = Math.floor(startY/tileSize);
movingCol = Math.floor(startX/tileSize);
// zoom the tile
tileArray[movingRow][movingCol].scaleToWidth(tileSize*pickedZoom);
tileArray[movingRow][movingCol].scaleToHeight(tileSize*pickedZoom);
// moving the tile in front of the stage
gameState.swapChildren(tileArray[movingRow][movingCol],gameState.getChildAt(gameState.numChildren()-1));
this.game.input.onDown.remove(pickTile);
this.game.input.onUp.add(releaseTile);
dragging=true;
}
function releaseTile(){
// remove the listener
this.game.input.onUp.remove(releaseTile);
// determine landing row and column
var landingRow = Math.floor((tileArray[movingRow][movingCol].y+tileSize/2)/tileSize);
var landingCol = Math.floor((tileArray[movingRow][movingCol].x+tileSize/2)/tileSize);
// reset the moving tile to its original size
tileArray[movingRow][movingCol].scaleToWidth(tileSize);
tileArray[movingRow][movingCol].scaleToWidth(tileSize);
// swap tiles, both visually and in tileArray array...
tileArray[movingRow][movingCol].x=landingCol*tileSize;
tileArray[movingRow][movingCol].y=landingRow*tileSize;
if(movingRow!=landingRow || movingCol!=landingCol){
// but only if you actually moved a tile
gameState.swapChildren(tileArray[landingRow][landingCol],gameState.getChildAt(gameState.numChildren()-1));
var moveTween = this.game.tweens.create(tileArray[landingRow][landingCol]);
moveTween.to({x: movingCol*tileSize,y: movingRow*tileSize}, 800, Kiwi.Animations.Tweens.Easing.Exponential.Out);
moveTween.start();
moveTween.onComplete(function(){
var temp = tileArray[landingRow][landingCol];
tileArray[landingRow][landingCol] = tileArray[movingRow][movingCol];
tileArray[movingRow][movingCol] = temp;
this.game.input.onDown.add(pickTile);
})
}
// we aren't dragging anymore
dragging = false;
}
gameState.update = function(){
// if we are dragging a tile
if(dragging){
// check x and y distance from starting to current input location
distX = this.game.input.x-startX;
distY = this.game.input.y-startY;
// move the tile
tileArray[movingRow][movingCol].x=movingCol*tileSize+distX;
tileArray[movingRow][movingCol].y=movingRow*tileSize+distY;
}
}
</script>
</head>
<body>
</body>
</html>
As you can see, this framework too is really easy to use.
And this is the final result:
You should know how to play: just select a tile and drag onto another to swap them.
Download the source code and give a try to Kiwi.js
Never miss an update! Subscribe, and I will bother you by email only when a new game or full source code comes out.