From b0f5c24034a4ceb4322b9c9481c0dbef39622929 Mon Sep 17 00:00:00 2001 From: wquynguy Date: Fri, 27 Oct 2023 10:26:47 -0500 Subject: [PATCH 1/3] add notes and populate html content with basic stlying --- css/style.css | 118 ++++++++++++++++++++++++++++++++++++++++++++++++++ index.html | 40 ++++++++++++----- js/main.js | 51 +++++++++++++++++++++- 3 files changed, 197 insertions(+), 12 deletions(-) diff --git a/css/style.css b/css/style.css index 134028f..3036b13 100644 --- a/css/style.css +++ b/css/style.css @@ -1,11 +1,129 @@ /* global styles */ +*{ + box-sizing: border-box; + /* border: 1px solid red; */ +} + /* element styles */ + +body{ + /* fonts */ + margin: 0; + min-height: 100vh; + background-color: #e6e6e6; + font-family: Arial, Helvetica, sans-serif; + font-size: 16px; + /* referene size for rem units (16px) */ +} + +h1{ + font-size: 3.5rem; + /* margin: 0; */ +} + /* layout */ +.container{ + /* border: 3px solid blue; */ + width: 90vw; + margin: 0 auto; + /* auto calculates the remaining space avaiable (left over after calculating content size) */ +} + +.button-wrapper{ + display: flex; + justify-content: space-around; + gap: 1rem; +} + +.stats-wrapper{ + +} + + +.game-state-wrapper{ + display: flex; + justify-content: center; +} /* headings */ +.game-title{ + text-align: center; +} /* buttons */ +.button-wrapper button{ + background-color: #0b99ff; + color: white; + padding: 1.3rem 1.6rem; + font-size: 1.8rem; + border: .2rem solid #134a71; + border-radius: .25rem; +} +.button-wrapper button:active{ + background-color: #197bc2; + border: .2rem solid #0b3553; +} +/* 11, 153, 255 */ /* images */ +.game-graphic{ + max-height: 20vmin; +} + +.game-graphic:hover{ + /* source: https://www.w3schools.com/howto/howto_css_shake_image.asp */ + /* Start the shake animation and make the animation last for 0.5 seconds */ + animation: shake 0.5s; + + /* When the animation is finished, start again */ + animation-iteration-count: infinite; +} + + +@keyframes shake { + 0% { + transform: translate(1px, 1px) rotate(0deg); + } + + 10% { + transform: translate(-1px, -2px) rotate(-1deg); + } + + 20% { + transform: translate(-3px, 0px) rotate(1deg); + } + + 30% { + transform: translate(3px, 2px) rotate(0deg); + } + + 40% { + transform: translate(1px, -1px) rotate(1deg); + } + + 50% { + transform: translate(-1px, 2px) rotate(-1deg); + } + + 60% { + transform: translate(-3px, 1px) rotate(0deg); + } + + 70% { + transform: translate(3px, 1px) rotate(-1deg); + } + + 80% { + transform: translate(-1px, -1px) rotate(1deg); + } + + 90% { + transform: translate(1px, 2px) rotate(0deg); + } + + 100% { + transform: translate(1px, -2px) rotate(-1deg); + } +} \ No newline at end of file diff --git a/index.html b/index.html index 18d09e9..426c85c 100644 --- a/index.html +++ b/index.html @@ -1,16 +1,34 @@ - - - - + + + Document - + - - - -

Tamagotchi Code Along

- - + +​ + +
+

Tamagotchi

+
+
+
+ + + + +
+
+ +

Happiness: 10

+

Hunger: 0

+

Tiredness: 5

+
+
+ + +
+
+ \ No newline at end of file diff --git a/js/main.js b/js/main.js index f1af6c4..1af8f8a 100644 --- a/js/main.js +++ b/js/main.js @@ -1,15 +1,64 @@ console.log('js:loaded') + +const INIT_STATE = { + boredom: 0, + hunger: 0, + sleepiness: 0, + }; + /*----- constants -----*/ +let boredom; // integer +let hunger; // integer +let sleepiness; // integer + +let age; +let cycles; +// HFM later on - icebox features (age cycles for tama) +let timer; // setInterval id +let interval; /*----- state variables -----*/ /*----- cached elements -----*/ + const boredomStatEl = document.querySelector('#boredom-stat') + const hungerStatEl = document.querySelector('#hunger-stat') + const sleepyStatEl = document.querySelector('#sleepiness-stat') +// To Do: add cache for game message string once added to game + const gameBtnElms = document.querySelectorAll('#controller button') + // To Do: add cache for restart button after game over /*----- event listeners -----*/ -/*----- functions -----*/ \ No newline at end of file +/*----- functions -----*/ + +function init() { + // clear the end-game message + + // overwrite the old state with a copy of the original state values + state = { ...INIT_STATE }; + // - assigning the new object to the state variable, creating a 'refresh of the state' + + age = 0; // integer + cycles = 0; // integer + + interval = 1000; // integer + timer = setInterval(runGame, interval); // object + + render(); + } + + function runGame(){ + console.log('game is running"') + +} + + function render() { + renderStats(); + console.log('game has ended') + } + \ No newline at end of file From ba18951895f2dd49634856fa0e3397eaf8e2c473 Mon Sep 17 00:00:00 2001 From: wquynguy Date: Fri, 27 Oct 2023 11:39:51 -0500 Subject: [PATCH 2/3] completed code along game --- js/main.js | 151 +++++++++++++++++++++++++++++++++++++++-------------- 1 file changed, 112 insertions(+), 39 deletions(-) diff --git a/js/main.js b/js/main.js index 1af8f8a..6b4ceb8 100644 --- a/js/main.js +++ b/js/main.js @@ -2,63 +2,136 @@ console.log('js:loaded') const INIT_STATE = { - boredom: 0, - hunger: 0, - sleepiness: 0, - }; + boredom: 6, + hunger: 4, + sleepiness: 9, +} + +/*----- state variables -----*/ +// state is the data that will change while the game is running -/*----- constants -----*/ -let boredom; // integer -let hunger; // integer -let sleepiness; // integer +// let boredom; // integer +// let hunger; // integer +// let sleepiness; // integer + +let state; let age; let cycles; -// HFM later on - icebox features (age cycles for tama) -let timer; // setInterval id -let interval; +let timer; +let interval; -/*----- state variables -----*/ +/*----- cached elements -----*/ +const boredomStatEl = document.querySelector('#boredom-stat') +const hungerStatEl = document.querySelector('#hunger-stat') +const sleepyStatEl = document.querySelector('#sleepiness-stat') -/*----- cached elements -----*/ - const boredomStatEl = document.querySelector('#boredom-stat') - const hungerStatEl = document.querySelector('#hunger-stat') - const sleepyStatEl = document.querySelector('#sleepiness-stat') +// TODO: add cache for game message string once added to game + +const gameBtnEls = document.querySelectorAll('#controller button') -// To Do: add cache for game message string once added to game - const gameBtnElms = document.querySelectorAll('#controller button') - // To Do: add cache for restart button after game over +// TODO: add cache for restart button after game over /*----- event listeners -----*/ +gameBtnEls.forEach(function(btn){ + btn.addEventListener('click', handleBtnClick) +}) -/*----- functions -----*/ +function handleBtnClick(event){ + console.log(event.target.innerText) -function init() { - // clear the end-game message + const convertProp = { + feed: "hunger", + sleep: "sleepiness", + play: "boredom", + } - // overwrite the old state with a copy of the original state values - state = { ...INIT_STATE }; - // - assigning the new object to the state variable, creating a 'refresh of the state' + const key = convertProp(event.target.innerText) + console.log(key) - age = 0; // integer - cycles = 0; // integer - - interval = 1000; // integer - timer = setInterval(runGame, interval); // object + updateStat(key, -3) + render() +} + + +/*----- functions -----*/ + +init() // starts game when js loads +function init(){ - render(); - } + state = {...INIT_STATE} + + age = 0; + cycles = 0; + + interval = 5000; + timer = setInterval(runGame, interval); + render() +} - function runGame(){ - console.log('game is running"') +function runGame(){ + updateStats() + render() +} +function render(){ + renderStats() } - function render() { - renderStats(); - console.log('game has ended') - } - \ No newline at end of file +function renderStats(){ + // console.log('rendering stats') + boredomStatEl.textContent= state.boredom + hungerStatEl.textContent= state.hunger + sleepyStatEl.textContent= state.sleepiness + +} + +function runGame() { + cycles++; + + + if (continueGame()) { + updateStats(); + + } else { + return gameOver(); + } + + render(); + } + + function continueGame() { + const testGame = Object.values(state).every((stat) => stat < 10); + return testGame; + } + + function updateStats() { + for (key in state) { + updateStat(key, Math.floor(Math.random() * 3)); + } + } + + function updateStat(stat, value) { + if (state[stat] + value >= 0) { + state[stat] += value; + } else { + state[stat] = 0; + } + } + + function gameOver() { + console.log('game over!') + clearInterval(timer) + init() + } + + function resetUI() { + gamePlayAgainEl.classList.add("hidden"); + gameMessageEl.classList.add("hidden"); + } + + init(); + \ No newline at end of file From 28dbc723d7ee9bb5f90fbb2cc1c61aad2188a9eb Mon Sep 17 00:00:00 2001 From: wquynguy Date: Fri, 27 Oct 2023 13:06:35 -0500 Subject: [PATCH 3/3] Finalized Code - For Review --- js/main.js | 27 +++------------------------ 1 file changed, 3 insertions(+), 24 deletions(-) diff --git a/js/main.js b/js/main.js index 6b4ceb8..ed93839 100644 --- a/js/main.js +++ b/js/main.js @@ -1,4 +1,4 @@ -console.log('js:loaded') +// Tamagotchi Code Along // const INIT_STATE = { @@ -7,13 +7,6 @@ const INIT_STATE = { sleepiness: 9, } -/*----- state variables -----*/ -// state is the data that will change while the game is running - -// let boredom; // integer -// let hunger; // integer -// let sleepiness; // integer - let state; let age; @@ -22,19 +15,13 @@ let cycles; let timer; let interval; -/*----- cached elements -----*/ const boredomStatEl = document.querySelector('#boredom-stat') const hungerStatEl = document.querySelector('#hunger-stat') const sleepyStatEl = document.querySelector('#sleepiness-stat') -// TODO: add cache for game message string once added to game - const gameBtnEls = document.querySelectorAll('#controller button') -// TODO: add cache for restart button after game over - -/*----- event listeners -----*/ gameBtnEls.forEach(function(btn){ btn.addEventListener('click', handleBtnClick) @@ -57,9 +44,8 @@ function handleBtnClick(event){ } -/*----- functions -----*/ -init() // starts game when js loads +init() function init(){ state = {...INIT_STATE} @@ -82,7 +68,6 @@ function render(){ } function renderStats(){ - // console.log('rendering stats') boredomStatEl.textContent= state.boredom hungerStatEl.textContent= state.hunger sleepyStatEl.textContent= state.sleepiness @@ -127,11 +112,5 @@ function runGame() { clearInterval(timer) init() } - - function resetUI() { - gamePlayAgainEl.classList.add("hidden"); - gameMessageEl.classList.add("hidden"); - } - - init(); + \ No newline at end of file