Name: Tamagotchis可以教您關於ES6發電機的知識--Jenn Creighton | JSConf Hawaii 2019 (What Tamagotchis Can Teach You About ES6 Generators - Jenn Creighton | JSConf Hawaii 2019)
Uploaded: 2021-01-14T10:25:04.000Z
Duration: 24 min 34 s
Description: 【看影片學英語】數萬部 YouTube 影片，搭配英漢字典即點即查，輕鬆掌握單字發音與用法，長久累積看電影不必再看字幕。

關係子句

So, yes, I'm here to talk to you about Tommy got cheese and generators, and I'm really excited that Crystal went before me because she already explained some concepts that I'm gonna go into in this talk as well.

I'm gen software engineer based in New York.

If you want to reach out to me on Twitter, my handle is girl code, you know?

I post like a lot of cat pictures and stuff, but there's also some JavaScript usage.

Okay, so if you aren't familiar with them, Tommy got cheese Were really popular digital pets in the 19 nineties.

And when the game would start, an egg would appear.

And then hatch and out would come your Tamagotchi as a baby.

And you want to raise it from a baby to an adult so you would clean up after it, you would play with it, you would feed it, it would beep at you with it, needed things.

You could get sick as well, and then you didn't actually know what type of Tom Adachi it was gonna grow up to be as an adult.

So that was the fun, like surprise of the game.

Now, when I was growing up, I nurtured a lot of Thomas watches to adulthood.

Um, but I really love this game, and I just want to build my own like, Web based version of it.

So my version of a Tom Adachi includes an SPD shell, the controls which are just ht motives to actually interact with Tom Adachi.

And then the game screen is actually built in canvas.

So if you aren't familiar with canvas to use it, we're going to clear the dom for canvas.

So in this case, we want to d and to draw on the canvas, we're going to use context, outdraw image.

We're gonna pass it the image to draw as well as some X Y coordinates that I'm not going to get into right now.

But that's gonna draw the image to the screen at the bottom.

You can see our Tamagotchi has been drawn to the screen.

Now for all the animations in this game, I used a sprite sheet.

So below is the sprite to bounce the Tom Adachi s O.

If each frame of the sprite is at 200 pixels, then I need to draw the image of zero, then 200 and then 400 pixels.

The Tommy got you up and then I'd go back down to bounce time, but she down.

Now, you'll notice that I'm doing context that clear between these drawings, and that's to avoid this situation.

So if you don't clear the context between drawings, all the frames just draw on top of each other.

All right, So as it's written now, this isn't going to work.

It's actually drawing and clearing so quickly that you're only seeing the last frame of this, so that's not gonna work.

But I can delay the animation with set time out.

So I'm looking for this really old school choppy Pixley animation like the original game.

And I'm not gonna build out a spreadsheet that is actually 60 frames, right?

So I'm gonna animate from frame one through three and then back to two and one for full bounce using set time out to do this to delay the frame drawings.

But I've created a problem here because now my animations are a think.

So how do I know when this animation is done, like I have to know the actual amount of time that this is going to take?

And that's in order to kick off another animation after this?

Or to not you overwrite another animation or have a weird, long delay between them?

And you know, this just isn't sustainable for a game that's full of animations.

What I want is to resolve an animation and then handle another animation and the sounds a lot like a promise.

Now Crystal Wright talked about promises, but you know, they represent an eventual value.

So inside a promise I could run the animation code.

And then when it's done, I can resolve the promise.

And since Aiken do a dot then on the promise, I can use that to run an animation after it's complete.

So for the first version of this game, that's what I did.

I made a general purpose and make function that takes in a draw function in the milliseconds for the delay.

And inside that promise, an inter function is going to run the draw function, and we delegate, resolving the promise to the draw function.

If drawl resolves the promise and returns true, we're done otherwise Set time out is called with the Inter function, and another loop of this function occurs.

So here we're going to actually use the animate function to create a bounce up animation.

We're gonna pass a function that draws the correct frame, clears the context and increments the current frame count.

When the current frame is greater than the frame count, the promise is resolved and we return true.

So this would stop the function from setting another loop via set time out.

And so now we can create a simple bounce function, using our bounce up animation and bounce down animation using the same animate function.

And as you can see, our Tamagotchi is bouncing wonderful, beautiful, and so now that that's working, we can move on to creating the main game loop.

So when you're not interacting with the Tom Adachi.

It's gonna show this Idol animation so it's gonna bounce, is gonna move to the right move to the left, keeps bouncing it so on and so forth.

And to set up the main loop, we're going to create a loop function.

We'll call the Idol animation, and when that's complete, we call the loop function again.

Okay, but I've created some more problems here.

There's two main issues I noticed when using promises to build the animations.

So once upon a time, we used callbacks to handle a sink calls.

And you know, this created the dreaded triangle of Do Take a callback health.

And one of the issues I noticed when making this game was that promises really didn't alleviate callback hell like you're still in hell.

So the left side is a more realistic version of how these animations might work.

So I might need to pass on information to functions or check information to make a decision.

And this all gets Justus unwieldy and as unmanageable as callback health.

And, you know, don't mistake me for hating promises.

But when you're doing like more large scale a zinc work, the ease of promises really breaks down.

And I noticed another larger issue with using promises for animations.

So the point of the Tom Adachi is that the user can interact with it.

I mean, the whole game is about interacting with the Tom Adachi.

So at some point, I need to suspend the Idol animation in favor of a user generated event.

So here I've added an array to hold pending events.

The loop function checks if there any pending events, and if there are the handle, event function is run and the loop is terminated.

So handle event is going to take the first event off the queue of events and run it.

And when it's complete, we're gonna restart the loop.

There's another event in the queue handle event will get called again.

Otherwise we continue the loop until the next event.

You can see I'm requesting to feed the time I got you.

Tamagotchis可以教您關於ES6發電機的知識--Jenn Creighton | JSConf Hawaii 2019 (What Tamagotchis Can Teach You About ES6 Generators - Jenn Creighton | JSConf Hawaii 2019)

字幕列表影片播放

Tamagotchis可以教您關於ES6發電機的知識--Jenn Creighton | JSConf Hawaii 2019 (What Tamagotchis Can Teach You About ES6 Generators - Jenn Creighton | JSConf Hawaii 2019)

context

expression

routine

advantage