Permalink
Browse files

almost finished :)

  • Loading branch information...
1 parent a8695de commit e0f1b5791cd5562dfd73f5f1226ba2b376350017 @masylum committed Sep 26, 2011
Showing with 457 additions and 82 deletions.
  1. +4 −4 maps/default.js
  2. +78 −2 public/css/whatajong.css
  3. BIN public/images/danger.png
  4. +10 −2 public/index.html
  5. +236 −47 public/js/client.js
  6. +23 −10 public/js/tile.js
  7. +106 −17 server.js
View
8 maps/default.js
@@ -10,10 +10,10 @@ module.exports = function () {
, [n , n , n , n , n , n , 20, 20, 19, 19, 18, 18, 17, 17, 16, 16, 15, 15, 14, 14, 13, 13, n , n , n , n , n , n , n , n ]
, [n , n , n , n , 30, 30, 29, 29, 28, 28, 27, 27, 26, 26, 25, 25, 24, 24, 23, 23, 22, 22, 21, 21, n , n , n , n , n , n ]
, [n , n , n , n , 30, 30, 29, 29, 28, 28, 27, 27, 26, 26, 25, 25, 24, 24, 23, 23, 22, 22, 21, 21, n , n , n , n , n , n ]
- , [n , n , 42, 42, 41, 41, 40, 40, 39, 39, 38, 38, 37, 37, 36, 36, 35, 35, 34, 34, 33, 33, 32, 32, 31, 31, n , n , n , n ]
- , [45, 45, 42, 42, 41, 41, 40, 40, 39, 39, 38, 38, 37, 37, 36, 36, 35, 35, 34, 34, 33, 33, 32, 32, 31, 31, 44, 44, 43, 43]
- , [45, 45, 57, 57, 56, 56, 55, 55, 54, 54, 53, 53, 52, 52, 51, 51, 50, 50, 49, 49, 48, 48, 47, 47, 46, 46, 44, 44, 43, 43]
- , [n , n , 57, 57, 56, 56, 55, 55, 54, 54, 53, 53, 52, 52, 51, 51, 50, 50, 49, 49, 48, 48, 47, 47, 46, 46, n , n , n , n ]
+ , [n , n , 44, 44, 43, 43, 42, 42, 41, 41, 40, 40, 39, 39, 38, 38, 37, 37, 36, 36, 35, 35, 34, 34, 33, 33, n , n , n , n ]
+ , [57, 57, 44, 44, 43, 43, 42, 42, 41, 41, 40, 40, 39, 39, 38, 38, 37, 37, 36, 36, 35, 35, 34, 34, 33, 33, 32, 32, 31, 31]
+ , [57, 57, 56, 56, 55, 55, 54, 54, 53, 53, 52, 52, 51, 51, 50, 50, 49, 49, 48, 48, 47, 47, 46, 46, 45, 45, 32, 32, 31, 31]
+ , [n , n , 56, 56, 55, 55, 54, 54, 53, 53, 52, 52, 51, 51, 50, 50, 49, 49, 48, 48, 47, 47, 46, 46, 45, 45, n , n , n , n ]
, [n , n , n , n , 67, 67, 66, 66, 65, 65, 64, 64, 63, 63, 62, 62, 61, 61, 60, 60, 59, 59, 58, 58, n , n , n , n , n , n ]
, [n , n , n , n , 67, 67, 66, 66, 65, 65, 64, 64, 63, 63, 62, 62, 61, 61, 60, 60, 59, 59, 58, 58, n , n , n , n , n , n ]
, [n , n , n , n , n , n , 75, 75, 74, 74, 73, 73, 72, 72, 71, 71, 70, 70, 69, 69, 68, 68, n , n , n , n , n , n , n , n ]
View
80 public/css/whatajong.css
@@ -1,7 +1,79 @@
body {
margin: 0;
- background: red url(../images/background.jpg) repeat top left;
- padding: 20px;
+ padding: 0;
+ background: url(../images/background.jpg) repeat top left;
+ color: #b80;
+ font-family: 'Passero One', cursive;
+ text-shadow: 1px 1px 0px #fe4;
+}
+
+h1 {
+ font-size: 36pt;
+ margin: 0px 0px 20px;
+ font-family: 'Leckerli One', cursive;
+ opacity: 0.8;
+}
+
+#container {
+ margin: 0 auto;
+ position: relative;
+}
+
+#points {
+ position: absolute;
+ top: -5px;
+ right: 0px;
+ font-size: 32pt;
+ opacity: 0.8;
+ color: #333;
+}
+
+#time {
+ position: absolute;
+ top: 40px;
+ right: 0px;
+ font-size: 24pt;
+ opacity: 0.8;
+}
+
+#danger {
+ background: url(/images/danger.png) repeat-y top left;
+ width: 124px;
+ height: 15px;
+ opacity: 0.7;
+ position: absolute;
+ top: 30px;
+ left: 350px;
+ border-top: 1px solid #b80;
+ border-left: 1px solid #b80;
+ border-right: 1px solid #fe4;
+ border-bottom: 1px solid #fe4;
+ -moz-border-radius: 3px;
+ -webkit-border-radius: 3px;
+ border-radius: 3px;
+}
+
+#danger #num_pairs {
+ position: absolute;
+ top: -25px;
+ height: 20px;
+ width: 24px;
+ text-align: center;
+ background: #ff9;
+ -moz-border-radius: 3px;
+ -webkit-border-radius: 3px;
+ border-radius: 3px;
+ border-top: 1px solid #b80;
+ border-left: 1px solid #b80;
+ border-right: 1px solid #fe4;
+ border-bottom: 1px solid #fe4;
+}
+
+.points {
+ position: absolute;
+ font-size: 32pt;
+ color: #8b3;
+ text-shadow: 2px 2px 1px #690;
}
.mouse{
@@ -12,3 +84,7 @@ body {
z-index: 100;
background-image: url('../images/cursor.png');
}
+
+#canvas {
+ position: relative;
+}
View
BIN public/images/danger.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
12 public/index.html
@@ -1,6 +1,7 @@
<!DOCTYPE html>
<html lang="en">
<head>
+ <link href='http://fonts.googleapis.com/css?family=Passero+One|Leckerli+One' rel='stylesheet' type='text/css'>
<meta charset="utf-8">
<title>Whatajong</title>
<link rel="stylesheet" href="/css/whatajong.css" type="text/css" media="screen">
@@ -13,7 +14,14 @@
<script src="/js/client.js"></script>
</head>
<body>
- <a href='#' id='restart'>restart</a>
- <div id='canvas'></div>
+ <div id='container'>
+ <h1>Whatajong</h1>
+ <div id='danger'>
+ <div id='num_pairs'></div>
+ </div>
+ <div id='time'></div>
+ <div id='points'></div>
+ <div id='canvas'></div>
+ </div>
</body>
</html>
View
283 public/js/client.js
@@ -9,18 +9,31 @@ $(function () {
, COLUMNS = 8
, ROWS = 15
, ALPHA_HIDE = 0.25
- , paper = Raphael(
- $('#canvas').get(0)
- , (ROWS * TILE_WIDTH) + (2 * SIDE_SIZE), (COLUMNS * TILE_HEIGHT) + (2 * SIDE_SIZE)
- )
- , svgs = [], images = [], shapes = [];
+ , CANVAS_WIDTH = (ROWS * TILE_WIDTH) + (2 * SIDE_SIZE)
+ , CANVAS_HEIGHT = (COLUMNS * TILE_HEIGHT) + (2 * SIDE_SIZE)
+ , paper = Raphael($('#canvas').get(0), CANVAS_WIDTH, CANVAS_HEIGHT)
+ , svgs = [], images = [], shapes = [], shadows = [];
+ $('#container').css('width', CANVAS_WIDTH);
$('#restart').click(function () {
socket.emit('restart');
});
+ function _formatTime(val) {
+ var hours = val / 3600 | 0
+ , minutes = (val - (hours * 3600)) / 60 | 0
+ , seconds = val - (hours * 3600) - (minutes * 60)
+ , hours_s = hours < 10 ? "0" + hours : hours
+ , minutes_s = minutes < 10 ? "0" + minutes : minutes
+ , seconds_s = seconds < 10 ? "0" + seconds : seconds;
+
+ hours_s = hours === 0 ? "" : hours_s + ":";
+
+ return hours_s + minutes_s + ":" + seconds_s;
+ }
+
function onSetup(APP) {
- var TILE = Tile(APP.current_map, socket);
+ var TILE = Tile(APP.current_map);
function updateTileState(cb) {
return function (tile) {
@@ -36,6 +49,76 @@ $(function () {
};
}
+ function setShadows(tile) {
+ var shadow = shadows[tile.i]
+ , up = TILE.getUpTiles(tile)
+ , right = TILE.getRightTiles(tile)
+ , some
+ , has_living_up = false
+ , has_living_right = false;
+
+ // init
+ shadow.up.show();
+ shadow.right.show();
+ _.each(['up_both', 'right_both', 'up_climb', 'right_climb'], function (el) {
+ shadow[el].hide();
+ });
+
+ // check up
+ _.each(up, function (el) {
+ if (!APP.tiles[el].is_deleted) {
+ shadow.up.hide();
+ has_living_up = true;
+ }
+ });
+
+ // check right
+ _.each(right, function (el) {
+ if (!APP.tiles[el].is_deleted) {
+ shadow.right.hide();
+ has_living_right = true;
+ }
+ });
+
+ // check right-up
+ if (!has_living_up) {
+ shadow.up_both.show();
+ shadow.up_climb.show();
+ some = _.some(right, function (el) {
+ var some = _.some(TILE.getUpTiles(APP.tiles[el]), function (el) {
+ return !APP.tiles[el].is_deleted;
+ });
+
+ return some;
+ });
+
+ if (!some) {
+ shadow.up_climb.hide();
+ } else {
+ shadow.up_both.hide();
+ }
+ }
+
+ // check up-right
+ if (!has_living_right) {
+ shadow.right_both.show();
+ shadow.right_climb.show();
+ some = _.some(up, function (el) {
+ var some = _.some(TILE.getRightTiles(APP.tiles[el]), function (el) {
+ return !APP.tiles[el].is_deleted;
+ });
+
+ return some;
+ });
+
+ if (!some) {
+ shadow.right_climb.hide();
+ } else {
+ shadow.right_both.hide();
+ }
+ }
+ }
+
function makeBetterVisibility(tile, val) {
var left_tiles = TILE.getLeftTiles(tile);
@@ -46,7 +129,7 @@ $(function () {
}
}
- if (left_tiles.length && TILE.isFree(tile)) {
+ if (left_tiles.length) {
// 1 level
_.each(left_tiles, function (left) {
var left_top_tiles = TILE.getTopTiles(APP.tiles[left]);
@@ -95,17 +178,27 @@ $(function () {
}
}
+ function _getRealCoordinates(tile) {
+ var x = (tile.x - 1) * TILE_WIDTH / 2 | 0
+ , y = SIDE_SIZE + (tile.y * TILE_HEIGHT / 2 | 0)
+ , z = tile.z;
+
+ x = z ? x + (z * SIDE_SIZE) : x;
+ y = z ? y - (z * SIDE_SIZE) : y;
+
+ return {x: x, y: y};
+ }
+
function renderTile(tile) {
- var x = (tile.x - 1) * 45 / 2 | 0
- , y = tile.y * 65 / 2 | 0
+ var coords = _getRealCoordinates(tile)
+ , x = coords.x
+ , y = coords.y
, z = tile.z
- //, shadow_attr = {stroke: '', fill: '#000', 'fill-opacity': 0.1}
+ , shadow_attr = {stroke: '', fill: '#000', 'fill-opacity': 0.1}
, set = paper.set()
, image_loc = getImageLocation(tile.cardface)
- , left_side, bottom_side, body, shape, /*shadow_right, shadow_up,*/ image;
-
- x = z ? x + (z * SIDE_SIZE) : x;
- y = SIDE_SIZE + (z ? y - (z * SIDE_SIZE) : y);
+ , left_side, bottom_side, body, shape, shadow_right, shadow_up
+ , shadow_up_climb, shadow_right_climb, shadow_up_both, shadow_right_both, image;
left_side = paper.path([ 'M', x, y + SIDE_SIZE, 'L', x + SIDE_SIZE, y, 'L', x + SIDE_SIZE, y + TILE_HEIGHT
, 'L', x, y + TILE_THEIGHT, 'L', x, y + SIDE_SIZE].join(' '));
@@ -118,31 +211,52 @@ $(function () {
shape = paper.path([ 'M', x, y + SIDE_SIZE, 'L', x + SIDE_SIZE, y, 'L', x + TILE_TWIDTH, y
, 'L', x + TILE_TWIDTH, y + TILE_HEIGHT, 'L', x + TILE_WIDTH, y + TILE_THEIGHT
, 'L', x, y + TILE_THEIGHT, 'L', x, y + SIDE_SIZE].join(' '));
- //shadow_up = paper.path([ 'M', x + SIDE_SIZE, y, 'L', x + (2 * SIDE_SIZE), y - SIDE_SIZE
- // , 'L', x + TILE_TWIDTH - SIDE_SIZE, y - SIDE_SIZE, 'L', x + TILE_TWIDTH - SIDE_SIZE, y
- // , 'L', x + SIDE_SIZE, y].join(' '));
- //shadow_right = paper.path([ 'M', x + TILE_TWIDTH, y + SIDE_SIZE, 'L', x + TILE_TWIDTH + SIDE_SIZE, y + SIDE_SIZE
- // , 'L', x + TILE_TWIDTH + SIDE_SIZE, y + TILE_HEIGHT - SIDE_SIZE
- // , 'L', x + TILE_TWIDTH, y + TILE_HEIGHT, 'L', x + TILE_TWIDTH, y + SIDE_SIZE
- // ].join(' '));
+ shadow_up = paper.path([ 'M', x + SIDE_SIZE, y, 'L', x + (2 * SIDE_SIZE), y - SIDE_SIZE
+ , 'L', x + TILE_TWIDTH - SIDE_SIZE, y - SIDE_SIZE, 'L', x + TILE_TWIDTH - SIDE_SIZE, y
+ , 'L', x + SIDE_SIZE, y].join(' '));
+ shadow_up_climb = paper.path([ 'M', x + TILE_TWIDTH - SIDE_SIZE, y - SIDE_SIZE, 'L', x + TILE_TWIDTH, y - SIDE_SIZE * 2
+ , 'L', x + TILE_TWIDTH, y, 'L', x + TILE_TWIDTH - SIDE_SIZE, y
+ , 'L', x + TILE_TWIDTH - SIDE_SIZE, y - SIDE_SIZE].join(' '));
+ shadow_right_climb = paper.path([ 'M', x + TILE_TWIDTH, y, 'L', x + TILE_TWIDTH + 2 * SIDE_SIZE, y
+ , 'L', x + TILE_TWIDTH + SIDE_SIZE, y + SIDE_SIZE, 'L', x + TILE_TWIDTH, y + SIDE_SIZE
+ , 'L', x + TILE_TWIDTH, y].join(' '));
+ shadow_up_both = paper.path([ 'M', x + TILE_TWIDTH - SIDE_SIZE, y - SIDE_SIZE, 'L', x + TILE_TWIDTH + SIDE_SIZE, y - SIDE_SIZE
+ , 'L', x + TILE_TWIDTH, y, 'L', x + TILE_TWIDTH - SIDE_SIZE, y
+ , 'L', x + TILE_TWIDTH - SIDE_SIZE, y - SIDE_SIZE].join(' '));
+ shadow_right_both = paper.path([ 'M', x + TILE_TWIDTH, y, 'L', x + TILE_TWIDTH + SIDE_SIZE, y - SIDE_SIZE
+ , 'L', x + TILE_TWIDTH + SIDE_SIZE, y + SIDE_SIZE, 'L', x + TILE_TWIDTH, y + SIDE_SIZE
+ , 'L', x + TILE_TWIDTH, y - SIDE_SIZE].join(' '));
+ shadow_right = paper.path([ 'M', x + TILE_TWIDTH, y + SIDE_SIZE, 'L', x + TILE_TWIDTH + SIDE_SIZE, y + SIDE_SIZE
+ , 'L', x + TILE_TWIDTH + SIDE_SIZE, y + TILE_HEIGHT - SIDE_SIZE
+ , 'L', x + TILE_TWIDTH, y + TILE_HEIGHT, 'L', x + TILE_TWIDTH, y + SIDE_SIZE
+ ].join(' '));
left_side.attr({fill: '#FFBB89', stroke: ''});
bottom_side.attr({fill: '#FF9966', stroke: ''});
body.attr({fill: '#FEE1A9', stroke: ''});
image.attr({'clip-rect': [x + SIDE_SIZE, y, TILE_WIDTH, TILE_HEIGHT]});
shape.attr({stroke: '#664433', 'stroke-width': 2, cursor: 'pointer', fill: '#fff', 'fill-opacity': 0});
- // shadow attr
- //$.each([shadow_up, shadow_right], function (i, el) {
- // el.attr(shadow_attr);
- //});
+ $.each([ shadow_up, shadow_right, shadow_up_climb, shadow_right_climb
+ , shadow_up_both, shadow_right_both], function (i, el) {
+ el.attr(shadow_attr);
+ });
- set.push(left_side, bottom_side, body, shape, /*shadow_up, shadow_right, */image);
+ set.push(left_side, bottom_side, body, image, shape
+ , shadow_up, shadow_right, shadow_up_climb, shadow_right_climb
+ , shadow_up_both, shadow_right_both);
svgs[tile.i] = set;
images[tile.i] = image;
shapes[tile.i] = shape;
-
+ shadows[tile.i] = {
+ up: shadow_up
+ , right: shadow_right
+ , up_climb: shadow_up_climb
+ , right_climb: shadow_right_climb
+ , up_both: shadow_up_both
+ , right_both: shadow_right_both
+ };
shape.click(function () {
socket.emit('tile.clicked', tile);
@@ -162,21 +276,12 @@ $(function () {
}
function drawBoard(tiles) {
- var map = APP.current_map
- , i = 0
- , same_as_prev, same_as_above, z, y, x;
-
- for (z = 0; z < map.length; z++) {
- for (y = 0; y < map[z].length; y++) {
- for (x = map[z][y].length - 1; x > 0 ; x--) {
- same_as_prev = map[z][y][x + 1] ? map[z][y][x + 1] === map[z][y][x] : false;
- same_as_above = map[z][y - 1] ? map[z][y - 1][x] === map[z][y][x] : false;
- if (map[z][y][x] && !same_as_prev && !same_as_above) {
- i++;
- TILE.setPosition(tiles[i], x, y, z);
- renderTile(tiles[i]);
- }
- }
+ var i, tile;
+
+ for (i = 1; i <= tiles.length; i++) {
+ if (tiles[i] && !tiles[i].is_deleted) {
+ renderTile(tiles[i]);
+ setShadows(tiles[i]);
}
}
}
@@ -189,20 +294,104 @@ $(function () {
socket.on('tile.unselected', updateTileState(function (tile) {
shapes[tile.i].attr({fill: '#FFFFFF', 'fill-opacity': 0});
+ console.log('shaking');
+ svgs[tile.i].animate({
+ '20%': {translation: '3 0'}
+ , '40%': {translation: '-3 0'}
+ , '60%': {translation: '3 0'}
+ , '80%': {translation: '-3 0'}
+ , '100%': {translation: '0 0'}
+ }, 500);
}));
- socket.on('tile.deleted', updateTileState(function (tile) {
- svgs[tile.i].remove();
- makeBetterVisibility(tile, false);
- }));
+ socket.on('tiles.deleted', function (data) {
+ var coords = _getRealCoordinates(data.tiles[0])
+ , $points = $('<span class="points">+' + data.points + '</span>');
+
+ $points.css({left: coords.x, top: coords.y});
+ $('#canvas').append($points);
+
+ $points.animate({top: '-=100', opacity: 0}, 2000, function () {
+ $points.remove();
+ });
+
+ function generateStar(tile) {
+ var star = paper.path('M0 30 L25 25 L30 0 L35 25 L60 30 L35 35 L30 60 L25 35 L0 30')
+ , coords = _getRealCoordinates(tile)
+ , x = coords.x + Math.random() * 50 - Math.random() * 50
+ , y = coords.y + Math.random() * 50 - Math.random() * 50
+ , move_y = Math.random() * 200
+ , move_x = Math.random() * 100 - Math.random() * 100
+ , scale = Math.random() / 2;
+
+ star
+ .scale(scale, scale)
+ .rotate(Math.random() * 360)
+ .translate(x, y)
+ .attr({fill: '#FF9', stroke: ''})
+ .animate({translation: [move_x, -move_y].join(' '), opacity: 0}, 2000, '>', function () {
+ star.remove();
+ });
+ }
+
+ function shadowing(tile) {
+ _.each(TILE.getLeftTiles(tile), function (el) {
+ if (!APP.tiles[el].is_deleted) {
+ setShadows(APP.tiles[el]);
+ _.each(TILE.getDownTiles(APP.tiles[el]), function (el) {
+ if (!APP.tiles[el].is_deleted) {
+ setShadows(APP.tiles[el]);
+ }
+ });
+ }
+ });
+
+ _.each(TILE.getDownTiles(tile), function (el) {
+ if (!APP.tiles[el].is_deleted) {
+ console.log('DOWN DELETED', APP.tiles[el]);
+ setShadows(APP.tiles[el]);
+ _.each(TILE.getLeftTiles(APP.tiles[el]), function (el) {
+ if (!APP.tiles[el].is_deleted) {
+ setShadows(APP.tiles[el]);
+ }
+ });
+ }
+ });
+ }
+
+ _.each(data.tiles, updateTileState(function (tile) {
+ _.times(5, function () {
+ generateStar(tile);
+ });
+
+ shadowing(tile);
+
+ svgs[tile.i].animate({opacity: 0}, 300, '>', function () {
+ svgs[tile.i].remove();
+ makeBetterVisibility(tile, false);
+ });
+ }));
+ });
socket.on('map.changed', updateMapState(function (map) {
APP.current_map = map;
- TILE = Tile(APP.current_map, socket);
+ TILE = Tile(APP.current_map);
}));
}
// init
socket.emit('client.connected', onSetup);
socket.on('setup', onSetup);
+ socket.on('num_pairs.changed', function (num_pairs) {
+ $('#num_pairs')
+ .animate({left: num_pairs < 13 ? 100 - (num_pairs * 100 / 12) : 0}, 300)
+ .text(num_pairs);
+ });
+ socket.on('tick', function (data) {
+ $('#time').text(_formatTime(data.time));
+ $('#points').text(data.points);
+ });
+
+ $('#time').text('00:00');
+ $('#points').text('0');
});
View
33 public/js/tile.js
@@ -1,20 +1,35 @@
-(typeof exports === 'undefined' ? this : exports).Tile = function (current_map, sockets) {
+(typeof exports === 'undefined' ? this : exports).Tile = function (current_map) {
var TILE = {};
function _getPosition(z, y, x) {
return ((current_map[z] || {})[y] || {})[x];
}
TILE.getTopTiles = function getTopTiles(tile) {
- return _.compact([ _getPosition(tile.z + 1, tile.y, tile.x)
- , _getPosition(tile.z + 1, tile.y, tile.x - 1)
- , _getPosition(tile.z + 1, tile.y + 1, tile.x)
- , _getPosition(tile.z + 1, tile.y + 1, tile.x - 1)]);
+ return _.compact(_.uniq([ _getPosition(tile.z + 1, tile.y, tile.x)
+ , _getPosition(tile.z + 1, tile.y, tile.x - 1)
+ , _getPosition(tile.z + 1, tile.y + 1, tile.x)
+ , _getPosition(tile.z + 1, tile.y + 1, tile.x - 1)]));
+ }
+
+ TILE.getDownTiles = function getDownTiles(tile) {
+ return _.compact(_.uniq([ _getPosition(tile.z, tile.y + 2, tile.x)
+ , _getPosition(tile.z, tile.y + 2, tile.x - 1)]));
+ }
+
+ TILE.getUpTiles = function getUpTiles(tile) {
+ return _.compact(_.uniq([ _getPosition(tile.z, tile.y - 1, tile.x)
+ , _getPosition(tile.z, tile.y - 1, tile.x - 1)]));
+ }
+
+ TILE.getRightTiles = function getRightTiles(tile) {
+ return _.compact(_.uniq([ _getPosition(tile.z, tile.y, tile.x + 1)
+ , _getPosition(tile.z, tile.y + 1, tile.x + 1)]));
}
TILE.getLeftTiles = function getLeftTiles(tile) {
- return _.compact([ _getPosition(tile.z, tile.y, tile.x - 2)
- , _getPosition(tile.z, tile.y + 1, tile.x - 2)]);
+ return _.compact(_.uniq([ _getPosition(tile.z, tile.y, tile.x - 2)
+ , _getPosition(tile.z, tile.y + 1, tile.x - 2)]));
}
TILE.hasTopTiles = function hasTopTiles(tile) {
@@ -26,7 +41,7 @@
}
TILE.hasRightTiles = function hasRightTiles(tile) {
- return !!(_getPosition(tile.z, tile.y, tile.x + 1) || _getPosition(tile.z, tile.y + 1, tile.x + 1));
+ return !!TILE.getRightTiles(tile).length;
}
TILE.isFree = function (tile) {
@@ -39,8 +54,6 @@
current_map[tile.z][tile.y][tile.x - 1] = null;
current_map[tile.z][tile.y + 1][tile.x] = null;
current_map[tile.z][tile.y + 1][tile.x - 1] = null;
- sockets.emit('tile.deleted', tile);
- sockets.emit('map.changed', current_map);
}
TILE.setPosition = function (tile, x, y, z) {
View
123 server.js
@@ -2,9 +2,12 @@ var app, io
, node_static = require('node-static')
, file_server = new node_static.Server('./public')
, APP = { tiles: []
+ , time: 0
+ , points: 250
, selected_tile: null
, TOTAL_TILES: 144
}
+ , POINTS_PER_SECOND = 2
, Tile;
GLOBAL._ = require('underscore');
@@ -16,6 +19,7 @@ app = require('http').createServer(function (request, response) {
});
io = require('socket.io').listen(app);
+io.set('log level', 1);
app.listen(3000);
io.sockets.on('connection', function (socket) {
@@ -25,32 +29,64 @@ io.sockets.on('connection', function (socket) {
});
socket.on('tile.clicked', function (tile) {
+ var points;
+
if (Tile.isFree(tile)) {
// First selection
if (APP.selected_tile === null) {
APP.selected_tile = tile;
- tile.selected = true;
- io.sockets.emit('tile.selected', tile);
+ APP.tiles[tile.i].selected = true;
+ io.sockets.emit('tile.selected', APP.tiles[tile.i]);
// Second selection
} else if (APP.isMatching(APP.selected_tile.cardface, tile.cardface) && APP.selected_tile.i !== tile.i) {
// delete the tiles
- Tile['delete'](tile);
- Tile['delete'](APP.selected_tile);
+ Tile['delete'](APP.tiles[tile.i]);
+ Tile['delete'](APP.tiles[APP.selected_tile.i]);
+ io.sockets.emit('map.changed', APP.current_map);
+
+ APP.remaining_tiles -= 2;
+ APP.num_pairs = APP.getNumPairs();
+ points = (POINTS_PER_SECOND * 3) + Math.ceil(
+ (APP.TOTAL_TILES - APP.remaining_tiles) / APP.TOTAL_TILES * POINTS_PER_SECOND * 60
+ );
+ APP.points += points;
+ io.sockets.emit('tiles.deleted', {
+ tiles: [
+ APP.tiles[tile.i]
+ , APP.tiles[APP.selected_tile.i]
+ ]
+ , points: points
+ });
APP.selected_tile = null;
- APP.remainingTiles -= 2;
+
+ if (!APP.num_pairs || !APP.remaining_tiles) {
+ // loose
+ if (!APP.num_pairs) {
+ io.sockets.emit('game.loose');
+ // win
+ } else {
+ io.sockets.emit('game.win');
+ }
+ }
+
+ io.sockets.emit('num_pairs.changed', APP.num_pairs);
// don't match or the same tile
} else {
- io.sockets.emit('tile.unselected', APP.selected_tile);
- io.sockets.emit('tile.unselected', tile);
- tile.selected = false;
+ if (APP.selected_tile.i !== tile.i) {
+ io.sockets.emit('tile.unselected', APP.tiles[APP.selected_tile.i]);
+ }
+ io.sockets.emit('tile.unselected', APP.tiles[tile.i]);
+ APP.tiles[tile.i].selected = false;
APP.selected_tile = null;
}
}
});
socket.on('client.connected', function (fn) {
fn({tiles: APP.tiles, current_map: APP.current_map});
+ socket.emit('num_pairs.changed', APP.num_pairs);
+ socket.emit('tick', {time: APP.time, points: APP.points});
});
// mouse.js
@@ -128,25 +164,77 @@ function _shuffle(tiles) {
}
function _instantiateTiles(tiles) {
- var i, tile;
+ var map = APP.current_map
+ , i = 1
+ , same_as_prev, same_as_above, z, y, x;
- for (i = 1; i <= APP.TOTAL_TILES; i++) {
- tiles[i] = {cardface: tiles[i], i: i};
+ for (z = 0; z < map.length; z++) {
+ for (y = 0; y < map[z].length; y++) {
+ for (x = map[z][y].length - 1; x > 0 ; x--) {
+ same_as_prev = map[z][y][x + 1] ? map[z][y][x + 1] === map[z][y][x] : false;
+ same_as_above = map[z][y - 1] ? map[z][y - 1][x] === map[z][y][x] : false;
+ if (map[z][y][x] && !same_as_prev && !same_as_above) {
+ tiles[i] = {cardface: tiles[i], i: map[z][y][x], x: x, y: y, z: z};
+ i++;
+ }
+ }
+ }
}
}
-// first time
-APP.init = function () {
- APP.setup();
-};
+function _eachSecond() {
+ APP.time++;
+ APP.points = APP.points <= 0 ? 0 : APP.points - POINTS_PER_SECOND;
+ io.sockets.emit('tick', {time: APP.time, points: APP.points});
+}
+
+APP.getNumPairs = function () {
+ var free_tiles = APP.getFreeTiles()
+ , num_pairs = 0
+ , i;
+
+ for (i = 0; i < free_tiles.length - 1; i++) {
+ if (APP.isMatching(free_tiles[i].cardface, free_tiles[i + 1].cardface)) {
+ i++;
+ num_pairs++;
+ }
+ }
+ return num_pairs;
+}
+
+APP.getFreeTiles = function () {
+ var free_tiles = [], i, current_tile;
+
+ for (i = 1; i <= APP.TOTAL_TILES; i++) {
+ current_tile = APP.tiles[i];
+
+ if (Tile.isFree(current_tile) && !current_tile.is_deleted) {
+ free_tiles.push(current_tile);
+ }
+ }
+
+ free_tiles = _.sortBy(free_tiles, function (el) {
+ return el.cardface;
+ });
+
+ return free_tiles;
+}
// for each game
APP.setup = function () {
APP.tiles = _shuffle(_getDeck());
APP.current_map = require('./maps/default')();
- Tile = require('./public/js/tile').Tile(APP.current_map, io.sockets);
+ Tile = require('./public/js/tile').Tile(APP.current_map);
_instantiateTiles(APP.tiles);
+ APP.tiles = _.sortBy(APP.tiles, function (el) {
+ return el && el.i;
+ });
+ APP.tiles.unshift(undefined);
io.sockets.emit('setup', {tiles: APP.tiles, current_map: APP.current_map});
+ APP.num_pairs = APP.getNumPairs();
+ APP.remaining_tiles = APP.TOTAL_TILES;
+ io.sockets.emit('num_pairs.changed', APP.num_pairs);
+ APP.interval = setInterval(_eachSecond, 1000);
};
APP.isMatching = function (first_tile, second_tile) {
@@ -166,4 +254,5 @@ APP.isMatching = function (first_tile, second_tile) {
}
};
-APP.init();
+// start!
+APP.setup();

0 comments on commit e0f1b57

Please sign in to comment.