Show HN: Virtual pet game made for my daughter(bsawyer.github.io)

256 pointsby ben85tsvor 7 Jahren67 comments

bsawyer.github.io

Show HN: Virtual pet game made for my daughter

https://bsawyer.github.io/tamagotchi/index.html

70 comments

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!

AllanHoustonStvor 7 Jahren

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.

Loughlavor 7 Jahren

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.

clarkey252vor 7 Jahren

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).

jboy55vor 7 Jahren

just put debug=1 into the location bar.

bluejedivor 7 Jahren

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

nkriscvor 7 Jahren

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;
    }
  }

lxevor 7 Jahren

Destructuring parameters with default values.

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

orisa2vor 7 Jahren

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

capablewebvor 7 Jahren

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)

chiycvor 7 Jahren

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

nkriscvor 7 Jahren

Destructuring, that rings a bell. Thank you.

capablewebvor 7 Jahren

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.

[deleted]vor 7 Jahren

yomansatvor 7 Jahren

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

ghostbrainalphavor 7 Jahren

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

minhajuddinvor 7 Jahren

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/

ben85tsvor 7 Jahren

That’s a really good idea!

JDiculousvor 7 Jahren

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.

volkkvor 7 Jahren

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

ben85tsvor 7 Jahren

Just separating different css transform animations across nested divs

JDiculousvor 7 Jahren

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

ben85tsvor 7 Jahren

Drew them in figma

JDiculousvor 7 Jahren

Thanks! I had never thought to draw in Figma.

tofu_inkvor 7 Jahren

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){}

dynamite-readyvor 7 Jahren

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

throwaway35784vor 7 Jahren

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?

ben85tsvor 7 Jahren

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.

beaconstudiosvor 7 Jahren

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

rmetzlervor 7 Jahren

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

ben85tsvor 7 Jahren

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

workthrowawayvor 7 Jahren

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

trianglemvor 7 Jahren

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

Fnoordvor 7 Jahren

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

Aeolunvor 7 Jahren

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).

mobilemidgetvor 7 Jahren

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

tobyhinloopenvor 7 Jahren

Neat

ben85tsvor 7 Jahren

Thanks, glad you like it!

natexvor 7 Jahren

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

htkvor 7 Jahren

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

tasogarevor 7 Jahren

People searching to be offended will find offensive things everywhere.

Aeolunvor 7 Jahren

Even for an imaginary pet brown makes perfect sense though?

ben85tsvor 7 Jahren

Sure, thanks for the suggestion!

ravenstinevor 7 Jahren

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

t0astbreadvor 7 Jahren

It's very cute!

[deleted]vor 7 Jahren

shaknavor 7 Jahren

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.

ben85tsvor 7 Jahren

You’re absolutely right, would love any suggestions!

ainar-gvor 7 Jahren

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!

prurigrovor 7 Jahren

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

romesvor 7 Jahren

perhaps emotchi

tehlikevor 7 Jahren

Someone registered this name, today.

spatleyvor 7 Jahren

+1 emotchi

warentvor 7 Jahren

I give this the millennial stamp of approval

jv22222vor 7 Jahren

Mootchi, 'cos, cute.

4ec0755f5522vor 7 Jahren

This is great

honkycatvor 7 Jahren

Pokemon

Or

Micky Mouse

[deleted]vor 7 Jahren

bg4vor 7 Jahren

Meeky Moose is my pick.

rantwaspvor 7 Jahren

Meek-a-Maus

bonestamp2vor 7 Jahren

Benagotchi

irrationalvor 7 Jahren

Gotchutama

wholepointofccvor 7 Jahren

Magatochi

wholepointofccvor 7 Jahren

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

wglbvor 7 Jahren

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

wholepointofccvor 7 Jahren

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.

MadWombatvor 7 Jahren

Zatoichi?

CamperBob2vor 7 Jahren

Myunagi

fredleyvor 7 Jahren

Hakanuchi

james_s_taylervor 7 Jahren

Hakuna Matatagotchi