Sleepovers, long phone calls on your parents' landline, giggling with your bffs at recess. Revisit that sweet time when the only taxes you paid were with Monopoly money, with MASHED!
This game is based on a legendary schoolyard game called MASH, in which players (or player) picks categories and values based on what they want in their future story, find their "magic number," and use a particular sequence based off their magic number to begin eliminating values until one from each category remains. The last standing values compose their future story.
- Title your page with “MASH” to begin. This will predict if you will live in a mansion, apartment, shack, or house.
- Choose your categories based on what you want in your future or story: a partner, kids, car, college, pets, etc.
- List 4 values for each category. Some variations include one player determining 2 values for themselves, and another player or players determining the other 2 values.
- Select your magic number. This can be done through drawing a spiral until someone tells you to stop and counting the rings, or a dice roll, etc.
- Begin eliminating by looping through the values and striking off the nth number, and repeating from the last spot stricken.
- Tell a story with your remaining values from each category.
User fills out 16 fields and rolls dice. Roll dice function generates a pseudorandom innteger between 1 and 2, inclusive.
function rollDice() {
number = (Math.floor(Math.random() * 12) + 1)
magicNumber.textContent = number
predictButton.disabled = false
}
Predict function begins sequence of removing values from nested arrays
function predict() {
///lines 38-79
New screen appears through DOM changing the values of display properties of divs, which are assigned id values of '#screen1' and '#screen2'.
<div id="screen2" class="group">#screen2 {
display: inherit;
margin: 80px auto;
line-height: 30px;
}function showScreen2() {
screen1.style.display = 'none'
screen2.style.display = 'flex'
}
I used flexbox displays in CSS for responsiveness to different screen sizes and to adapt for mobile gameplay.
.group, .field {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
margin: auto;
gap: 3px;
}
.row {
display: inline-flex;
flex-direction: row;
gap: 7px;
}
{width=300}
The Roll Dice button is disabled until all input fields have been typed in by user.
{width=300}
The Predict button is only enabled once the Roll Dice button has been clicked and generated a magic number.
{width=300}
I used a specific font family via Google Fonts through importing to my CSS file.
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');