$(document).ready(function() {
/* =========================================================
CONFIG
========================================================= */
var GAME_SIZE = 4;
var ANIMATION_SPEED = 200;
/* =========================================================
GLOBALS
========================================================= */
var GAME_BOARD;
/* =========================================================
GAME LOGIC
========================================================= */
function init_game() {
GAME_BOARD = [['','','',''],['','','',''],['','','',''],['','','','']];
generate_new_tile();
}
init_game();
function is_board_full() {
for (var i=0;i<GAME_SIZE;i++) {
for (var j=0;j<GAME_SIZE;j++) {
if (GAME_BOARD[i][j] == '') {
return false;
}
}
}
return true;
}
function generate_new_tile() {
if (is_board_full()) {
alert('game over');
$('#debug_btn1').remove();
}
var tile_val = Math.floor((Math.random()*2)+1);
var r,c;
var tester=0;
while (true && tester < 1000000) {
r = Math.floor(Math.random()*4);
c = Math.floor(Math.random()*4);
tester+=1;
if (GAME_BOARD[r][c] == '') { break; }
}
make_tile(tile_val,r,c,true);
GAME_BOARD[r][c] = tile_val;
}
function combine_pairs(row,reverse) {
if (typeof(reverse) != 'boolean') {reverse = false;}
if (row.length == 0) {
return row;
}
var new_row;
if (reverse) {
new_row = [row[row.length-1]];
for (var i=row.length-2; i>=0;i--) {
if (row[i] == new_row[new_row.length-1]) {
new_row[new_row.length-1] += 1;
if (i > 0) {
new_row.push(row[i-1]);
i -= 1;
}
}
else {
new_row.push(row[i]);
}
}
new_row.reverse();
}
else {
/* [2,2,4] ==> [4,4]
*/
new_row = [row[0]];
for (var i=1; i<row.length;i++) {
if (row[i] == new_row[new_row.length-1]) {
new_row[new_row.length-1] += 1;
if (i < row.length-1) {
new_row.push(row[i+1]);
i += 1;
}
}
else {
new_row.push(row[i]);
}
}
}
return new_row;
}
function move_left() {
var new_row,m;
for (var i=0;i<GAME_SIZE;i++) {
new_row = [];
for (var j=0;j<GAME_SIZE;j++) {
if (GAME_BOARD[i][j] != '') {
new_row.push(GAME_BOARD[i][j]);
}
}
new_row = combine_pairs(new_row,false);
m = GAME_SIZE-new_row.length;
for (var k=0;k<m;k++) {
new_row.push('');
}
GAME_BOARD[i] = new_row;
}
}
function move_right() {
var new_row,m;
for (var i=0;i<GAME_SIZE;i++) {
new_row = [];
for (var j=0;j<GAME_SIZE;j++) {
if (GAME_BOARD[i][j] != '') {
new_row.push(GAME_BOARD[i][j]);
}
}
new_row = combine_pairs(new_row,true);
m = GAME_SIZE-new_row.length;
for (var k=0;k<m;k++) {
new_row.unshift('');
}
GAME_BOARD[i] = new_row;
}
}
function replace_col(col,c) {
for (var r=0; r<GAME_SIZE;r++) {
GAME_BOARD[r][c] = col[r];
}
}
function move_up() {
var new_col,m;
for (var i=0;i<GAME_SIZE;i++) {
new_col = [];
for (var j=0;j<GAME_SIZE;j++) {
if (GAME_BOARD[j][i] != '') {
new_col.push(GAME_BOARD[j][i]);
}
}
new_col = combine_pairs(new_col,false);
m = GAME_SIZE-new_col.length;
for (var k=0;k<m;k++) {
new_col.push('');
}
replace_col(new_col,i);
}
}
function move_down() {
var new_col,m;
for (var i=0;i<GAME_SIZE;i++) {
new_col = [];
for (var j=0;j<GAME_SIZE;j++) {
if (GAME_BOARD[j][i] != '') {
new_col.push(GAME_BOARD[j][i]);
}
}
new_col = combine_pairs(new_col,true);
m = GAME_SIZE-new_col.length;
for (var k=0;k<m;k++) {
new_col.unshift('');
}
replace_col(new_col,i);
}
}
/* =========================================================
DISPLAY LOGIC
========================================================= */
function make_tile(tile_val,r,c,new_tile) {
var jq = '.cell[row="' + r.toString() + '"][col="' + c.toString() + '"]';
if (tile_val == '') {
$(jq).html('');
return;
}
var tile_html = '<div class="tile n'+ tile_val.toString() + '"></div>';
$(jq).html(tile_html);
if (new_tile) {
var $tile = $(jq).children();
$tile.css('height','80px');
$tile.css('width','80px');
$tile.css('margin','10px');
$tile.animate({'height':'100px','width':'100px','margin':'0px'},ANIMATION_SPEED-50,'linear');
}
}
function update_board() {
var jq,val;
for (var r=0;r<GAME_SIZE;r++) {
for (var c=0;c<GAME_SIZE;c++) {
jq = '.cell[row="' + r.toString() + '"][col="' + c.toString() + '"]';
// get the current value of this cell
if ($(jq).html() != '') {
val = Number($(jq).children().attr('class').substring(6));
}
else {
val = '';
}
// check if the current cell and GAME_BOARD[r][c] don't match
if (GAME_BOARD[r][c] != val) {
make_tile(GAME_BOARD[r][c],r,c);
}
}
}
}
function animate_move_left() {
var jq,val,animate_row,num_free;
var animate_grid = [];
var combo_flag = false;
// build animation grid
for (var r=0;r<GAME_SIZE;r++) {
for (var c=0;c<GAME_SIZE;c++) {
if (c==0) {
if (GAME_BOARD[r][c] == '') {
animate_row = [-1];
num_free = 1;
}
else {
animate_row = [0];
num_free = 0;
}
}
else {
if (GAME_BOARD[r][c] == '') {
animate_row.push(-1);
num_free += 1;
}
else if (GAME_BOARD[r][c-1] == GAME_BOARD[r][c] && !combo_flag) {
num_free += 1;
animate_row.push(num_free);
combo_flag = true;
}
else {
animate_row.push(num_free);
combo_flag = false;
}
}
}
animate_grid.push(animate_row);
}
console.log('MOVE LEFT');
print_2_matrix(GAME_BOARD,animate_grid);
// use animate grid to animate!
for (var r=0;r<GAME_SIZE;r++) {
for (var c=0;c<GAME_SIZE;c++) {
if (animate_grid[r][c] <= 0) { continue; }
jq = '.cell[row="'+r.toString()+'"][col="'+c.toString()+'"] .tile';
val = (animate_grid[r][c]*125).toString();
$(jq).animate({'left':'-='+val+'px'},ANIMATION_SPEED,'linear');
$(jq).animate({'left':'+='+val+'px'},0);
}
}
}
function animate_move_right() {
var jq,val,animate_row,num_free;
var animate_grid = [];
var combo_flag = false;
// build animation grid
for (var r=0;r<GAME_SIZE;r++) {
for (var c=GAME_SIZE-1;c>=0;c-=1) {
if (c==GAME_SIZE-1) {
if (GAME_BOARD[r][c] == '') {
animate_row = [-1];
num_free = 1;
}
else {
animate_row = [0];
num_free = 0;
}
}
else {
if (GAME_BOARD[r][c] == '') {
animate_row.unshift(-1);
num_free += 1;
}
else if (GAME_BOARD[r][c+1] == GAME_BOARD[r][c] && !combo_flag) {
num_free += 1;
animate_row.unshift(num_free);
combo_flag = true;
}
else {
animate_row.unshift(num_free);
combo_flag = false;
}
}
}
animate_grid.push(animate_row);
}
console.log('MOVE RIGHT');
print_2_matrix(GAME_BOARD,animate_grid);
// use animate grid to animate!
for (var r=0;r<GAME_SIZE;r++) {
for (var c=0;c<GAME_SIZE;c++) {
if (animate_grid[r][c] <= 0) { continue; }
jq = '.cell[row="'+r.toString()+'"][col="'+c.toString()+'"] .tile';
val = (animate_grid[r][c]*125).toString();
$(jq).animate({'right':'-='+val+'px'},ANIMATION_SPEED,'linear');
$(jq).animate({'right':'+='+val+'px'},0);
}
}
}
function add_col(grid,col) {
for (var i=0;i<col.length;i++) {
grid[i].push(col[i]);
}
return grid;
}
function animate_move_up() {
var jq,val,animate_col,num_free;
var animate_grid = [[],[],[],[]];
var combo_flag = false;
// build animation grid
for (var c=0;c<GAME_SIZE;c++) {
for (var r=0;r<GAME_SIZE;r++) {
if (r==0) {
if (GAME_BOARD[r][c] == '') {
animate_col = [-1];
num_free = 1;
}
else {
animate_col = [0];
num_free = 0;
}
}
else {
if (GAME_BOARD[r][c] == '') {
animate_col.push(-1);
num_free += 1;
}
else if (GAME_BOARD[r-1][c] == GAME_BOARD[r][c] && !combo_flag) {
num_free += 1;
animate_col.push(num_free);
combo_flag = true;
}
else {
animate_col.push(num_free);
combo_flag = false;
}
}
}
animate_grid = add_col(animate_grid, animate_col);
}
console.log('MOVE UP');
print_2_matrix(GAME_BOARD,animate_grid);
//use animate grid to animate!
for (var r=0;r<GAME_SIZE;r++) {
for (var c=0;c<GAME_SIZE;c++) {
if (animate_grid[r][c] <= 0) { continue; }
jq = '.cell[row="'+r.toString()+'"][col="'+c.toString()+'"] .tile';
val = (animate_grid[r][c]*125).toString();
$(jq).animate({'top':'-='+val+'px'},ANIMATION_SPEED,'linear');
$(jq).animate({'top':'+='+val+'px'},0);
}
}
}
function animate_move_down() {
var jq,val,animate_col,num_free;
var animate_grid = [[],[],[],[]];
var combo_flag = false;
// build animation grid
for (var c=0;c<GAME_SIZE;c++) {
for (var r=GAME_SIZE-1;r>=0;r-=1) {
if (r==GAME_SIZE-1) {
if (GAME_BOARD[r][c] == '') {
animate_col = [-1];
num_free = 1;
}
else {
animate_col = [0];
num_free = 0;
}
}
else {
if (GAME_BOARD[r][c] == '') {
animate_col.unshift(-1);
num_free += 1;
}
else if (GAME_BOARD[r+1][c] == GAME_BOARD[r][c] && !combo_flag) {
num_free += 1;
animate_col.unshift(num_free);
combo_flag = true;
}
else {
animate_col.unshift(num_free);
combo_flag = false;
}
}
}
animate_grid = add_col(animate_grid, animate_col);
}
console.log('MOVE DOWN');
print_2_matrix(GAME_BOARD,animate_grid);
// use animate grid to animate!
for (var r=0;r<GAME_SIZE;r++) {
for (var c=0;c<GAME_SIZE;c++) {
if (animate_grid[r][c] <= 0) { continue; }
jq = '.cell[row="'+r.toString()+'"][col="'+c.toString()+'"] .tile';
val = (animate_grid[r][c]*125).toString();
$(jq).animate({'bottom':'-='+val+'px'},ANIMATION_SPEED,'linear');
$(jq).animate({'bottom':'+='+val+'px'},0);
}
}
}
/* =========================================================
USER INPUT
========================================================= */
$('#debug_btn1').click(function() {
generate_new_tile();
});
$('#debug_btn2').click(function() {
var jq1 = '.cell[row="0"][col="0"] .tile';
$(jq1).animate({'right':'-=125px'},ANIMATION_SPEED);
});
$(document).keydown(function(key) {
switch(parseInt(key.which,10)) {
case 65:
case 37:
animate_move_left();
move_left();
break;
case 83:
case 40:
animate_move_down();
move_down();
break;
case 87:
case 38:
animate_move_up();
move_up();
break;
case 68:
case 39:
animate_move_right();
move_right();
break;
default:
break;
}
// TODO: only do these things if something has changed
setTimeout(function(){update_board();},ANIMATION_SPEED+5);
setTimeout(function(){generate_new_tile();},ANIMATION_SPEED+25);
});
/* =========================================================
HELPER FUNCTIONS
========================================================= */
function print_board() {
var s = '';
for (var i=0;i<GAME_SIZE;i++) {
for (var j=0;j<GAME_SIZE;j++) {
if (GAME_BOARD[i][j] != '') {
s += GAME_BOARD[i][j].toString() + ' ';
}
else {
s += '* ';
}
}
s += '\n';
}
console.log(s);
}
function print_matrix(mat) {
var s = '';
for (var i=0;i<mat.length;i++) {
for (var j=0;j<mat[i].length;j++) {
if (mat[i][j] == -1) {
s += mat[i][j].toString() + ' ';
}
else {
s += ' ' + mat[i][j].toString() + ' ';
}
}
s += '\n';
}
console.log(s);
}
function print_2_matrix(mat1,mat2) {
// assuming same size
var s = '';
var s2 = '';
var v1,v2;
for (var i=0;i<mat1.length;i++) {
for (var j=0;j<mat1[i].length;j++) {
v1 = mat1[i][j].toString();
v2 = mat2[i][j].toString();
if (v1.length == 0) { s += '** ';}
else if (v1.length == 1) { s += ' ' + v1 + ' ';}
else { s += v1 + ' ';}
if (v2.length == 0) { s2 += '** ';}
else if (v2.length == 1) { s2 += ' ' + v2 + ' ';}
else { s2 += v2 + ' ';}
}
s += '\t\t' + s2 + '\n';
s2 = '';
}
console.log(s);
}
});
!
