Permalink
Browse files

Moving blocks! Yeah!

  • Loading branch information...
0 parents commit 4a05fa21f42b123705efd5d0652e2add95ce0363 @jlfwong committed Oct 13, 2011
Showing with 303 additions and 0 deletions.
  1. +8 −0 config.js
  2. +118 −0 scripts/puzzle.coffee
  3. +137 −0 scripts/puzzle.js
  4. +29 −0 scripts/underscore-min.js
  5. +11 −0 templates/index.jade
@@ -0,0 +1,8 @@
+module.exports = {
+ web: {
+ },
+ debug: {
+ },
+ release: {
+ }
+};
@@ -0,0 +1,118 @@
+CELL_SIZE = 100
+ABOVE = 0
+RIGHT = 1
+LEFT = 2
+BELOW = 3
+
+directionToDelta = (direction) ->
+ switch direction
+ when ABOVE then [-1, 0]
+ when RIGHT then [0, 1]
+ when BELOW then [1, 0]
+ when LEFT then [0, -1]
+
+INIT_GRID = [
+ [1 , 2 , 3 , 4 ]
+ [5 , 6 , 7 , 8 ]
+ [9 , 10 , 11 , 12 ]
+ [13 , 14 , 15 , 0 ]
+]
+
+class PuzzleCellView
+ constructor: (num) ->
+ @node = $ "<div/>",
+ text: num
+ css:
+ width : "#{CELL_SIZE - 2}px"
+ height : "#{CELL_SIZE - 2}px"
+ textAlign : "center"
+ lineHeight : "#{CELL_SIZE}px"
+ fontSize : "30px"
+ border : "1px solid black"
+ position : "absolute"
+
+ origRowNum = parseInt((num - 1) / 4, 10)
+ origColNum = parseInt((num - 1) % 4, 10)
+
+ if (origRowNum + origColNum) % 2 == 0
+ @node.css
+ backgroundColor: 'black'
+ color: 'white'
+ else
+ @node.css
+ backgroundColor: 'white'
+ color: 'black'
+
+ setPosition: (rowNum, colNum, duration=0, cb=$.noop) ->
+ @node.animate {
+ top : "#{rowNum * CELL_SIZE}px"
+ left : "#{colNum * CELL_SIZE}px"
+ }, duration, cb
+
+class PuzzleGridView
+ constructor: ($el, grid) ->
+ $el.css
+ position : "relative"
+ width : "#{4 * CELL_SIZE}px"
+ height : "#{4 * CELL_SIZE}px"
+
+ @moveQueue = []
+ @cellViews = []
+
+ for rowNum of grid
+ rowNum = parseInt(rowNum, 10)
+ @cellViews[rowNum] = []
+ for colNum of grid[rowNum]
+ colNum = parseInt(colNum, 10)
+
+ num = grid[rowNum][colNum]
+
+ if num == 0
+ cell = null
+ @emptyPos = [rowNum, colNum]
+ if num != 0
+ cell = new PuzzleCellView(num)
+ cell.setPosition rowNum, colNum
+
+ $el.append(cell.node)
+
+ @cellViews[rowNum].push(cell)
+
+ queueMoves: (moves) ->
+ @moveQueue = @moveQueue.concat(moves)
+
+ runQueue: (duration) ->
+ if @moveQueue.length != 0
+ @moveFrom @moveQueue.shift(), duration, =>
+ @runQueue(duration)
+
+ moveFrom: (sourceDirection, duration, cb) ->
+ [targetRow, targetCol] = @emptyPos
+ [deltaRow, deltaCol] = directionToDelta sourceDirection
+ @emptyPos = [sourceRow, sourceCol] = [
+ targetRow + deltaRow,
+ targetCol + deltaCol
+ ]
+
+ cellView = @cellViews[sourceRow][sourceCol]
+ @cellViews[targetRow][targetCol] = cellView
+ @cellViews[sourceRow][sourceCol] = null
+
+ cellView.setPosition targetRow, targetCol, duration, cb
+
+class Grid
+ constructor: (grid, emptyPos) ->
+ @emptyPos = _.clone emptyPos
+
+ @grid = []
+ for row in grid
+ @grid.push _.clone(row)
+
+class @Puzzle
+ constructor: ($el) ->
+ @grid = new Grid(INIT_GRID, [3, 3])
+
+ @gridView = new PuzzleGridView($el, INIT_GRID)
+
+ @gridView.queueMoves [ABOVE, LEFT, ABOVE, LEFT]
+ @gridView.runQueue(150)

Some generated files are not rendered by default. Learn more.

Oops, something went wrong.

Some generated files are not rendered by default. Learn more.

Oops, something went wrong.
@@ -0,0 +1,11 @@
+!!! 5
+html(lang="en")
+ head
+ title Sliding Puzzle
+ script(src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js")
+ script(src="scripts/underscore-min.js")
+ script(src="scripts/puzzle.js")
+ body
+ #puzzle
+ script
+ var puzzle = new Puzzle($('#puzzle'))

0 comments on commit 4a05fa2

Please sign in to comment.