Shakeable

Contributors: Trevor Rapp

Shakeable_.Aug_2_2022_12_37_AM.mp4

shakeable.mov

Description:

"The die has been cast." --Julius Caesar

An innovative approach to the dice game 21.

SHAKE YOUR PHONE TO ROLL THE DICE!!!

First to 20 wins. Uses the Accelerometer API to roll the dice, along with Vanilla Javascript to track state, scores of players, and display updated information.

QUICKSTART GUIDE:

Click on the "View Project" button above ⬆️ or go to https://trrapp12.github.io/SHAKEABLE/.

Project v1.0 demonstrates the following:

User Story 1: User should be able to play with another person.
User Story 2: User should be able to see whose turn it is.
User Story 3: User should be able to see updated score.
User Story 4: User should be able to know who won.
User Story 5: User should be able to "roll" dice either by shaking phone, pushing button, clicking button, or with keyboard button.
User Story 6: User should be able to enjoy some fun animations.

CHALLENGES I OVERCAME

creating the acceleration was really fun, and completely new to me. I had never used it so I had to do a lot of research to figure out how to get it to work. One issue I found almost immediately is that the accelerometer was quite sensitive, causing the event to fire an overwhelming amount of times. To overcome this I had to create a throttling function.

See the function below:

  function throttled(delay, fn) {
    let lastCall = 0;
    return function (...args) {
      const now = new Date().getTime();
      if (now - lastCall < delay) {
        return;
      }
      lastCall = now;
      return fn(...args);
    };
  }

When I created key listeners I found I had to anticipate keys the user might think to hit besides the enter button to prevent them from registering.

See code example below:

const keyHandler = (evt) => {
  if (evt.key === "Enter") {
    if (player1turn === undefined) {
      console.log(`CLICK EVENT, IF STATEMENT: ${player1turn}`);
      determineWhoRollsFirst();
      displayButtonMessage("Roll!");
    } else {
      console.log(`CLICK EVENT, ELSE STATEMENT: ${player1turn}`);
      playerRolls(player1turn, objArray);
      checkForWinner(player1score, player2score);
      player1turn = !player1turn;
    }
  } else if (
    evt.key === "Tab" ||
    evt.key === "ArrowLeft" ||
    evt.key === "Left" ||
    evt.key === "ArrowUp" ||
    evt.key === "Up" ||
    evt.key === "ArrowRight" ||
    evt.key === "Right" ||
    evt.key === "ArrowDown" ||
    evt.key === "Down" ||
    evt.key === " "
  ) {
    console.log("nothing to see here");
  } else {
    alert("Please use the Enter key make selections");
  }
};

MY OWN PERSONAL CONTRIBUTIONS INCLUDED

🆕 Adding the accelerometer API so that you can shake the phone to roll the dice

🆕 Complete redesign of the appearance including 3 Dimensional dice, rolling animation, and cleaner/better UI.

🆕 Added touch, focus, keyboard, and acceleration events. Previously only worked with click events.

🆕 Adds color!

SCRIMBA FRONT END DEVELOPER CAREER CERTIFICATE:

This project was completed as part of the Scrimba The Frontend Career Path, which is composed of:

over 1000 lessons
over 65 hours of instruction
over 30 instructor-lead, hands-on projects
over 15 Solo Projects (completed completely alone, with only Figma files and user stories provided.)

CERTIFICATE OF COMPLETION - The Frontend Developer Career Path.pdf

ATTRIBUTIONS:

Project created by TREVOR RAPP

Original project idea was a code along project from Scrimba's Front End Development Course.

See original.

YOU CAN FIND ME AT:

*For more information see my LinkedIn or return to my Github

trrapp12 / SHAKEABLE