Prep 12: JavaScript Classes

Textbook Reading

• CSS
  • 7.5 CSS Effects
• JS
  • 10.2 Prototypes, Classes, and Modules

Simple Scrabble

Here is a CS159-style assignment for you to do, but in JavaScript!

Introduction

Scrabble is a word game where players take turns placing letter tiles on a board to form words. Each letter has a point value. Players earn points based on the words they create. The game ends when all tiles are used or no more moves can be made. The player with the most points wins.

Getting Started

Download the following files:

• scrabble.html
• scrabble-game.js

The following class containing all the game logic is provided:

classDiagram
  class Game {
    +tileBag : Array~Tile~
    +board : Board
    +players : Array~Player~
    +currentPlayerIndex : Number

    +constructor()
    +createTileBag() Array~Tile~
    +shuffle(Array) Array$
    +init()
    +currentPlayer : Player
    +playTurn(tileIndex : Number, row : Number, col : Number)
    +nextTurn()
    +updateUI()
  }

Tip

The source code for the Game class can be used as a reference for writing your own classes.

UML Diagram

Implement the following classes in a new file named scrabble-core.js:

classDiagram
  class Tile {
    +letter : String
    +points : Number

    +constructor(letter : String, points : Number)
  }

  class Board {
    +rows : Number
    +cols : Number
    +grid : Array~Array~Tile | null~~

    +constructor(rows : Number, cols : Number)
    +display()
    +placeTile(row : Number, col : Number, tile : Tile) Boolean
  }

  class Player {
    +name : String
    +hand : Array~Tile~
    +score : Number

    +constructor(name : String)
    +drawTiles(tileBag : Array~Tile~, count : Number)
    +playTile(tileIndex : Number, board : Board, row : Number, col : Number) Boolean
  }

  Tile <--Player : uses
  Board --> Tile : contains

Tip

Notice that line 1 of scrabble-game.js imports the three classes. That means you will have to export each class in scrabble-core.js.

The Tile class

• Not much to do here; just write the constructor!

The Board class

• The constructor should initialize all three attributes
  • Create a 2D array of null values for the given number of rows and cols
• display() should get the board element and replace its HTML contents:
  • Create a div for each row
  • Create a span for each cell (on each row)
  • Set the cell’s textContent to the tile’s letter (or _ if null)
  • Set the cell’s padding to 4px.
  • Append each span to the div; append each div to the board
• placeTile() should set this.grid[row][col] to the Tile and return true
  • But only if the cell is null; if the cell is not null, don’t update and return false

The Player class

• The constructor should initialize all three attributes
  • The name is provided; the hand is an empty array; the score is 0
• drawTiles() is used for a Player to draw (take) tiles from the bag
  • Write a loop to run for count times
    • If the tile bag is not empty
      • Pop the next tile from the bag
      • Push the tile into the Player’s hand
• playTile() should return true on success or false on failure
  • If there is a tile at tileIndex and you can place the tile on the board
    • Add the tile’s points to the player’s score
    • Remove the tile from the player’s hand (Hint: use hand.splice())

Submission

Optional: Before you submit, add JSDoc comments to your code in scrabble-core.js. If you’d like help, paste your code into an AI tool with a prompt like:

Add JSDoc comments to all classes and methods in this JavaScript file.

Review the generated comments against your code. An inaccurate comment can reveal a bug you missed!

Required: Submit your scrabble-core.js file to Gradescope.