Ever since I left Google, a
few months ago, I wanted to do two projects which I couldn't do when
I was still employed at Google. I mean, I *could* do them, but I didn't
have the balls to do them. Yeah. The first project is what
this whole video is about, and it's basically me trying to implement
a full game in Flutter in 10 minutes. And I mean, not 10 minutes of edited video,
but 10 minutes straight from start to finish. Without using any editing. Without using any
pre-existing code, or anything like that. Just from the Counter app to a
finished game, in 10 minutes. So, it's probably going to
fail, but anyway... I'll try it. So I guess I can start. Let
me start the timer. And... go! Hey! This is me from the future.
I realized that I couldn't actually talk while also building this game,
so instead I deferred to my future self to do the talking and the explaining.
And so that's what I'm doing here. All right, so, so far, I just replaced
everything under the Scaffold of this app, which is the the usual
[Counter] app, with a Row. And in it, there's an AspectRatio of 1,
which just makes sure that this will be a square. And in it, there's a GridView. So I'm still not telling you what
this game is about, but it has a grid. It has a grid of nine fields by three, so 3 by
3. And see, I have trouble actually writing code here. Like, actually writing characters. Which
doesn't bode well for the whole experiment. Okay, so I have something there. I
just saved, and therefore there was a hot reload, and so you can see over there, on the left... or *right* bottom corner,
that I have some some kind of a grid there. And next to the AspectRatio, next to the
square, I have a Column which is basically my status part of the game. Which,
right now, just says "Your move." And then there is a button which, again,
I have trouble actually editing stuff, apparently, and it just says "Restart." Right, so it doesn't do anything
yet. Also, I don't want everything pressed so hard to the top of the page,
so a little bit of nicety is to put the mainAxisAlignment to spaceAround. Which makes
a little more room to each item in that list. And also, putting everything
(every tile) into Center. In this, I will not do a lot of visual stuff, of course. I have only 10
minutes. But still, it's nice. Cool. I have created the state of the game now,
which is a list of nine zeroes at the start. But it's going to always
be a list of nine numbers. Now, ideally, if I were doing an actual game, on a grid, I would of course want to have a
two-dimensional list, or array, or something. But in this case, I am realizing, of course,
that I don't have the time to do this. And I can easily, basically,
hard code everything there. So, now I can actually check [the game state].
And you can see that I'm showing nothing when the the tile says zero, I am showing 'X'
when it's one, and 'O' when it's two. I think you can guess what I'm going with. And now I'm allowing the player to
actually interact with the game, by adding an InkWell that says tiles[i] = 1. And now I tried it, and it shows that, yes, it works. The player can
actually add 'X's on this [grid]. And so, now, we're going to, like, program the AI.
The AI is basically the the major problem of this game. Because we already have the UI. It's
terrible, it looks bad, but it's there. So the AI first needs to wait for some duration,
and this is completely just for the feel of it. If you start... if your AI responds too early,
it doesn't look like an AI. It looks fake. So you have to... and this is actually true
even in normal games (you can trust me, I'm a game developer in part). Some games
could work much faster but they still give that little amount of time so that it looks
more like you're playing against an opponent instead of playing against the
computer that could immediately respond. Cool, so the AI needs to go
through the playing field. Now, I think you already know what's going on.
It's tic-tac-toe. It's a tic-tac-toe [game] where you can play with the AI. And,
tic-tac-toe has a grid of three by three tiles. And you can see that I'm just basically
hard coding that this tile is zero, one, two, you know, up to eight. And now I just go...
the AI just goes through each of the tiles and it constructs a "future", like a possibility
in the future, of what the tiles could look like. So this one line, on line 137, is basically, [it]
says: copy all the the current state of the world into tiles, into the variable `future`,
and also change the tile on tile `i` to 2. Which means, the opponent, the AI's tile.
And if this is winning... we haven't implemented `isWinning` yet, but if this is a
winning "future", then assign `i` to `winning`. Which means, we know now that this particular
number is the winning [tile], and we should probably take it. And also, [we] try to figure
out if this... Again, change the "future" to "if this [tile] was taken by the player". And, if it
was taken by the player, and the player would win, then assign this to `blocking`. Which means, we
should probably block this. [We should block] the player from playing this one. Cool, all right. So, then we check:
is `winning` not null? If not, then that's our move. If yes,
if [winning] is null, then try `blocking`. And if not, then try `normal`.
And if we have a move to play, then play it. Cool, so now we need to implement `isWinning`,
actually. So, for that, we basically just need to check for eight different possibilities,
right? So, the fact that `who` is winning, can be either that, for example... I have
a problem here that I will fix in a second. But if `tiles[0]` is `who` (which is
either 1 or 2 — either player or the AI), if it's uh... If that is...
I mean, if that is `who`... Basically, if they all belong,
all these tiles belong to the player that we're asking about, then this is
a winning state. And we should return true, right? And now I'm basically going, and listing
all the possible ways that a player or the AI could win. So the first one is: "we have
the whole row". On to the next one, and the next one. And then there is the this diagonal, and then
[that]diagonal. And then the [columns], right? So that's the eight different ways, and I have
to use my brain now... My past self needs to use his brain to figure out
which numbers should go here. You can see that I'm not that bad at
it, actually, because I have everything in front of me. Right? So I can kind of
see, "oh, zero one two is the front row, and then [go] from there". It's like, the first
three rows are kind of a cheat sheet for me. Cool, so now I have the `isWinning` method.
I actually think I'm already done. But I'm going up, to change the status so that
if I'm winning, if the player is winning, then it shouldn't say "Your move",
but it should say "You won!" If the AI is winning, it should say "You lose!" or "You lost!" or something like
that. I don't remember exactly. And if not, then we say "Your move." Cool, so, that works. And now I'm trying... my past
self is trying to restart. And then I'm realizing, oh, I
haven't implemented that yet. So, now, I'm implementing the
Restart button. Which, basically, all it does is it changes the tiles back to zero. Everything needs to be zero. And of course
this is in `setState`. So, nine zeros. Cool. Save, and now restart should work. And now I can change things... yeah. And
you can see that I was blocked by the AI. I'm basically done now. I don't know it... My
past self doesn't know it yet but I'm done. And everything works as I would
expect. I'm just testing now. Cool, now I'm trying to win, I'm
trying to find out if I can win. And you can see me losing. I can't win in tic-tac-toe! I mean, I can, of course, but like, I was so worried that I'm missing
something that I just kept losing. But I think now I will understand that, yes,
okay, this is how you win in tic-tac-toe. Cool, and that's it. I think I finished before
10 minutes. I just stopped it, at 10:29:48, but I'm pretty sure I was finished before. So I call it a success. Cool, so, yeah. Wow! That... I'm pretty happy. I mean, the
code, of course, is terrible. Just terrible. But, you know, what
do you expect for 10 minutes, right? Wow. All right. And it works. It has a restart button,
it even wins. The AI, you know. So, pretty cool. If you're interested in some of the
shortcuts that I used while I was working on this, you should
check out my course. I just published a course on Udemy about Android
Studio shortcuts. So you could check it out. And if you want to know what the other
project is, I'll tell you. It's... The other project that I didn't have the balls
to do when I was at Google is trying to build... a full operating system in Flutter. I know, yes. But, it's less
ridiculous than you think. Anyway, have fun, and see you around!
