SCRABBLE RULES

Official Scrabble Rules Found Here.

NOTE: NOT ALL OFFICIAL RULES FULLY IMPLEMENTED.


Summary - TL;DR

I have implemented a full Scrabble board game using HTML, CSS and JavaScript. The game fully supports playing one word, and I have also added support for saving words and continuing to play more of them.

There are very few bugs for playing one word – I am able to restrict placement of tiles and where tiles can go. For playing multiple words, I have added some logic to the "droppable.js" file to detect valid positions to add tiles to. Because of the complexity of this logic, it is very possible that bugs will occur when playing multiple words. I highly recommend hitting the "Recall tiles" button should any weird bugs occur, such as letters appearing in the wrong order, or being unable to add onto a word.

Rules for this implementation of Scrabble

  1. Place your first letter at the SuperMario "Star" at the middle of the page.
  2. Add letters in the four allowed directions - up, down, left or right.
  3. Continue adding in either the Left/Right direction or Up/Down direction.
  4. Hit the "Submit Word" to check and see if a word is valid. Valid words may be saved, invalid words will need to become valid before you may save them.
  5. If a word is considered valid, you may press the "Save Word & Play Again" button that appears below the three main buttons ("Submit Word", "Recall Tiles", and "Reset Board")
  6. Continue spelling words and saving valid words (See Rules 2 - 5). You may do so until you've used up all your letters, at which point you'll need to reset the game board to keep playing words.

Features present in this version of Scrabble include:

  • Playing a single word, along with scoring for basic / double / triple tiles.
  • Playing multiple words, and scoring continues to add with each played word.
  • I have also made it so adding onto a saved word will count those played tiles as part of your word. So if a user plays "Hope" and then adds an "s" to the end of "hope" the displayed word becomes "hopes" and the score updates accordingly. See the bug selection for any issues with this feature.
  • “Letters Remaining” table updates as tiles are used and allows the user to see how many of a certain letter is remaining.
  • “Swap a tile” space is a droppable target that, when a tile a is dropped on it, replaces that tile with a random letter and moves back to the previous location (rack / game board)
  • Tiles can also be swapped – for the current word being played, just drop a tile on top of another tile, and the two will switch places (the old tile returns to the rack and the new tile is played)
  • Three buttons control submitting a word (saving a word to the game board so that you can play multiple words in one game), recalling tiles (this moves all tiles of the CURRENT word back to the rack. It does not mess with played tiles, which are part of saved words), and resetting the game board (which completely resets the board so that a new game of Scrabble can be played instead).
  • Warning and Success messages appear when needed, such as Start at the star and
    Place tiles at right angles
  • As a result, for creating one word, start at the middle star, and create a word in a straight line, either up and down or left and right.
  • For creating multiple words, add onto the middle of a word, or to the end of a word like adding an "S" to a created word. See example screen shots below.

Current bugs:

  • Blank tiles are not implemented.
  • Multiple words can cause the displayed word to show up incorrectly, especially when swapping tiles and changing the tiles around.

    • If bugs occur with the current word, I recommend hitting the “recall tiles” button to reset the CURRENT word while maintaining the game board as is.

  • Adding on to an already created word could create bugs. However, this works most of the time.

    • See above comment about bugs. When a bug occurs, which is possible considering the size of my code at the current point in time, it is best to just hit the "RECALL TILES" button to reset the CURRENT WORD. You may also hit reset board if that does not fix the issue.


The biggest issue is SCREEN RESOLUTION.

I have tested the game on a full HD monitor / laptop, and it displays fine. If you test this webpage on a smaller resolution device, it may display weird. There may be some scrolling to get to the tiles, or to the submit / reset buttons. I have tried messing with the Bootstrap grid to fix this, but it is a known problem with my web page. I recommend, if possible, viewing this webpage on a 1920 by 1080 resolution screen. Otherwise trying hitting F11 and make sure the browser is in full screen mode. It will likely display better, although you may need to hit F5 to refresh the page after doing this (the tiles may appear weird otherwise).

(The main reason for the screen resolution issue is I force the table to be a grid of 15 by 15 cells, each 50 by 50 pixels wide. As a result the table itself requires 750px by 750px. I think this looks the best and reducing the size at all would make the game board tiny and hard to read. If I have time I may try to make a second table that is smaller and force that to display on smaller screens)


Example Screenshots can be found below for various games.


This is also the second version of my Scrabble implementation.

A basic (and very badly broken) one line version can be found here.

My web page is also hosted on GitHub at the this Github repository.