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