diff --git a/2048/index.html b/2048/index.html index 7363e98..efb4d3c 100644 --- a/2048/index.html +++ b/2048/index.html @@ -3,22 +3,29 @@ 2048 + + + +
+
2048
+ + +
Score
+
+ +
+
+

How to play: Use your arrows to move left, right, up and down. When two tiles with the same number touch, they merge into one!

+
+

Note: The game is in developing phase. You may experience some problems, but we are going to update the game as sun as we can!

+
+
+ + - - - - - -
-
- - -
- - \ No newline at end of file diff --git a/2048/scripts/box.js b/2048/scripts/box.js index 55e8808..f19d9cd 100644 --- a/2048/scripts/box.js +++ b/2048/scripts/box.js @@ -1,42 +1,56 @@ -// see matrix in browser -var Go = function(direction) { - move(matrix, direction); -}; - $(document).ready(function(){ - Go('startGame'); - $(document).keydown(function(key){ - + startGame(); + draw(gameMatrix.matrix); + var undoMatrix = clone(gameMatrix.matrix); + undoTag.html('Undo ('+x+')'); + $('#restartGame').click(function(){ + gameMatrix.matrix = restartGame(); + startGame(); + draw(gameMatrix.matrix); + x = 3; + totalScore = 0; + $('.score').html('Score' + '

'+totalScore+'

'); + undoTag.html('Undo ('+x+')'); + undoMatrix = new Array(); + }); + $('#undo').click(function(){ + if(x>0){ + gameMatrix.matrix = undo(); + draw(gameMatrix.matrix); + x--; + undoTag.html('Undo ('+x+')'); + } + }); - switch(parseInt(key.which,10)) { + $(document).keydown(function(key){ + switch(parseInt(key.which,10)) { // left Arrow case 37: - Go('left'); + stopScroll(); + undoMatrix = clone(gameMatrix.matrix); + moveLeft(gameMatrix.matrix); break; case 38: - Go('up'); + stopScroll(); + undoMatrix = clone(gameMatrix.matrix); + moveUp(gameMatrix.matrix); break; case 39: - Go('right'); - break; + stopScroll(); + undoMatrix = clone(gameMatrix.matrix); + moveRight(gameMatrix.matrix); + break; case 40: - Go('down'); + stopScroll(); + undoMatrix = clone(gameMatrix.matrix); + moveDown(gameMatrix.matrix); break; - + case 27: + gameMatrix.matrix = restartGame(); + startGame(); + draw(gameMatrix.matrix); } + gameOver(gameMatrix.matrix); + }); }); - - -var ar=new Array(37,38,39,40); - -// $(document).keydown(function(e) { -// var key = e.which; -// //console.log(key); -// //if(key==35 || key == 36 || key == 37 || key == 39) -// if($.inArray(key,ar) > -1) { -// e.preventDefault(); -// return false; -// } -// return true; -// }); \ No newline at end of file diff --git a/2048/scripts/main.js b/2048/scripts/main.js new file mode 100644 index 0000000..9d89af4 --- /dev/null +++ b/2048/scripts/main.js @@ -0,0 +1,3 @@ +$(document).ready(function(){ + +}); \ No newline at end of file diff --git a/2048/scripts/matrix.js b/2048/scripts/matrix.js index 2080c78..1888b37 100644 --- a/2048/scripts/matrix.js +++ b/2048/scripts/matrix.js @@ -1,4 +1,6 @@ //create the matrix with value 0 +var gameMatrix = {}; + var createMatrix = function(){ var matrix = new Array(MATRIX_SIZE); for ( i = 0; i < MATRIX_SIZE; i++){ @@ -12,14 +14,14 @@ var createMatrix = function(){ }; // get positions for empty cells with value 0 -var getEmptyCell = function(matrix1){ +var getEmptyCell = function(matrix){ var emptyCell = new Array(MATRIX_SIZE*MATRIX_SIZE); for( i = 0; i < MATRIX_SIZE*MATRIX_SIZE; i++) emptyCell[i] = new Array(2); var l = 0; for(i = 0; i < MATRIX_SIZE; i++){ for(j = 0; j < MATRIX_SIZE; j++) - if(matrix1[i][j].value === 0){ + if(matrix[i][j].value === 0){ emptyCell[l][0] = i; emptyCell[l][1] = j; l++; @@ -36,52 +38,49 @@ var randPosition = function(matr){ return matr[Math.floor(Math.random() * matr.length)]; }; -var matrix = createMatrix(); +gameMatrix.matrix = createMatrix(); //initialize the game with 2 cells var startGame = function(){ - var emptCell = getEmptyCell(matrix); + var emptCell = getEmptyCell(gameMatrix.matrix); var x = randPosition(emptCell); - matrix[x[0]][x[1]].value = 2; - emptCell = getEmptyCell(matrix); + gameMatrix.matrix[x[0]][x[1]].value = 2; + emptCell = getEmptyCell(gameMatrix.matrix); x = randPosition(emptCell); - matrix[x[0]][x[1]].value = 2; + gameMatrix.matrix[x[0]][x[1]].value = 2 ; }; -var insertTile = function(matrix1){ - var emptCell1 = getEmptyCell(matrix1); +var insertTile = function(matrix){ + var emptCell1 = getEmptyCell(matrix); var position = randPosition(emptCell1); - matrix1[position[0]][position[1]] = new Tile(position[0], position[1], randNumber()); + matrix[position[0]][position[1]] = new Tile(position[0], position[1], randNumber()); }; //for moves -var move = function(matrix1, direction){ - matrix2 = clone(matrix1); - resetFlag(matrix1); +var moveLeft = function(matrix){ + matrix2 = clone(matrix); + resetFlag(matrix); + matrix3 = clone(matrix); + undoMatrix.push(matrix2); + undoScore.push(totalScore); // if moved = 0, then don't insert new tile; var moved = 0; - switch(direction){ - // left Arrow - case 'startGame': - startGame(); - position = compareElements(matrix1,matrix2); - break; - case 'left': for( var i = 0; i < MATRIX_SIZE; i++){ for( var j = MATRIX_SIZE-1; j > 0; j--){ - if(matrix1[i][j].value !== 0){ - if(matrix1[i][j].value === matrix1[i][j-1].value && matrix1[i][j].flag === 0 && matrix1[i][j-1].flag === 0){ - matrix1[i][j-1].value = matrix1[i][j-1].value*2; - matrix1[i][j].value = 0; - matrix1[i][j-1].flag = 1; + if(matrix[i][j].value !== 0){ + if(matrix[i][j].value === matrix[i][j-1].value && matrix[i][j].flag === 0 && matrix[i][j-1].flag === 0){ + score(matrix[i][j-1].value*2); + matrix[i][j-1].value = matrix[i][j-1].value*2; + matrix[i][j].value = 0; + matrix[i][j-1].flag = 1; moved = 1; } - else if(matrix1[i][j-1].value === 0){ - matrix1[i][j-1] = matrix1[i][j]; - matrix1[i][j] = new Tile(i,j,0); + else if(matrix[i][j-1].value === 0){ + matrix[i][j-1] = matrix[i][j]; + matrix[i][j] = new Tile(i,j,0); moved = 1; } - else if(matrix1[i][j-1].value !== 0) + else if(matrix[i][j-1].value !== 0) continue; } } @@ -89,178 +88,207 @@ var move = function(matrix1, direction){ // parcurg pentru a scapa de spatiile goale ( VALUE = 0) for( var i = 0; i < MATRIX_SIZE; i++) for( var j = 0; j < MATRIX_SIZE-1; j++) - if(matrix1[i][j+1].value !== 0 && matrix1[i][j].value === 0){ - matrix1[i][j] = matrix1[i][j+1]; - matrix1[i][j+1] = new Tile(i,j,0); + if(matrix[i][j+1].value !== 0 && matrix[i][j].value === 0){ + matrix[i][j] = matrix[i][j+1]; + matrix[i][j+1] = new Tile(i,j,0); moved = 1; - if(matrix1[i][j-1] && matrix1[i][j-1].value === 0){ - matrix1[i][j-1] = matrix1[i][j]; - matrix1[i][j] = new Tile(i,j,0); + if(matrix[i][j-1] && matrix[i][j-1].value === 0){ + matrix[i][j-1] = matrix[i][j]; + matrix[i][j] = new Tile(i,j,0); } } - matrix2 = clone(matrix1); - console.log('acum modific'); + matrix2 = clone(matrix); + if(moved === 1) - insertTile(matrix1); - break; - case 'right': - for( var i = 0; i < MATRIX_SIZE; i++){ - for( var j = 0; j < MATRIX_SIZE-1; j++){ - if(matrix1[i][j].value !== 0){ - if(matrix1[i][j].value === matrix1[i][j+1].value && matrix1[i][j].flag === 0 && matrix1[i][j+1].flag === 0){ - matrix1[i][j+1].value = matrix1[i][j+1].value*2; - matrix1[i][j].value = 0; - matrix1[i][j+1].flag = 1; - moved = 1; - } - else if(matrix1[i][j+1].value === 0){ - matrix1[i][j+1] = matrix1[i][j]; - matrix1[i][j] = new Tile(i,j,0); - moved = 1; - } - else if(matrix1[i][j+1].value !== 0) continue; - } + insertTile(matrix); + position = compareElements(matrix,matrix2); + draw(matrix, position); + win(matrix, matrix3); +}; + +var moveRight = function(matrix){ + matrix2 = clone(matrix); + matrix3 = clone(matrix); + resetFlag(matrix); + undoMatrix.push(matrix2); + undoScore.push(totalScore); + // if moved = 0, then don't insert new tile; + var moved = 0; + for( var i = 0; i < MATRIX_SIZE; i++){ + for( var j = 0; j < MATRIX_SIZE-1; j++){ + if(matrix[i][j].value !== 0){ + if(matrix[i][j].value === matrix[i][j+1].value && matrix[i][j].flag === 0 && matrix[i][j+1].flag === 0){ + score(matrix[i][j+1].value*2); + matrix[i][j+1].value = matrix[i][j+1].value*2; + matrix[i][j].value = 0; + matrix[i][j+1].flag = 1; + moved = 1; } - } - // parcurg pentru a scapa de spatiile goale ( VALUE = 0) - for( var i = 0; i < MATRIX_SIZE; i++) - for( var j = MATRIX_SIZE-1; j > 0 ; j--) - if(matrix1[i][j].value === 0 && matrix1[i][j-1].value !== 0){ - matrix1[i][j] = matrix1[i][j-1]; - matrix1[i][j-1] = new Tile(i,j,0); - moved = 1; - if(matrix1[i][j+1] && matrix1[i][j+1].value === 0){ - matrix1[i][j+1] = matrix1[i][j]; - matrix1[i][j] = new Tile(i,j,0); - } - } - matrix2 = clone(matrix1); - if(moved === 1) - insertTile(matrix1); - break; - case 'up': - for(var j = 0; j < MATRIX_SIZE; j++){ - for(var i = MATRIX_SIZE-1; i > 0; i--){ - if(matrix1[i][j].value !== 0){ - if(matrix1[i][j].value === matrix1[i-1][j].value && matrix1[i][j].flag === 0 && matrix1[i-1][j].flag === 0){ - matrix1[i-1][j].value = matrix1[i-1][j].value*2; - matrix1[i][j].value = 0; - matrix1[i-1][j].flag = 1; - moved = 1; - } - else if(matrix1[i-1][j].value === 0){ - matrix1[i-1][j] = matrix1[i][j]; - matrix1[i][j] = new Tile(i,j,0); - moved = 1; - } - else if(matrix1[i-1][j].value !== 0) continue; - } + else if(matrix[i][j+1].value === 0){ + matrix[i][j+1] = matrix[i][j]; + matrix[i][j] = new Tile(i,j,0); + moved = 1; } + else if(matrix[i][j+1].value !== 0) continue; + } + } + } + // parcurg pentru a scapa de spatiile goale ( VALUE = 0) + for( var i = 0; i < MATRIX_SIZE; i++) + for( var j = MATRIX_SIZE-1; j > 0 ; j--) + if(matrix[i][j].value === 0 && matrix[i][j-1].value !== 0){ + matrix[i][j] = matrix[i][j-1]; + matrix[i][j-1] = new Tile(i,j,0); + moved = 1; + if(matrix[i][j+1] && matrix[i][j+1].value === 0){ + matrix[i][j+1] = matrix[i][j]; + matrix[i][j] = new Tile(i,j,0); } - // parcurg pentru a scapa de spatiile goale ( VALUE = 0) - for( var j = 0; j < MATRIX_SIZE; j++) - for( var i = 0; i < MATRIX_SIZE-1 ; i++) - if(matrix1[i+1][j].value !== 0 && matrix1[i][j].value === 0){ - matrix1[i][j] = matrix1[i+1][j]; - matrix1[i+1][j] = new Tile(i,j,0); - moved = 1; - if(matrix1[i-1][j] && matrix1[i-1][j].value === 0){ - matrix1[i-1][j] = matrix1[i][j]; - matrix1[i][j] = new Tile(i,j,0); - } - } - matrix2 = clone(matrix1); - if(moved === 1) - insertTile(matrix1); - console.log(matrix2); - console.log(matrix1); - break; - case 'down': - for(var j = 0; j < MATRIX_SIZE; j++){ - for(var i = 0; i < MATRIX_SIZE-1; i++){ - if(matrix1[i][j].value !== 0){ - if(matrix1[i][j].value === matrix1[i+1][j].value && matrix1[i][j].flag === 0 && matrix1[i+1][j].flag === 0){ - matrix1[i+1][j].value = matrix1[i+1][j].value*2; - matrix1[i][j].value = 0; - matrix1[i+1][j].flag = 1; - moved = 1; - } - else if(matrix1[i+1][j].value === 0){ - matrix1[i+1][j] = matrix1[i][j]; - matrix1[i][j] = new Tile(i,j,0); - moved = 1; - } - else if(matrix1[i+1][j].value !== 0) continue; - } - } + } + matrix2 = clone(matrix); + if(moved === 1) + insertTile(matrix); + + position = compareElements(matrix,matrix2); + draw(matrix, position); + win(matrix, matrix3); +}; + +var moveUp = function(matrix){ + matrix2 = clone(matrix); + matrix3 = clone(matrix); + resetFlag(matrix); + undoMatrix.push(matrix2); + undoScore.push(totalScore); + // if moved = 0, then don't insert new tile; + var moved = 0; + for(var j = 0; j < MATRIX_SIZE; j++){ + for(var i = MATRIX_SIZE-1; i > 0; i--){ + if(matrix[i][j].value !== 0){ + if(matrix[i][j].value === matrix[i-1][j].value && matrix[i][j].flag === 0 && matrix[i-1][j].flag === 0){ + score(matrix[i-1][j].value*2); + matrix[i-1][j].value = matrix[i-1][j].value*2; + matrix[i][j].value = 0; + matrix[i-1][j].flag = 1; + moved = 1; } - // parcurg pentru a scapa de spatiile goale ( VALUE = 0) - for( var j = 0; j < MATRIX_SIZE; j++) - for( var i = MATRIX_SIZE-1; i > 0 ; i--) - if(matrix1[i][j].value === 0 && matrix1[i-1][j].value !== 0){ - matrix1[i][j] = matrix1[i-1][j]; - matrix1[i-1][j] = new Tile(i,j,0); - moved = 1; - if(matrix1[i+1][j] && matrix1[i+1][j].value === 0){ - matrix1[i+1][j] = matrix1[i][j]; - matrix1[i][j] = new Tile(i,j,0); - } - } - matrix2 = clone(matrix1); - if(moved === 1) - insertTile(matrix1); - break; - }; - position = compareElements(matrix1,matrix2); - console.log(position + 'in move'); - console.log(matrix2); - console.log(matrix1); - draw(matrix1, position); + else if(matrix[i-1][j].value === 0){ + matrix[i-1][j] = matrix[i][j]; + matrix[i][j] = new Tile(i,j,0); + moved = 1; + } + else if(matrix[i-1][j].value !== 0) continue; + } + } + } + // parcurg pentru a scapa de spatiile goale ( VALUE = 0) + for( var j = 0; j < MATRIX_SIZE; j++) + for( var i = 0; i < MATRIX_SIZE-1 ; i++) + if(matrix[i+1][j].value !== 0 && matrix[i][j].value === 0){ + matrix[i][j] = matrix[i+1][j]; + matrix[i+1][j] = new Tile(i,j,0); + moved = 1; + if(matrix[i-1][j] && matrix[i-1][j].value === 0){ + matrix[i-1][j] = matrix[i][j]; + matrix[i][j] = new Tile(i,j,0); + } + } + matrix2 = clone(matrix); + if(moved === 1) + insertTile(matrix); + position = compareElements(matrix,matrix2); + draw(matrix, position); + win(matrix, matrix3); + }; +var moveDown = function(matrix){ + matrix2 = clone(matrix); + matrix3 = clone(matrix); + resetFlag(matrix); + undoMatrix.push(matrix2); + undoScore.push(totalScore); + // if moved = 0, then don't insert new tile; + var moved = 0; + for(var j = 0; j < MATRIX_SIZE; j++){ + for(var i = 0; i < MATRIX_SIZE-1; i++){ + if(matrix[i][j].value !== 0){ + if(matrix[i][j].value === matrix[i+1][j].value && matrix[i][j].flag === 0 && matrix[i+1][j].flag === 0){ + score(matrix[i+1][j].value*2); + matrix[i+1][j].value = matrix[i+1][j].value*2; + matrix[i][j].value = 0; + matrix[i+1][j].flag = 1; + moved = 1; + } + else if(matrix[i+1][j].value === 0){ + matrix[i+1][j] = matrix[i][j]; + matrix[i][j] = new Tile(i,j,0); + moved = 1; + } + else if(matrix[i+1][j].value !== 0) continue; + } + } + } + // parcurg pentru a scapa de spatiile goale ( VALUE = 0) + for( var j = 0; j < MATRIX_SIZE; j++) + for( var i = MATRIX_SIZE-1; i > 0 ; i--) + if(matrix[i][j].value === 0 && matrix[i-1][j].value !== 0){ + matrix[i][j] = matrix[i-1][j]; + matrix[i-1][j] = new Tile(i,j,0); + moved = 1; + if(matrix[i+1][j] && matrix[i+1][j].value === 0){ + matrix[i+1][j] = matrix[i][j]; + matrix[i][j] = new Tile(i,j,0); + } + } + matrix2 = clone(matrix); + if(moved === 1) + insertTile(matrix); + position = compareElements(matrix,matrix2); + draw(matrix, position); + win(matrix, matrix3); + }; + var draw = function(matrix, position){ - $('.container').empty(); - //console.log(position[0][0]); + container.empty(); for(i = 0; i < MATRIX_SIZE; i++){ for(j = 0; j < MATRIX_SIZE; j++) if(matrix[i][j].value !== 0){ - if(i === position[0][0] && j === position[0][1]){ - // console.log(position[0][1]); - - $('').appendTo('.container').fadeIn(1000); + if(position && i === position[0][0] && j === position[0][1]){ + addHtml(matrix[i][j], 'none').appendTo(container).fadeIn(500); }else - $('
'+matrix[i][j].value+'
').appendTo('.container'); + addHtml(matrix[i][j], 'block').appendTo(container); } else - $('.container').append('
') - $('.container').append('
') + addHtml(matrix[i][j], 'block').appendTo(container); + container.append('
') + $('.score').html('Score' + '

'+totalScore+'

'); + console.log(totalScore); } }; -function compareElements(matrix1, matrix2){ +function addHtml(matrix, display){ + var valueToDisplay = matrix.value === 0 ? '' : matrix.value; + return $('
'+ valueToDisplay +'
'); + +}; +function compareElements(matrix, matrix2){ var position = new Array(1); position[0] = new Array(2); for(var i = 0; i < MATRIX_SIZE; i++) for(var j = 0; j < MATRIX_SIZE; j++){ - if(matrix1[i][j].value !== matrix2[i][j].value){ + if(matrix[i][j].value !== matrix2[i][j].value){ position[0][0] = i; position[0][1] = j; }} - console.log(position[0][0]+"in functie"); - return position; }; -function clone(existingArray) { - var newObj = (existingArray instanceof Array) ? [] : {}; - for (i in existingArray) { - if (i == 'clone') continue; - if (existingArray[i] && typeof existingArray[i] == "object") { - newObj[i] = clone(existingArray[i]); - } else { - newObj[i] = existingArray[i] - } - } - return newObj; -} \ No newline at end of file +function undo(){ + var matrix = undoMatrix[undoMatrix.length-1]; + undoMatrix.length = undoMatrix.length-1; + totalScore = undoScore[undoScore.length-1]; + undoScore.length = undoScore.length-1; + return matrix; +}; diff --git a/2048/scripts/tiles.js b/2048/scripts/tiles.js index ebe56ea..cd29375 100644 --- a/2048/scripts/tiles.js +++ b/2048/scripts/tiles.js @@ -3,13 +3,4 @@ function Tile(x,y, value){ this.y = y; this.value = value; this.flag = 0; -}; - -var resetFlag = function(matrix){ - for( var i = 0; i < MATRIX_SIZE; i++) - for( var j = 0; j < MATRIX_SIZE; j++) - matrix[i][j].flag = 0; - return matrix; -}; - - +}; \ No newline at end of file diff --git a/2048/scripts/util.js b/2048/scripts/util.js new file mode 100644 index 0000000..fd4bedf --- /dev/null +++ b/2048/scripts/util.js @@ -0,0 +1,78 @@ +var container = $('.container'); +var undoTag = $('#undo'); +var resetFlag = function(matrix){ + for( var i = 0; i < MATRIX_SIZE; i++) + for( var j = 0; j < MATRIX_SIZE; j++) + matrix[i][j].flag = 0; + return matrix; +}; + +function clone(existingArray) { + var newObj = (existingArray instanceof Array) ? [] : {}; + for (i in existingArray) { + if (existingArray[i] && typeof existingArray[i] == "object") { + newObj[i] = clone(existingArray[i]); + } else { + newObj[i] = existingArray[i] + } + } + return newObj; +}; + +function stopScroll(){ +var ar=new Array(37,38,39,40); +$(document).keydown(function(e) { + var key = e.which; + if($.inArray(key,ar) > -1) { + e.preventDefault(); + return false; + } + return true; +}); +} + +function gameOver(matrix){ + var k = 0; + for( var i = 0; i < MATRIX_SIZE-1; i++) + for(var j = 0; j < MATRIX_SIZE-1; j++) + if(matrix[i][j].value !== matrix[i][j+1].value && matrix[i+1][j].value !== matrix[i+1][j+1].value && matrix[i][j].value !== matrix[i+1][j].value && matrix[i][j+1].value !== matrix[i+1][j+1].value) + continue; + else + k = 1; + if(k === 0 && getEmptyCell(matrix).length === 0){ + $('').appendTo(container).fadeIn(1500); + return k; + } +}; + +function restartGame(){ + for (var i = 0; i < MATRIX_SIZE; i++) { + for (var j = 0; j < MATRIX_SIZE; j++) { + gameMatrix.matrix[i][j].value = 0; + } + } + return gameMatrix.matrix; +} + +function win(matrix, matrix3){ + var k1 = 0; + var k2 = 0; + for( var i = 0; i < MATRIX_SIZE; i++){ + for(var j = 0; j < MATRIX_SIZE; j++){ + if(matrix3[i][j].value === 2048 || matrix3[i][j].value === 4096) + k2 = 1; + if(matrix[i][j].value === 2048) + k1 = 1; + } + } + + if(k1 === 1 && k2 == 0){ + $('').appendTo(container).fadeIn(1500); + } +} + + +function score(score){ + totalScore += score; + return totalScore; +} \ No newline at end of file diff --git a/2048/scripts/variables.js b/2048/scripts/variables.js index 42830a3..4fa8206 100644 --- a/2048/scripts/variables.js +++ b/2048/scripts/variables.js @@ -1,5 +1,9 @@ const MATRIX_SIZE = 4; const PERCENT = 0.9; +var x = 3; +var totalScore = 0; +var undoMatrix = []; +var undoScore = []; var randNumber = function(){ var value = Math.random() < PERCENT ? 2 : 4; return value; diff --git a/2048/stylesheet/reset.css b/2048/stylesheet/reset.css new file mode 100644 index 0000000..4d137c7 --- /dev/null +++ b/2048/stylesheet/reset.css @@ -0,0 +1,102 @@ +/* +html5doctor.com Reset Stylesheet +v1.6.1 +Last Updated: 2010-09-17 +Author: Richard Clark - http://richclarkdesign.com +Twitter: @rich_clark +*/ + +html, body, div, span, object, iframe, +h1, h2, h3, h4, h5, h6, p, blockquote, pre, +abbr, address, cite, code, +del, dfn, em, img, ins, kbd, q, samp, +small, strong, sub, sup, var, +b, i, +dl, dt, dd, ol, ul, li, +fieldset, form, label, legend, +table, caption, tbody, tfoot, thead, tr, th, td, +article, aside, canvas, details, figcaption, figure, +footer, header, hgroup, menu, nav, section, summary, +time, mark, audio, video { + margin:0; + padding:0; + border:0; + outline:0; + font-size:100%; + vertical-align:baseline; + background:transparent; +} + +body { + line-height:1; +} + +article,aside,details,figcaption,figure, +footer,header,hgroup,menu,nav,section { + display:block; +} + +nav ul { + list-style:none; +} + +blockquote, q { + quotes:none; +} + +blockquote:before, blockquote:after, +q:before, q:after { + content:''; + content:none; +} + +a { + margin:0; + padding:0; + font-size:100%; + vertical-align:baseline; + background:transparent; +} + +/* change colours to suit your needs */ +ins { + background-color:#ff9; + color:#000; + text-decoration:none; +} + +/* change colours to suit your needs */ +mark { + background-color:#ff9; + color:#000; + font-style:italic; + font-weight:bold; +} + +del { + text-decoration: line-through; +} + +abbr[title], dfn[title] { + border-bottom:1px dotted; + cursor:help; +} + +table { + border-collapse:collapse; + border-spacing:0; +} + +/* change border colour to suit your needs */ +hr { + display:block; + height:1px; + border:0; + border-top:1px solid #cccccc; + margin:1em 0; + padding:0; +} + +input, select { + vertical-align:middle; +} \ No newline at end of file diff --git a/2048/stylesheet/style.css b/2048/stylesheet/style.css index 1313312..afe6ede 100644 --- a/2048/stylesheet/style.css +++ b/2048/stylesheet/style.css @@ -1,89 +1,282 @@ -.screen{ +html { + height: 100%; +} +body{ background-color: #ebebeb; - height: 950px; - margin: 20px 400px 20px 400px;*/ + height: 100%; +} +#title{ + position: absolute; + top: 1.5%; + left: 40.5%; + font-size: 80px; + color: #f28f00; + font-family: "Lucida Console", "Bitstream Vera Sans Mono"; +} +.screen{ + background-color: #ebebeb; + height: 100%; + width: 100%; +} +#restartGame{ + border: 2px solid #D6D59C; + border-radius: 3px; + height: 50px; + width: 130px; + position: absolute; + top: 58%; + left: 58%; + margin-left: 7px; + margin-top: 160px; + background-color: #D6D59C; +} +#undo{ + border: 2px solid #D6D59C; + border-radius: 3px; + height: 50px; + width: 130px; + position: absolute; + top: 58%; + left: 35%; + margin-left: 7px; + margin-top: 160px; + background-color: #D6D59C; +} +.score{ + border: 2px solid #D6D59C; + border-radius: 3px; + width: 130px; + position: absolute; + top: 1%; + left: 57.5%; + background-color: #D6D59C; + color:white; + text-align: center; + font-size: 30px; + line-height: 40px; +} +.score p{ + font-size: 20px; } - - .container{ - border-radius: 10px; - position: absolute; - top: 50%; - left: 50%; - margin-top: -274px; - margin-left: -254px; - background-color: #577a7f; - border: 8px solid #577a7f; + border-radius: 10px; + position: absolute; + top: 40%; + left: 50%; + margin-top: -282px; + margin-left: -282px; + color: #fff; } - .tile{ - border-radius: 8px; - margin: 4px; - height: 125px; - width: 125px; - font: 50px arial; - float: left; - line-height: 120px; - border: 2px solid #7c979b; - text-align: center; - background-color: #7c979b; + border-radius: 8px; + margin: 4px; + height: 125px; + width: 125px; + font: 50px arial; + float: left; + line-height: 120px; + text-align: center; +} +/*default template*/ +.default.container{ + background-color: #56D7B8; + border: 8px solid #56D7B8; +} +.default .tile{ + border: 2px solid #7c979b; + background-color: #7c979b; +} +.default .val2{ + background-color: #528c93; +} +.default .val4{ + background-color: #4d7a89; +} +.default .val8{ + background-color: #337c74; +} +.default .val16{ + background-color: #337c55; +} +.default .val32{ + background-color: #1b633d; +} +.default .val64{ + background-color: #197228; +} +.default .val128{ + background-color: #3e7219; +} +.default .val256{ + background-color: #6b7219; +} +.default .val512{ + background-color: #725a19; +} +.default .val1024{ + background-color: #723d19; + font: 40px arial; + line-height: 120px; +} +.default .val2048{ + background-color: #7c1a1a; + font: 40px arial; + line-height: 120px; } +.default .val4096{ + background-color: #8e0505; + font: 40px arial; + line-height: 120px; +} +.default .val8192{ + background-color: #ff0000; + font: 40px arial; + line-height: 120px; +} +/*rainbow template*/ +.rainbow.container{ + background-color: #56D7B8; + border: 8px solid #56D7B8; +} +.rainbow .tile{ + border: 2px solid #7c979b; + background-color: #7c979b; +} +.rainbow .val2{ + background-color: #69D2E7; -.val2{ - background-color: #528c93; +} +.rainbow .val4{ + background-color: #A7DBD8; + +} +.rainbow .val8{ + background-color: #E0E4CC; + +} +.rainbow .val16{ + background-color: #F38630; + +} +.rainbow .val32{ + background-color: #FA6900; +} +.rainbow .val64{ + background-color: #E23D26; + +} +.rainbow .val128{ + background-color: #FB613E; + } +.rainbow .val256{ + background-color: #FBEE8B; + +} +.rainbow .val512{ + background-color: #F19450; + +} +.rainbow .val1024{ + background-color: #F2624C; + font: 40px arial; + line-height: 120px; +} +.rainbow .val2048{ + background-color: #97220A; + font: 40px arial; + line-height: 120px; + +} +.rainbow .val4096{ + background-color: #7A6864; + font: 40px arial; + line-height: 120px; +} +.rainbow .val8192{ + background-color: #757A64; + font: 40px arial; + line-height: 120px; +} +/*warm template*/ +.warm.container{ + background-color: #4C5F49; + border: 8px solid #4C5F49; +} +.warm .tile{ + border: 2px solid #81AC7F; + background-color: #81AC7F; +} +.warm .val2{ + background-color: #6F6F6F; } -.val4{ - background-color: #4d7a89; - +.warm .val4{ + background-color: #544856; + +} +.warm .val8{ + background-color: #4F3153; + +} +.warm .val16{ + background-color: #31313D; + +} +.warm .val32{ + background-color: #130409; + color:white; +} +.warm .val64{ + background-color: #183629; +} +.warm .val128{ + background-color: #6B9581; + } +.warm .val256{ + background-color: #97A78C; + +} +.warm .val512{ + background-color: #9AA944; + +} +.warm .val1024{ + background-color: #EDB429; + font: 40px arial; + line-height: 120px; } -.val8{ - background-color: #337c74; - +.warm .val2048{ + background-color: #F8AFA6; + font: 40px arial; + line-height: 120px; + } -.val16{ - background-color: #337c55; - +.warm .val4096{ + background-color: #54FA00; + font: 40px arial; + line-height: 120px; } -.val32{ - background-color: #1b633d; - +.warm .val8192{ + background-color: #BC02FF; + font: 40px arial; + line-height: 120px; } -.val64{ - background-color: #197228; - -} -.val128{ - background-color: #3e7219; - } -.val256{ - background-color: #6b7219; - -} -.val512{ - background-color: #725a19; - -} -.val1024{ - background-color: #723d19; - font: 40px arial; - line-height: 120px; -} -.val2048{ - background-color: #7c1a1a; - font: 40px arial; - line-height: 120px; - -} -.val4096{ - background-color: #8e0505; - font: 40px arial; - line-height: 120px; +#info{ + position: absolute; + top: 85%; + left: 29%; + right: 28%; + padding-left: 110px; + padding-right: 110px; + } -.val8192{ - background-color: #ff0000; - font: 40px arial; - line-height: 120px; +.game, .gameOver{ + position: absolute; + background: rgba(238, 228, 218, 0.73); + z-index: 100; + text-align: center; + font-size: 40px; + color: #f28f00; } \ No newline at end of file diff --git a/ovidiu_bite presentation_for_windows.pptx b/ovidiu_bite presentation_for_windows.pptx new file mode 100644 index 0000000..f3fd42c Binary files /dev/null and b/ovidiu_bite presentation_for_windows.pptx differ