JSBinding / About 2048 sample

2048 Source

2048 source code is here:

https://github.com/gabrielecirulli/2048

Play here!
http://gabrielecirulli.github.io/2048/

The code contains 2 parts: logic and presentation(ui, animation, etc.).

In order to make it run in Unity editor, JSBinding rewrited presentation part. JSBinding only made slight change to logic part(less than 5 lines).

Presentation code contains:

storage (store last game state)

input manager (handle input)

actuator (ui, animation)

JSBinding's storage code

It's quite simple, just use PlayerPrefs to store int and string.

var UnityStorageManager = function () {
var bestScoreKey = "2048BestScroe";
var gameStateKey = "2048GameState";

this.getBestScore = function () {
var bs = UnityEngine.PlayerPrefs.GetInt$$String$$Int32(bestScoreKey, 0);
return bs;
}
this.setBestScore = function (bestScore) {
UnityEngine.PlayerPrefs.SetInt(bestScoreKey, bestScore);
}

this.clearGameState = function () {
UnityEngine.PlayerPrefs.SetString(gameStateKey, "");
}
this.getGameState = function () {
var gameState = UnityEngine.PlayerPrefs.GetString$$String$$String(gameStateKey, "");
if (gameState != null && gameState.length > 0) {
return JSON.parse(gameState);
}
}
this.setGameState = function (gameState) {
UnityEngine.PlayerPrefs.SetString(gameStateKey, JSON.stringify(gameState));
}
}

JSBinding's input manager code

It's quite simple as well, not much difference from original. It cooperates with ui_controller, see below.

var InputManager = function () {
var events = {};

this.on = function (e, cb) {
if (!events[e]) {
events[e] = [];
}
events[e].push(cb);
}

this.emit = function (e, data) {
var cbs = events[e];
if (cbs) {
cbs.forEach(function(cb) {
cb(data);
});
}
}

this.keepPlaying = function () {
//print("InputManager.keeyPlaying");
}
}

JSBindng's actuator code

var Actuator = function (ui) {

this.continueGame = function () {
print("Actuator.continueGame");
}

this.actuate = function (grid, metadata) {
var self = this;

self.clearContainer(self.tileContainer);

grid.cells.forEach(function (column) {
column.forEach(function (tile) {
if (tile) {
self.addTile(tile);
}
});
});

self.updateScore(metadata.score);
self.updateBestScore(metadata.bestScore);

if (metadata.terminated) {
if (metadata.over) {
self.message(false); // You lose
}
else if (metadata.won) {
self.message(true); // You win!
}
}
}

this.clearContainer = function () {
ui.clearUITiles();
}

this.addTile = function (tile) {
var position  = tile.previousPosition || { x: tile.x, y: tile.y };

var uiTile = ui.getUITile(tile.x, tile.y)
uiTile.setValue(tile.value);

if (tile.previousPosition) {
var previousUITile = ui.getUITile(tile.previousPosition.x, tile.previousPosition.y);
uiTile.moveFrom(previousUITile.originPos);
}

else if (tile.mergedFrom) {
tile.mergedFrom.forEach(function (merged) {
//print("merged from (" + merged.x + "," + merged.y + ") -> (" + tile.x + "," + tile.y + ")");
var tempUITile = ui.createTempUITile(tile.x, tile.y);
tempUITile.setValue(merged.value);
var previousUITile = ui.getUITile(merged.previousPosition.x, merged.previousPosition.y);
tempUITile.moveFromTo(previousUITile.originPos, uiTile.originPos, true);
});

uiTile.playMergedAnim();
}

else {
uiTile.playBornAnim();
}
}

this.message = function (won) {
//var type    = won ? "game-won" : "game-over";
//var message = won ? "You win!" : "Game over!";

ui.showResult(won);
}

this.continueGame = function () {
//print("continueGame");
}

var ls = null;
this.updateScore = function (score) {
if (ls == null || ls != score) {
if (ls != null) {
var a = ui.oScore.GetComponent$1(UnityEngine.Animator.ctor);
a.set_enabled(true);
a.Play$$Int32(0);
}

ls = score;
ui.oScore.set_text(score.toString());
}
}

var lbs = null;
this.updateBestScore = function (score) {
if (lbs == null || lbs != score) {
if (lbs != null) {
var a = ui.oBestScore.GetComponent$1(UnityEngine.Animator.ctor);
a.set_enabled(true);
a.Play$$Int32(0);
}

lbs = score;
ui.oBestScore.set_text(score.toString());
}
}

}

ui_controller (handle Unity stuff)

It does everything related to Unity. Serialization, input detection, Unity UI stuff, animation, etc.

var gameManager = null;

jss.define_mb("UIController", function() {
"use strict";// gameObject
this.oTileRoot = null;

// text
this.oScore = null;
this.oBestScore = null;

// button
this.oNewGame = null;

var size = 4;
var uiTiles = [];
var inputMgr, actuator, storageMgr;

var keyCode =  [273, 275, 274, 276];
var keyCodeString = ["Up", "Right", "Down", "Left"];
var keyCodeData = [0, 1, 2, 3];

var createUITile = function (trans) {
var t = {
trans: trans,
image: trans.GetComponent$1(UnityEngine.UI.Image.ctor),

setValue: function(v) {
this.image.set_sprite(UnityEngine.Resources.Load$1$$String(UnityEngine.Sprite.ctor, "2048/"+v.toString()));
this.setVisible(true);
},

moveFromTo : function (fromPos, toPos, destroyAfterFinish) {
this.movement.moveFromTo(fromPos, toPos, destroyAfterFinish);
},

moveFrom: function (fromPos, destroyAfterFinish) {
this.moveFromTo(fromPos, this.originPos, destroyAfterFinish);
},

setVisible: function (visible) {
this.image.set_enabled(visible);
}
};

t.originPos = t.trans.get_position();
t.movement = t.trans.GetComponent$1(jss.TileMovement);
t.animator = t.trans.GetComponent$1(UE.Animator.ctor);
t.animator.set_enabled(false);

t.playMergedAnim = function () {
this.animator.set_runtimeAnimatorController(UnityEngine.Resources.Load$1$$String(UnityEngine.RuntimeAnimatorController.ctor, "2048/MergedCtrl"));
this.animator.set_enabled(true);
this.animator.Play$$Int32(0);
}

t.playBornAnim = function () {
this.animator.set_runtimeAnimatorController(UnityEngine.Resources.Load$1$$String(UnityEngine.RuntimeAnimatorController.ctor, "2048/BornCtrl"));
this.animator.set_enabled(true);
this.animator.Play$$Int32(0);
}

return t;
}

this.clearUITiles = function () {
for (var i = 0; i < uiTiles.length; i++) {
uiTiles[i].setVisible(false);
}
}

this.getUITile = function (i, j) {
return uiTiles[i + j * size];
}

this.createTempUITile = function (copy_i, copy_j) {
var transCopy = this.getUITile(copy_i, copy_j).trans;
var goCopy = transCopy.get_gameObject();
var go = UnityEngine.Object.Instantiate$$Object(goCopy);
var trans = go.get_transform();
trans.SetParent$$Transform$$Boolean(transCopy.get_parent(), false);
trans.set_position(transCopy.get_position());
trans.SetSiblingIndex(0);
return createUITile(trans);
}

var btn_helper = function (parent, path, active, cb) {
var btn = parent.FindChild(path).GetComponent$1(UnityEngine.UI.Button.ctor);
btn.get_gameObject().SetActive(active);
if (active) {
btn.get_onClick().RemoveAllListeners();
btn.get_onClick().AddListener$$UnityAction(cb);
}
}

this.oMsgBox = null;
this.showResult = function (win) {
this.oMsgBox.SetActive(true);

var trans = this.oMsgBox.get_transform();

var msg = trans.FindChild("Message").GetComponent$1(UnityEngine.UI.Text.ctor);
msg.set_text(win ? "You won!" : "Game over!");

btn_helper(trans, "NewGameButton", win, function () {
this.oMsgBox.SetActive(false);
inputMgr.emit("restart");
}.bind(this));

btn_helper(trans, "ContinuePlayButton", win, function () {
this.oMsgBox.SetActive(false);
inputMgr.emit("keepPlaying");
}.bind(this));

btn_helper(trans, "RetryButton", !win, function () {
this.oMsgBox.SetActive(false);
inputMgr.emit("restart");
}.bind(this));
}

this.Start = function () {
// init ui tiles
var parent = this.oTileRoot.get_transform();
var chCount = parent.get_childCount();
for (var i = 0; i < chCount; i++) {
var child = parent.GetChild(i);
uiTiles.push(createUITile(child));
}

inputMgr = new InputManager();
actuator = new Actuator(this);
storageMgr = new UnityStorageManager();

//
this.oNewGame.get_onClick().AddListener$$UnityAction(function () {
inputMgr.emit("restart");
});

// start game
gameManager = new GameManager(size, inputMgr, actuator, storageMgr);
}

this.listen = function () {
if (UnityEngine.Application.get_isMobilePlatform()) {
var md = this.md = this.md || {};

var I = UnityEngine.Input;
if (I.get_touchCount() == 1) {
if (md.state == 2) {
return;
}

var p = I.get_mousePosition();
if (md.state == 0) {
md.initpos = p;
md.state = 1;
} else {
var dis = UnityEngine.Vector3.Distance(p, md.initpos);
if (dis > 20) {
var xd = Math.abs(p.x - md.initpos.x);
var yd = Math.abs(p.y - md.initpos.y);
if (xd > yd) {
inputMgr.emit("move", p.x > md.initpos.x ? 1 : 3);
} else {
inputMgr.emit("move", p.y > md.initpos.y ? 0 : 2);
}
md.state = 2;
}
}
} else {
md.state = 0;
}
} else {
for (var i = 0; i < keyCode.length; i++) {
if (UnityEngine.Input.GetKeyDown$$KeyCode(keyCode[i])) {
inputMgr.emit("move", keyCodeData[i]);
break;
}
}

}
}

this.Update = function () {
this.listen();
};
});

tilemovement

Moves tile from pos (i,j) to pos (x,y). If the tile is temporary, destroy it after move.

jss.define_mb("TileMovement", function () {
this.Awake = function() {
this.trans = this.get_transform();
}

this.moving = false;

var $cv = { Value: UnityEngine.Vector3.get_zero() };
this.Update = function () {
if (!this.moving) {
return;
}

var newPos = UnityEngine.Vector3.SmoothDamp$$Vector3$$Vector3$$Vector3$$Single(
this.trans.get_position(),
this.toPos,
$cv,
0.07);

this.trans.set_position(newPos);

var dis = UnityEngine.Vector3.Distance(newPos, this.toPos);
if (dis < 0.001) {
this.moving = false;

if (this.destroyAfterFinish) {
UnityEngine.Object.Destroy$$Object(this.get_gameObject());
}
}
}

this.moveFromTo = function (fromPos, toPos, destroyAfterFinish) {
this.toPos = toPos;
this.destroyAfterFinish = destroyAfterFinish;
this.moving = true;
this.trans.set_position(fromPos);
}
});

back to JSBinding / Home