Show HN: Virtual pet game made for my daughter

Personally, I think a little more feedback into what effect each action has would be good. I couldn't figure out if the buttons did anything at all except change the animation. Perhaps a status bar showing the hunger/thirst/boredom going up or whatever.

The animations and the aestetic are great though!

I thought clicking around different combinations of buttons to discover what would happen was part of the fun. I kept trying to kill it to no avail.

I'm actually laughing out loud at that statement.

>What a neat game, let's see what it does. Nah. Let's kill it.

Humans. So weird.

just put debug=1 into the location bar.

I did it, no wonder it has exhausted face, the fatigue bar is too high

I think that this is supposed to be similar to the classic tamagotchi's off of the 90's. There were no status bars (like a real pet) and figuring it out was part of the charm . I do think that if the pet is really hungry/thirsty/tired there should be an a different animation, like pointing to mouth for hunger.

I agree animations and aesthetic are awesome (much better than the original LCD pixel Tamagotchi's).

I've never seen this pattern before in JS, in the parameters for the constructor. playing with it in the browser, I can see it lets you define default values for expected arguments when calling it but you can provide other values.

What is this called? I'd like to read more about it.

  class Resource{
    constructor({
      min = 0,
      max = 1,
      count = 0
    }={}){
      this.min = min;
      this.max = max;
      this.count = count;
    }
  }

I think I would call it nested destructuring with default values.

Destructuring, that rings a bell. Thank you.

Yeah, the trick is basically many things chained together. First is to pass a object to a function instead of position-locked arguments. Second is to default to a empty object. Third is to destruct the object in the function parameter directly. Fourth to supply default destruct values. Fifth is to set the values in the current instance of that class.

From the post, I wasn't sure if you knew, but JS also has regular default parameters if that's all you want.

Not as nice though, as the arguments still depend on the order. Passing a object gives the benefit of named arguments AND position of the arguments no longer matter (as object keys don't have order and also, it's a object with key/values)

Destructuring parameters with default values.

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Refe...

Github code https://github.com/bsawyer/tamagotchi

I've never said this before but, I really wanted a read.me file for this...

Love the game! It would be nice to wrap this up in an Android app and put it on the market place just because when I build games like these my kids end up closing the browser somehow :) I built a few of these at: http://putty.minhajuddin.com/

That’s a really good idea!

Looks amazing! How did you make the SVG/animations?

I'm just a developer, but seeing stuff like this really makes me want to learn design.

Just separating different css transform animations across nested divs

How did you make the SVGs though? Did you draw them yourself, or get them somewhere else?

Drew them in figma

Thanks! I had never thought to draw in Figma.

following up as another developer that really wants to get better at overall drawing/design. what are the best resources?

console javascript hacking ;)

var ele = document.createElement('div'); ele.setAttribute('id', 'foo'); //$('.stage').append("<div id='foo'>m</div>"); document.getElementsByClassName('stage')[0].appendChild(ele);

var dict = { pain: { energy: 'paddle', waste: 'needs to fart' }, sad: { ideas: 'coffee' }, frustration: { fatigue: 'sleep', energy: 'food' // 'paddle' }, restless: { concentration: 'knit?', waste: 'fart' }, tired: { fatigue: 'needs sleep' } };

// happy concentration // estatic ideas / waste // restless waster

trigger = setInterval(function() { var s = getState(STATE); var msg = s.mood.name + ' ' + s.mood.reason ; if (dict[s.mood.name] && dict[s.mood.name][s.mood.reason]) msg = dict[s.mood.name][s.mood.reason]; var other = ['concentration','energy','fatigue','ideas','waste']; for (var i = 0; i < other.length; ++i) msg += ' ' + other[i] + ':' + (s.creature[other[i]].count).toFixed(1);

    document.getElementById('foo').innerHTML = '<small>'+ msg +'</small>';

}, 100)

/* i couldnt find the mute button */ function playSound(state, sound){}

Great artstyle. You should make it a fully fledged PWA. I would have downloaded it in a heartbeat.

I like the style of the code. Can talk about your inspiration for it? I haven't seen Javascript written in that way before. It's clean but, at least to me, unintuitive. What is your background?

not the author, but it looks Java-like to me - with the "everything is an object/class" approach.

Been a frontend dev for 10 years angular and react. You’re right it’s a little mix of functional state management and imperative structures for the game objects.

I try to find the time to write a small game for my daughter for so long! I'm jealous. Good job!

Thank you! It is definitely hard to find time. Certainly helped that she wanted to “help”(she’s 6) write it with me sometimes :)

great job! only a couple of seconds with the game and i felt calmed down somehow lol we need more slow paced, calming things like this

Try playing death stranding. It’s very calming making “deliveries” while enjoying the great graphics and music.

I've been playing Pwnagotchi with my daughter. (Not really, cause she's still too young.) Thanks for the inspiration though.

Ah, my heart. It was sad for such a long time and I just didn’t know what it wanted.

Reminds me of my son until he was 1 year old(ish).

great :) add more stuff, I cant teach my daughter things can live on coffee and cookies... just kidding of course we can :)

Neat

Thanks, glad you like it!

Can you add a brown face choice? Right now the choices are peach (caucasian) or alien.

Sure, thanks for the suggestion!

Caucasian? It’s an imaginary pet, not a person.

Even for an imaginary pet brown makes perfect sense though?

People searching to be offended will find offensive things everywhere.

Very cute! Maybe someday this will inspire her to learn how to code. :)

It's very cute!

I'd rename it. Tamagotchi is still a trademarked name, and someone still owns it and produces toys with the name.

Ignoring that, it seems a fun little thing. I have trouble understanding the faces, but I assume that just takes practice.

It's pretty neat, fast, with the all-important cute animations that trick you into caring about a state machine.

You’re absolutely right, would love any suggestions!

Gotchutama

Pokemon

Or

Micky Mouse

Meeky Moose is my pick.

Meek-a-Maus

perhaps emotchi

I give this the millennial stamp of approval

Mootchi, 'cos, cute.

This is great

+1 emotchi

Someone registered this name, today.

Magatochi

Zatoichi?

Just noticed I'm being downvoted for this? hahaha This wasn't even a Trump reference, just an alliteration... PTSD much? I'm on the other side of the world

It is not a comment that adds anything substantial to the discussion.

Actually it does, because the author of the post literally asked for name suggestions. So indeed your comment doesn't add anything substantial to the discussion.

Benagotchi

I was going to say that it looks like an egg, so you should use the Japanese word for “egg”… which turns out to be “tamago”. TIL!

and "tomodachi" means friend, so "tamagochi" is sort of like "egg friend"

Hakanuchi

Hakuna Matatagotchi

Myunagi