sketch.js - addyh/tetris GitHub Wiki

• This is the main Javascript file where everything comes together
• The entire game is implemented here
• It defines the entire canvas, or "sketch"

Setup

setup()

• Called one time, at page ready
• Initializes Global Variables
  • board - Object of Board class
  • piece - Object of Piece class
  • mainCanvas - the Canvas we draw to
  • hiscoreInput - an Input box if they get the High Score
• Other Globals:
  • gridSize - (default 50px) the pixel size of 1 block
  • gridWidth, gridHeight - (default 12) how many blocks wide/high is the grid?
  • function getBestName() - defined externally -- High score name
  • function getBestScore() - defined externally -- High score

Draw Loop

draw()

• Called once every frame
• Clears the screen
• Then, re-draws the entire canvas
  • Including: game border, grid, current score, personal best

Start Screen

startScreen()

• Called from draw() -- runs once every frame (if we are on the start screen)
• (!gameStarted && !gameOver)
• Draws the Start Screen
  • Start Game button
  • Current high score
  • Change Difficulty button

Game Over Screen

gameOverScreen()

• Called from draw() -- runs once every frame (when the game is over)
• (gameStarted && gameOver)
• If player beat the High Score
  • Shows hiscoreInput for their name
  • Submit button to send new High Score
• Else player did not beat High Score
  • Try Again
  • Change Difficulty

Main Game-Play Loop

gameLoop()

• Called from draw() -- runs once every frame (during game-play itself)
• (gameStarted && !gameOver)
• Draws the current piece onto the board (piece.matrix) (4x4)
• Draws all old pieces stacked onto the board (board.matrix) (12x12)
• Calls piece.lower() to drop the piece by 1 block each frame
• Handles keypresses

---