Live Site

Background

'Down and Dandy' is a JavaScript mystery game where you play as Archibald, the owner of a struggling haberdashery in the downtown metro area. You are sure that your rival business across the street is sabotaging you and you have to do some good old gumshoeing before you confront them.

Phase I: Discovery

During the 'Discovery' phase Archibald follows rumors, collects evidence, and talks to locals to get the scoop on the underhand dealings of his rivals. This is achieved through a point/click mechanic for investigating clues shown on your screen and following dialogue trees.

Phase II: Confrontation

During the Confrontation phase Archibald confronts his rivals across the street. This may be done at any time, however depending on the information and evidence you uncover different things will happen!

Functionality

In 'Down and Dandy', users will be able to:

• open and interact with a map to change their location
• interact in dialog trees with npcs.
• Do a battle of wits and words to throw their rival in jail

In addition, this project will include:

• Intructions
• Exciting point and click action

Fun Code

Something I wanted to do was include different text from Gary based on the number of clues you found. To do that I implemented an event listener to check the found clues and switch up Gary's text based on it

addEventListener('click', () => {
  if (selectedLocation === haberdashery) {
    if (archibald.foundClues.length < 3 && selectedLocation === hab) {
      hab.npcArr[1].messageArr = [garyTextBox]
    } else if (archibald.foundClues.length > 2 && archibald.foundClues.length < 5) {
      hab.npcArr[1].messageArr = [garyTextBoxTwo]
    } else if (archibald.foundClues.length === 5) {
      hab.npcArr[1].messageArr = [garyTextBoxThree]
    }
  }
})

I also reused code for npcs and the player by implementing a Character class and having the NPC and Player classes inherit from Character

class Character {
    constructor(characterObjectPath, name, posArr) {
        this.loader = new FBXLoader();
        this.characterObjectPath = characterObjectPath
        this.name = name
        this.characterObject = []
        this.characterMixer = undefined
        this.size = .017
        if (posArr[0] !== undefined) {
        this.position = new THREE.Vector3(posArr[0],posArr[1],posArr[2])
        } else {
            this.position = posArr
        }
        this.actions = []
    }
}

class Player extends Character{
    constructor(characterObjectPath, name, posArr) {
        super(characterObjectPath, name, posArr)
        this.foundClues = [];
        this.unlockedLocations = [];
    }
}

class NPC extends Character {
    constructor(characterObjectPath, name, posArr, destinationArr, messageArr) {
        super(characterObjectPath, name, posArr)
        this.messageArr = messageArr
        this.destinationArr = destinationArr
    }
}

Technologies, Libraries, APIs

'Down and Dandy' will be implemented with the following technologies:

• 3js to render the scenes
• Webpack and Babel to bundle/transpile the JavaScript source code
• npm to manage the dependencies

Implementation Timeline

Friday Afternoon & Weekend:

• Setup project, get canvas to show on the screen
• Create Location, Clue, and NPC Classes.
• Create Player model
• Have responsive movement for PLayer
• Moving through the location via mouse clicks
• Have the camera follow the player regardless of location
• Allow for interacting with the npcs/clues/evidence via proximity and clicking on the item
• Create one 3js Location for the player to explore
• Add one interactable person
• Click on them to start talking
• Have a basic dialogue tree
• Add one clue
• Be able to click on the clue and have the player walk up to it
• When within proximity of the clue and it is clicked on the clue dialogue is brought up
• Add the map UI
• Players should be able to click on the map icon and pull up the map
• Map should have locations marked
• When a location is clicked on the map UI should be put away and the location is changed



Monday

• Create the remaining locations/clues/npcs. Overall there should be three total locations.
• Locations/npcs/clues
• The Haberdashery
• NPC - Shop Assistant
• Clue - Reciept from the docks



Tuesday

• Refine first location and work on second one
  • The Docks
  • NPC - Dock Worker
  • Clue - Illegally imported goods
  • Clue - Shipping ledger



Wednesday

• Add third location and finish end conditions
• Crime Alley/ Train Station
• (optional) NPC - Lady of the Street
• Clue - Photos of the villain doing illegal activities
• Clue - Proof of counterfit goods



Thursday Morning

• Deploy and get hyped to present




Bonus Features

Additional directions to take this project include:
• Additional locations
• Additional npcs
• Love interests
• Turn Phase II into a JRPG style convo fight!
• More than one villian and a second Act!
• Music and sound effects
• review found clues and information via a journal