Tamagochi v1.0 JS Tutorial

Example

Instructions

Note - The below instructions will create a very basic version of tamagochi with only one status bar (hunger) and one action button (feed). Feel to right-click and inspect the above iframe to see how the more complicated version above works. The JS script is below the status container div.

Initial Setup

Have an assets folder where you will your tamagochi mood images.

HTML

At the minimum you will need a div for the tamagochi image, and some button elements for controls, and the status bars. For this example I will just have a feed button and hunger status bar.  <img id="pet" src="../assets/tamagochi/cactus-idle.gif" />  <div class="actions-box"> <button class="action-btn" onclick="feed();"><p>Feed</p></button> </div>  <div class="stats-box"> <div class="stat-row"><p>Hunger:</p><div class="bar-outer"><div class="bar-inner" id="hunger-bar"></div></div></div> </div>

CSS

Very basic styling for tamagochi, it won't look like the example above but it should work. .bar-outer { width: 200px; height: 16px; background-color:lightgray; } .bar-inner { height: 100%; width: 100%; background-color:#729fed; transition: all 0.5s; } .action-btn { width:50px; height:50px; border-radius: 100px; background-color:white; border: 1px dotted pink; margin-right:12px; transition: all 0.2s; } .action-btn p { margin:0; } .action-btn:hover { background-color: #DDD; } .stat-row { display:flex; flex-wrap:nowrap; justify-content:space-between; align-items:center; } .stats-box { max-width:350px; background-color:white; padding:12px; } .actions-box { max-width:350px; padding:12px; text-align:center; }

Javascript

Create two objects. The first object will store the pet's mood and hunger level. The other object is used to keep track of the mood images: const petData = { 'mood':'perfect', 'hunger' : 100, }; const moodImages = { 'angry':'../assets/tamagochi/cactus-steaming.gif', 'annoyed':'../assets/tamagochi/cactus-anger.gif', 'mediocre':'../assets/tamagochi/cactus-look.gif', 'okay':'../assets/tamagochi/cactus-idle.gif', 'happy':'../assets/tamagochi/cactus-smile.gif', 'estatic':'../assets/tamagochi/cactus-wiggle.gif', 'perfect':'../assets/tamagochi/cactus-kiss.gif', } Create logic function to determine what stats need to be in order to change the image. Since the example only has one status (hunger), this could be turned into a switch statement. For now the below code should work: const setMoodImage = () => { const image = document.getElementById("pet"); if (petData.hunger > 90) { image.src = moodImages['perfect']; } else if (petData.hunger > 80) { image.src = moodImages['estatic']; } else if (petData.hunger > 70) { image.src = moodImages['estatic']; } else if (petData.hunger > 60) { image.src = moodImages['happy']; } else if (petData.hunger > 50) { image.src = moodImages['okay']; } else if (petData.hunger > 40) { image.src = moodImages['mediocre']; } else if (petData.hunger > 30) { image.src = moodImages['annoyed']; } else if (petData.hunger > 20) { image.src = moodImages['angry']; } else { image.src = moodImages['angry']; } } This function updates a status bar's width style and color (blue->yellow->red). The first parameter is the status bar element (in this case the hunger bar), the second parameter is the hunger level number. const blue = '#729fed'; const yellow = '#d4c750'; const red = '#c44e23'; const styleBar = (barEle, amount) => { barEle.style.width = `${amount}%`; if (parseInt(amount) < 20) { barEle.style.backgroundColor = red; } else if (parseInt(amount) < 50) { barEle.style.backgroundColor = yellow; } else { barEle.style.backgroundColor = blue; } } This is the main function that calls the above two functions (styleBar() and setMoodImage()). It is called after any kind of change in status occurs. const updateStats = () => { const hungerBar = document.getElementById("hunger-bar"); styleBar(hungerBar, petData.hunger); setMoodImage(); } This is the click handler when the feed button is pressed. First it updates the pet hunger level. Then it calls updateStats() in order to show visual changes. In the HTML section, the bold section is where this is called: <button class="comp-text action-btn" onclick="feed();"><p>Feed</p></button> const feed = () => { petData.hunger = Math.min(petData.hunger + 20, 100); updateStats(); } Below is an interval that will gradually decrease the hunger level over time (every 5000 milliseconds). const downTime = 5000; const decreaseStats = () => { petData.hunger = Math.max(petData.hunger - 5, 0); updateStats(); } let intervalId = null; const startInterval = () => { if (!intervalId){ intervalId = setInterval(decreaseStats, downTime); } } startInterval();