Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Submitting 2048 #22

Open
wants to merge 48 commits into
base: emilykelly/master
Choose a base branch
from
Open

Submitting 2048 #22

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
48 commits
Select commit Hold shift + click to select a range
f7e444e
create addTile function
kedevlin Feb 1, 2016
a7fcc45
add randomly two spots that aren't 0 but if most spots are full it is…
kedevlin Feb 2, 2016
09eb505
change random row and column generator to cap at 4
kedevlin Feb 2, 2016
ba9faf8
draw board works, need to eliminate zeros
emgord Feb 2, 2016
470867b
draw board does not show zeros now
emgord Feb 2, 2016
379a47f
refined add tile, missing { added
emgord Feb 2, 2016
0c1587a
added clear board function
emgord Feb 2, 2016
2032021
add new tiles with each turn, clear and print board
emgord Feb 2, 2016
69156f5
add right arrow shift function
kedevlin Feb 2, 2016
dddaaa0
left shift working
emgord Feb 2, 2016
a4c7bc1
added separate functions for shifting up down left and right, looking…
emgord Feb 2, 2016
756441d
merge function added to right shift, currently merging more than once
emgord Feb 2, 2016
a07fa17
update merge function to work for right arrow
kedevlin Feb 2, 2016
33e61ff
downshift and right shift working
emgord Feb 2, 2016
c22febf
update shift methods to work for up and left
kedevlin Feb 2, 2016
d5f7973
prevent infinite loop in addTile
kedevlin Feb 3, 2016
03d4a83
we're about to make weird changes, come back here if it fails
kedevlin Feb 3, 2016
cca2e41
add checkLoser function
kedevlin Feb 3, 2016
69c11f3
update shift functions to accept a board as a parameter
kedevlin Feb 3, 2016
41d2e8f
game win and game lose is set to true when that case is reached
emgord Feb 3, 2016
016554e
move lose check to be only when board is full
kedevlin Feb 3, 2016
276e12f
update arrays to include 9 2s
kedevlin Feb 3, 2016
60ff0ae
score working for merge left
emgord Feb 3, 2016
30cc3e0
merge left adding score complete
emgord Feb 3, 2016
b883caa
merge right downnow tracks score
emgord Feb 3, 2016
154cb00
right shift and down shift add to score
emgord Feb 3, 2016
2d1981e
add score for upshift, update moveTile to add score
kedevlin Feb 3, 2016
1d901f7
Merge branch 'emilykelly/master' of github.com:emgord/2048 into emily…
kedevlin Feb 3, 2016
6fe0a33
about to start refractoring. come back here if things get crazy
emgord Feb 4, 2016
8791c2d
create axisBuilder method and call it from leftShifter
kedevlin Feb 4, 2016
61a558d
update rightShifter to call axisBuilder
kedevlin Feb 4, 2016
a3631ac
update downShifter to call axisBuilder
kedevlin Feb 4, 2016
e6fc2d3
update upShifter to call axisBuilder
kedevlin Feb 4, 2016
f35e4d5
update merge function names
kedevlin Feb 4, 2016
fc413f4
master shifter method working for left shift
emgord Feb 4, 2016
ec6b1a4
master shifter is working in all directions
emgord Feb 4, 2016
a276427
deleted unecessary shifter functions. code is now so dry
emgord Feb 4, 2016
d0b65dd
add h1 header and score to display on page and update CSS
kedevlin Feb 4, 2016
a4878d4
Update color scheme
kedevlin Feb 4, 2016
05c48cc
color scheme on score
emgord Feb 4, 2016
c81fa9a
floating point animantion working
emgord Feb 4, 2016
e9b2306
changed position of point float
emgord Feb 5, 2016
d9ff0ab
added new font for title
emgord Feb 5, 2016
1f9722f
handle if game is won or lost, and new game button
emgord Feb 5, 2016
33ec152
Style new game button
kedevlin Feb 5, 2016
59c36c0
added styling to win or lose
emgord Feb 5, 2016
e2150f9
merge conflict
emgord Feb 5, 2016
97e7f91
bounce not working, back to previous iteration
emgord Feb 5, 2016
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
48 changes: 29 additions & 19 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,30 +3,40 @@
<head>
<title>2048</title>
<link rel="stylesheet" media="all" href="stylesheets/2048.css"/>
<link href='https://fonts.googleapis.com/css?family=Neucha' rel='stylesheet' type='text/css'>
<script type="text/javascript" src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<script type="text/javascript" src="javascripts/2048.js"></script>
</head>
<body>
<div id="gameboard">
<div class="cells">
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div id="all-content">
<h1>2048</h1>
<div id="score">
SCORE
<div id="score-value"></div>
</div>
<div id="point-float"></div>
<button id="new-game">New Game</button>

<div id="gameboard">
<div class="cells">
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
</div>
</div>
<div class="tile" data-row="r1", data-col="c1" data-val="2">2</div>
</div>
</body>
</html>
228 changes: 221 additions & 7 deletions javascripts/2048.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,42 +1,256 @@
var Game = function() {
this.newGame();
};

Game.prototype.newGame = function() {
this.board = [[0, 0, 0, 0],
[0, 0, 0, 0],
[0, 0, 0, 0],
[0, 0, 0, 0]];
// this.board = [[2, 2, 32, 512],
// [2, 16, 320, 256],
// [4, 2, 64, 128],
// [1048, 90, 1024, 8]];
this.addTile();
this.addTile();
this.win = false;
this.lose = false;
this.score = 0;
};

var mergeBackwards = function(array){
var score = 0;
var squished_array = [];
while (array.length > 0) {
if (array.length === 1) {
squished_array.push(array[0]);
array.splice(0, 1);
} else if (array[0] === array[1]) {
var mergeVal = array[0] * 2;
squished_array.push(mergeVal);
score += mergeVal;
array.splice(0, 2);
} else {
squished_array.push(array[0]);
array.splice(0, 1);
}
}
return { squished_array: squished_array,
score: score
};
};

var mergeForwards = function(array){
var score = 0;
var squished_array = [];
while (array.length > 0) {
if (array.length === 1) {
squished_array.unshift(array[0]);
array.splice(0, 1);
} else if (array[array.length-1] === array[array.length-2]) {
var mergeVal = array[array.length-1] * 2;
squished_array.unshift(mergeVal);
score += mergeVal;
array.splice(array.length-2, 2);
} else {
squished_array.unshift(array[array.length-1]);
array.splice(array.length-1, 1);
}
}
return { squished_array: squished_array,
score: score
};
};

var axisBuilder = function(boardLength, nonzeros, forward) {
var score = 0;
var mergeReturn;
if (nonzeros.length !== 0) {
if (forward) {
mergeReturn = mergeForwards(nonzeros);
} else {
mergeReturn = mergeBackwards(nonzeros);
}
nonzeros = mergeReturn.squished_array;
score += mergeReturn.score;
}

var numZeros = (boardLength - nonzeros.length);
var zeros = new Array(numZeros + 1).join('0').split('').map(parseFloat);
var rebuiltArray;
if (forward){
rebuiltArray = zeros.concat(nonzeros);
} else {
rebuiltArray = nonzeros.concat(zeros);
}
return { rebuiltArray: rebuiltArray,
score: score
};
};

// forward is a boolean, true indicates down or right, row is a boolean, true is left or right, false is up or down
var shifter = function(board, forward, row) {
var score = new Number();
var cell;
for (var outer = 0; outer < board.length; outer++) {
var nonzeros = [];
for (var inner = 0; inner < board.length; inner++) {
if (row) {
cell = board[outer][inner];
} else {
cell = board[inner][outer];
}
if (cell !== 0) {
nonzeros.push(cell);
}
}
var axisBuildReturn = axisBuilder(board.length, nonzeros, forward);
var new_axis = axisBuildReturn.rebuiltArray;
score += axisBuildReturn.score;
if (row){
board[outer] = new_axis;
} else {
for (var i = 0; i < board.length; i++){
board[i][outer] = new_axis[i];
}
}
}
return score;
};

function arraysEqual(a1,a2) {
return JSON.stringify(a1)==JSON.stringify(a2);
}

Game.prototype.checkLoser = function() {
var fakeBoard = this.board.slice(0);
shifter(fakeBoard, true, true);
shifter(fakeBoard, false, true);
shifter(fakeBoard, true, false);
shifter(fakeBoard, false, false);
if (arraysEqual(fakeBoard, this.board)) {
this.lose = true;
}
};

Game.prototype.checkWinner = function() {
var flattenedBoard = [].concat.apply([],this.board);
if (flattenedBoard.indexOf(2048) !== -1) {
this.win = true;
}
};

Game.prototype.addTile = function() {
var flattenedBoard = [].concat.apply([],this.board);
if (flattenedBoard.indexOf(0) === -1) {
this.checkLoser();
return;
}

var row = Math.floor(Math.random() * 4);
var column = Math.floor(Math.random() * 4);
while (this.board[row][column] !== 0) {
row = Math.floor(Math.random() * 4);
column = Math.floor(Math.random() * 4);
}
var options = [2,2,2,2,2,2,2,2,2,4];
var value = options[Math.floor(Math.random() * options.length)];
this.board[row][column] = value;
};

var floatPoints = function(points) {
$("#point-float").append("+" + points);
$("#point-float").animate({
top: '-=100px', opacity: 0}, 1000, function(){
$(this).css({'top': '+=100px', 'opacity':100});
$("#point-float").empty();
} );
};

Game.prototype.moveTile = function(tile, direction) {
// Game method here
var points;
switch(direction) {
case 38: //up
console.log('up');
// console.log('up');
points = shifter(this.board, false, false);
this.score += points;
if (points !== 0){ floatPoints(points); }
break;
case 40: //down
console.log('down');
points = shifter(this.board, true, false);
this.score += points;
if (points !== 0){ floatPoints(points); }
// console.log('down');
break;
case 37: //left
console.log('left');
// console.log('left');
points = shifter(this.board, false, true);
this.score += points;
if (points !== 0){ floatPoints(points); }
break;
case 39: //right
console.log('right');
// console.log('right');
points = shifter(this.board, true, true);
this.score += points;
if (points !== 0){ floatPoints(points); }
break;
}
};

Game.prototype.drawBoard = function(){
for(var row = 0; row < this.board.length; row++) {
for(var col = 0; col < this.board.length; col++) {
var value = this.board[row][col];
if (value !== 0) {
$("#gameboard").append($("<div class=\"tile\" data-row=\"r" + row + "\", data-col=\"c" + col + "\" data-val=\"" + value + "\">" + value + "</div>"));
}
}
}
};

Game.prototype.updateScore = function(){
$("#score-value").empty();
$("#score-value").append(this.score);
};

Game.prototype.clearBoard = function(){
$(".tile").remove();
};

$(document).ready(function() {
console.log("ready to go!");
// Any interactive jQuery functionality
var game = new Game();

game.drawBoard();
game.updateScore();
$('body').keydown(function(event){
if (game.lose || game.win) {
return;
}
var arrows = [37, 38, 39, 40];
if (arrows.indexOf(event.which) > -1) {
var tile = $('.tile');

game.moveTile(tile, event.which);
game.addTile();
game.clearBoard();
game.drawBoard();
game.updateScore();
game.checkWinner();
if (game.win) {
$("#gameboard").append("<div id=\"outcome\"><p>You WIN!!!!!!</p></div>");
} else if (game.lose) {
$("#gameboard").append("<div id=\"outcome\"><p>Game Over!</p></div>");
}
}
});

$('button').click(function(){
$("#outcome").remove();
game.newGame();
game.clearBoard();
game.drawBoard();
game.updateScore();
console.log("Hi");
});

});
Loading