diff --git a/share/goodie/game2048/content.handlebars b/share/goodie/game2048/content.handlebars
index 2f693c1a7..f9769d2dd 100644
--- a/share/goodie/game2048/content.handlebars
+++ b/share/goodie/game2048/content.handlebars
@@ -3,6 +3,5 @@
 
 <span class="counter"><span class="points">0</span> Points</span>
 <div id="2048-area">
-	<table class="area" id="area">
-	</table>
+
 </div>
diff --git a/share/goodie/game2048/game2048.js b/share/goodie/game2048/game2048.js
index e1157ddf5..cf96ca080 100644
--- a/share/goodie/game2048/game2048.js
+++ b/share/goodie/game2048/game2048.js
@@ -2,265 +2,299 @@ DDH.game2048 = DDH.game2048 || {};
 
 DDH.game2048.build = function(ops) {
 
+    // Global Variables Declaration
+
+    var tempArea;
+    var container;
+    var WINNUM;
+    var SIZE;
+    var goOn;
+    var area;
+    var color;
+
+
+    // This function ( using 'transpose' and 'swapRows' )
+    // moves the numbers
+
+    function mov(dir, area) {
+        tempArea.focus();
+        var i;
+        var points = 0;
+        var moves = 0;
+        var flag = false;
+        var exit;
+
+        if (dir == 'a' || dir == 'd') {
+            area = transpose(area);
+        }
+        if (dir == 's' || dir == 'd') {
+            area = swapRows(area);
+        }
+
+        for (var c = 0; c<SIZE; c++) {
+            for (var r = 0; r<SIZE; r++) {
+                exit = false;
+                if (area[r][c] == "") {
+                    moves++;
+                } else {
+
+                    if (moves != 0) {
+                        area[r-moves][c] = area[r][c];
+                        area[r][c] = '';
+                        flag=true;
+                    }
+                    i = r+1;
+                    while(i < SIZE && exit == false) {
+                        if(area[r-moves][c]==area[i][c]) {
+                            area[r-moves][c]*=2;
+                            area[i][c]='';
+                            points = area[r-moves][c];
+                            flag = true; exit = true;
+                        } else {
+                            if(area[i][c]!="")
+                                exit = true;
+                        }
+                        i++;
+                    }
+                }
+                i =0;
+            }
+            moves = 0;
+        }
+
+        if (dir == 's' || dir == 'd') {
+            area = swapRows(area);
+        }
+        if (dir == 'a' || dir == 'd') {
+            area = transpose(area);
+        }
+
+        printArea(area);
+        upPoints(points);
+
+        if (checkWin(area) || checkLose(area, dir)) {
+            goOn = false;
+        }
+        // This check is mandatory in order to avoid the appearance of a new
+        // value in the area if no moves has been made
+        return flag;
+    }
+
+    // Updates the 'points' div
+
+    function upPoints(points) {
+        var spanPoints = $('.points');
+        var current = parseInt(spanPoints.text());
+        spanPoints.text(current + points);
+    }
+
+    // After every little table's change, the area is updated.
+    // This function changes the cell background too
+
+    function printArea(area) {
+        var val;
+        for (var r = 0; r < SIZE; r++) {
+            for (var c = 0; c < SIZE; c++) {
+                val = area[r][c];
+                $('#area tr').eq(r).find('td').eq(c).html(val);
+                $('#area tr').eq(r).find('td').eq(c).css("background-color",color[val]);
+            }
+        }
+    }
+
+    // 'area' initialization
+
+    function getArea(tempArea, area) {
+        var sub = new Array();
+        for (var r = 0; r<SIZE; r++) {
+            for (var c = 0; c<SIZE; c++) {
+                sub[c] = $(area).find('tr#'+r).find('td:eq(c)').text();
+            }
+            area[r] = sub;
+            sub = [];
+        }
+    }
+
+
+
+    // The two functions below are implemented in order to avoid to make a
+    // specific function for every single direction/move
+
+    // left and right moves activate this function
+
+    function transpose(area) {
+        for (var r = 0; r < SIZE; r++) {
+            for (var c = 0; c < r; c++) {
+                var temp = area[r][c];
+                area[r][c] = area[c][r];
+                area[c][r] = temp;
+            }
+        }
+        return area;
+    }
+
+    // down and right moves activate this function
+
+    function swapRows(area) {
+        var nArea=new Array();
+
+        for(i=0;i<SIZE;i++) {
+            nArea[SIZE-1-i]=area[i];
+        }
+        return nArea;
+    }
+
+
+    // This function set a random number ( 2 or 4 ) in a random
+    // position around the area. 4 has a 10% chance of being chosen.
+
+    function getRand(area) {
+
+        var rand=Math.floor(Math.random()*11);
+        var posX;
+        var posY;
+
+        rand = (rand < 10) ? 2 : 4;
+
+        do {
+            posX=Math.floor(Math.random()*SIZE);
+            posY=Math.floor(Math.random()*SIZE);
+        } while( area[posX][posY] != '');
+
+        area[posX][posY] = rand;
+        printArea(area);
+
+    }
+
+    // If there is the winning number inside the table, returns true and
+    // prints a congratulation message
+
+    function checkWin(area) {
+        for (var r = 0; r<SIZE; r++) {
+            for (var c = 0; c<SIZE; c++) {
+                if (area[r][c] == WINNUM) {
+                    area[0][0] = 'Y'; area[0][1] = 'O'; area[0][2] = 'U';
+                    area[SIZE-1][0] = 'W'; area[SIZE-1][1] = 'I'; area[SIZE-1][2] = 'N';
+                    printArea(area);
+                    return true;
+                }
+            }
+        }
+        return false;
+    }
+
+    // If no moves or sums are possible, returns true
+
+    function checkLose(area) {
+        var count = 0;
+        for (var r = 0; r<SIZE; r++) {
+            for (var c = 0; c<SIZE; c++) {
+                if (area[r][c] != '') {
+                    count++;
+                }
+            }
+        }
+        if (count == SIZE*SIZE && !canDoSomething(area)) {
+            area[0][0] = 'Y'; area[0][1] = 'O'; area[0][2] = 'U';
+            area[SIZE-1][0] = 'L'; area[SIZE-1][1] = 'O'; area[SIZE-1][2] = 'S'; area[SIZE-1][3] = 'E';
+            printArea(area);
+            return true;
+        }
+
+        return false;
+    }
+
+    function canDoSomething(area) {
+        for (var r = 0; r < SIZE; r++) {
+            for (var c = 0; c < SIZE; c++) {
+                if ((r != 0 && area[r][c] == area[r-1][c]) ||
+                    (r != SIZE-1 && area[r][c] == area[r+1][c]) ||
+                    (c != 0 && area[r][c] == area[r][c-1]) ||
+                    (c != SIZE-1 && area[r][c] == area[r][c+1])) {
+
+                    return true;
+                }
+            }
+        }
+        return false;
+    }
+
+    // This function creates and prints to page the gaming table
+
+    function createTable(container) {
+        var nCell = '';
+        var table = $('<table/>').attr("id","area").attr("class","area");
+
+        for (var i = 0; i < SIZE; i++) {
+            nCell += '<td></td>';
+        }
+        for(var r = 0; r < SIZE; r++){
+            table.append('<tr>' + nCell + '</tr>');
+        }
+        $(container).append(table);
+    }
+
+
+    function start() {
+        getArea(tempArea,area);
+        getRand(area);
+    }
+
 
     return {
         onShow: function() {
 
-            var tempArea = document.getElementById('area');
-            var WINNUM = document.getElementById('game').innerHTML;
-            var SIZE = parseInt(document.getElementById('dimension').innerHTML);
-            var goOn = true;
-            var dir;
-            var area = new Array();
-            var color = {'' : '#BBADA0',
-                        '2' : '#EEE4DA',
-                        '4' : '#EDE0C8',
-                        '8' : '#F2B179',
-                        '16' : '#F59563',
-                        '32' : '#F67C5F',
-                        '64' : '#F65E3B',
-                        '128' : '#EDCF72',
-                        '256' : '#EDCC61',
-                        '512' : '#EDC850',
-                        '1024' : '#EDC53F',
-                        '2048' : '#EDC22E',
-                        '4096' : '#D5AE29',
-                        '8192' : '#AA8B21'};
+            tempArea = $('#area');
+            container = $('#2048-area');
+            WINNUM = $('#game').html();
+            SIZE = parseInt($("#dimension").html(), 10);
+            goOn = true;
+            area = new Array();
+            color = {'' : '#BBADA0',
+                    '2' : '#EEE4DA',
+                    '4' : '#EDE0C8',
+                    '8' : '#F2B179',
+                    '16' : '#F59563',
+                    '32' : '#F67C5F',
+                    '64' : '#F65E3B',
+                    '128' : '#EDCF72',
+                    '256' : '#EDCC61',
+                    '512' : '#EDC850',
+                    '1024' : '#EDC53F',
+                    '2048' : '#EDC22E',
+                    '4096' : '#D5AE29',
+                    '8192' : '#AA8B21'};
 
-            createTable(tempArea);
+            createTable(container);
             start(tempArea,area);
 
-            document.addEventListener("keydown", function(event){checkMov(event)}, true);
+            $('html').keydown(function(event){
+
+                event.stopPropagation();
+                event.preventDefault();
 
-            function checkMov(event) {
                 var move = false;
 
                 if (goOn) {
 
-                    switch(event.which) {
-                        case 38: {
-                            dir = 'w';
-                            break;
-                        }
-                        case 37: {
-                            dir = 'a';
-                            break;
-                        }
-                        case 40: {
-                            dir = 's';
-                            break;
-                        }
-                        case 39: {
-                            dir = 'd';
-                            break;
-                        }
-                        default: return;
+                    if (event.keyCode == 87 || event.keyCode == 38) { // w or up arrow
+                        move = mov('w', area);
+                    } else if (event.keyCode == 65 || event.keyCode == 37) { // a or left arrow
+                        move = mov('a', area);
+                    } else if (event.keyCode == 83 || event.keyCode == 40) { // s or dowm arrow
+                        move = mov('s', area);
+                    } else if (event.keyCode == 68 || event.keyCode == 39) { // d or right arrow
+                        move = mov('d', area);
                     }
 
-                    move = mov(dir,area);
-
                     // if move is true, a move has been made
                     if (move) {
                         getRand(area);
                     }
                 }
 
-                event.defaultPrevented;
-            }
-
-            function mov(dir, area) {
-                var i;
-                var points = 0;
-                var moves = 0;
-                var flag = false;
-                var exit;
-
-                if (dir == 'a' || dir == 'd') {
-                    area = transpose(area);
-                }
-                if (dir == 's' || dir == 'd') {
-                    area = swapRows(area);
-                }
-
-                for (var c = 0; c<SIZE; c++) {
-                    for (var r = 0; r<SIZE; r++) {
-                        exit = false;
-                        if (area[r][c] == "") {
-                            moves++;
-                        } else {
-
-                            if (moves != 0) {
-                                area[r-moves][c] = area[r][c];
-                                area[r][c] = '';
-                                flag=true;
-                            }
-                            i = r+1;
-                            while(i < SIZE && exit == false) {
-                                if(area[r-moves][c]==area[i][c]) {
-                                    area[r-moves][c]*=2;
-                                    area[i][c]='';
-                                    points = area[r-moves][c];
-                                    flag = true; exit = true;
-                                } else {
-                                    if(area[i][c]!="")
-                                        exit = true;
-                                }
-                                i++;
-                            }
-                        }
-                        i =0;
-                    }
-                    moves = 0;
-                }
-
-                if (dir == 's' || dir == 'd') {
-                    area = swapRows(area);
-                }
-                if (dir == 'a' || dir == 'd') {
-                    area = transpose(area);
-                }
-
-                printArea(area);
-                upPoints(points);
-
-                if (checkWin(area) || checkLose(area, dir)) {
-                    goOn = false;
-                }
-
-                // This check is necesary avoiding the appearance of a new value in the area if
-                // no moves was made
-                return flag;
-            }
-
-            function upPoints(points) {
-                var spanPoints = document.getElementsByClassName('points')[0];
-                var current = parseInt(spanPoints.innerHTML);
-                spanPoints.innerHTML = current + points;
-            }
-
-            function printArea(area) {
-                var val;
-                for (var r = 0; r< SIZE; r++) {
-                    for (var c = 0; c<SIZE; c++) {
-                        val = area[r][c];
-                        tempArea.rows[r].cells[c].innerHTML = area[r][c];
-                        tempArea.rows[r].cells[c].style.backgroundColor = color[val];
-                    }
-                }
-            }
-
-
-            function getArea(tempArea, area) {
-                var sub = new Array();
-                for (var r = 0; r<SIZE; r++) {
-                    for (var c = 0; c<SIZE; c++) {
-                        sub[c] = tempArea.rows[r].cells[c].innerHTML;
-                    }
-                    area[r] = sub;
-                    sub = [];
-                }
-            }
-
-            function transpose(area) {
-                for (var r = 0; r < SIZE; r++) {
-                    for (var c = 0; c < r; c++) {
-                        var temp = area[r][c];
-                        area[r][c] = area[c][r];
-                        area[c][r] = temp;
-                    }
-                }
-                return area;
-            }
-
-            function swapRows(area) {
-                var narea=new Array();
-
-                for(i=0;i<SIZE;i++) {
-                    narea[SIZE-1-i]=area[i];
-                }
-                return narea;
-            }
-
-            function getRand(area) {
-
-                var rand=Math.floor(Math.random()*11);
-                var posX;
-                var posY;
-
-                rand = (rand < 10) ? 2 : 4;
-
-                do {
-                    posX=Math.floor(Math.random()*SIZE);
-                    posY=Math.floor(Math.random()*SIZE);
-                } while( area[posX][posY] != '');
-
-                area[posX][posY] = rand;
-
-                printArea(area);
-
-            }
-
-            function checkWin(area) {
-                for (var r = 0; r<SIZE; r++) {
-                    for (var c = 0; c<SIZE; c++) {
-                        if (area[r][c] == WINNUM) {
-                            area[0][0] = 'Y'; area[0][1] = 'O'; area[0][2] = 'U';
-                            area[SIZE-1][0] = 'W'; area[SIZE-1][1] = 'I'; area[SIZE-1][2] = 'N';
-                            printArea(area);
-                            return true;
-                        }
-                    }
-                }
-                return false;
-            }
-
-            function checkLose(area) {
-                var count = 0;
-                for (var r = 0; r<SIZE; r++) {
-                    for (var c = 0; c<SIZE; c++) {
-                        if (area[r][c] != '') {
-                            count++;
-                        }
-                    }
-                }
-                if (count == SIZE*SIZE && !canDoSomething(area)) {
-                    area[0][0] = 'Y'; area[0][1] = 'O'; area[0][2] = 'U';
-                    area[SIZE-1][0] = 'L'; area[SIZE-1][1] = 'O'; area[SIZE-1][2] = 'S'; area[SIZE-1][3] = 'E';
-                    printArea(area);
-                    return true;
-                }
-
-                return false;
-            }
-
-            function canDoSomething(area) {
-                for (var r = 0; r < SIZE; r++) {
-                    for (var c = 0; c < SIZE; c++) {
-                        if ((r != 0 && area[r][c] == area[r-1][c]) ||
-                            (r != SIZE-1 && area[r][c] == area[r+1][c]) ||
-                            (c != 0 && area[r][c] == area[r][c-1]) ||
-                            (c != SIZE-1 && area[r][c] == area[r][c+1])) {
-
-                            return true;
-                        }
-                    }
-                }
-                return false;
-            }
-
-            function createTable(tempArea) {
-                for(var r = 0; r < SIZE; r++){
-                    var tr = tempArea.insertRow();
-                    for(var c = 0; c < SIZE; c++){
-                        var td = tr.insertCell();
-                    }
-                }
-            }
-
-            function start() {
-                getArea(tempArea,area);
-                getRand(area);
-            }
+            });
         }
     };
 };
+
diff --git a/t/2048.t b/t/2048.t
deleted file mode 100644
index 24258bb3e..000000000
--- a/t/2048.t
+++ /dev/null
@@ -1,24 +0,0 @@
-#!/usr/bin/env perl
-
-use strict;
-use warnings;
-use Test::More;
-use DDG::Test::Goodie;
-
-zci answer_type => 2048;
-zci is_cached   => 1;
-
-
-ddg_goodie_test(
-    [qw( DDG::Goodie::2048 )],
-
-    'play 2048' => test_zci(
-		'Play 2048', html => '-ANY-'
-	),
-	'play 256 7' => test_zci(
-		'Play 256', html => '-ANY-'
-    ),
-    '2048 online' => undef
-);
-
-done_testing;
diff --git a/t/Game2048.t b/t/Game2048.t
new file mode 100644
index 000000000..000242e1d
--- /dev/null
+++ b/t/Game2048.t
@@ -0,0 +1,60 @@
+#!/usr/bin/env perl
+
+use strict;
+use warnings;
+use Test::More;
+use DDG::Test::Goodie;
+
+zci answer_type => 2048;
+zci is_cached   => 1;
+
+
+ddg_goodie_test(
+    [qw( DDG::Goodie::Game2048 )],
+
+    'play 2048' => test_zci(
+        'Play 2048',
+        structured_answer => {
+
+            data => '-ANY-',
+
+            # data => [{
+            #     dimension => 4,
+            #     inputNum => 2048
+            # }],
+            id => "game2048",
+            name => 2048,
+            templates => {
+                group => "base",
+                item => 0,
+                options => {
+                    content => "DDH.game2048.content"
+                },
+            }
+        }
+    ),
+    'play 256 7' => test_zci(
+        'Play 256',
+        structured_answer => {
+
+            data => '-ANY-',
+
+            # data => [{
+            #     dimension => 7,
+            #     inputNum => 256
+            # }],
+            id => "game2048",
+            name => 2048,
+            templates => {
+                group => "base",
+                item => 0,
+                options => {
+                    content => "DDH.game2048.content"
+                },
+            }
+        }
+    ),
+    '2048 online' => undef
+);
+
+done_testing;