amosyu2000/blokkus

Winter break project '19 by @andytule and @amosyu2000. Based on Blokus by Mattel Games.

Blokkus

By Andy Le and Amos Yu.
Project started December 19, 2019 and finished January 9, 2020.

Play

Hosted at amosyu2000.github.io/blokkus and at andytule.github.io/projects/blokkus.

Rules of the game (From UltraBoardGames).

About

Blokkus is based off of the award-winning game Blokus by Mattel Games. Compete to place as many of your pieces as possible on the board in this strategic turn-based board game. Supports 2, 3, and 4-player. Blokkus was implemented using HTML/CSS/JS. The 3D pieces were designed in Blender.

Libraries used:

• jQuery
• three.js
• Camera Controls

blokkus's Issues

Initial Ideas

Blokus Gameplay Rules

• Pieces must connect through a corner
• Set of pieces per player here.
• Game ends when all players can no longer place a piece

Notes

• Grid lines on board have thickness (so not infinitesimally small)
• Each player will have pieces lying in front of them
• Board rotates after each player's turn
• When piece is clicked, It hovers slightly and glows (for ex. see "minecraft glowing effect")
• Left-click piece to select/deselect
• When piece is selected, a shadow appears on the board to help place the piece
• Piece is selected/placed with LMB
• Z for rotate CW, X for flip
• Counter for tiles remaining
• Leaderboard after game ends
• Concede button in the corner

Tile class

contains:

• type
• function isOverlapping() (validator function returns true or false)
• thickness y (static - same for all)
• 0 for empty tile, 1 for filled tile, -1 for corner

Piece class

contains:

• x- and z- dimensions for each piece
• matrix of Tile objects
• function setGlowing(bool) (bool either true or false)

camera-controls Documentation

I'm using the camera-controls.js library to move the camera around. The documentation can be found here.

Objectives for December 25, 2019

Amos

• Create home screen

Andy

• Create objects and classes for pieces and tiles
• Create functional game via console
  • Tile checking functions
  • Update game board function

How to interpret the new project structure

I reorganized the project. All the project files go in the blokkus folder, while all the git stuff (README, LICENSE) go outside.

In the blokkus folder, we keep the html files (so home.html is the home page and board.html is the page where the blokkus board game will be).

In the blokkus/resources folder, we keep .css files in the css folder and .js files in the js folder.

In the blokkus/vendors folder, we keep libraries (such as jquery and three.js).

Feel free to leave a comment if you have any concerns.