Workshop:

Snake AI

2018 | Confidential and Proprietary

Goals:

​

1. Build a web-based game
2. Build AI player algorithms
3. Learn about full stack development with node.js and socke.io
4. Have fun!

2018 | Confidential and Proprietary

The Game: Snake

2018 | Confidential and Proprietary

Fun before a time phones were smart

2018 | Confidential and Proprietary

2018 | Confidential and Proprietary

What you will be doing today?

Part 1 Snake game

Part 2 AI player

Part 3 Multiplayer

2018 | Confidential and Proprietary

But why?

2018 | Confidential and Proprietary

Relevant challenges

Robotics

• Autonomous agents
• Simulation
• Visualization��

​

Full stack development

​

2018 | Confidential and Proprietary

Workshop Outline

1. Intro to Snake: Single player
1. Code Outline provided
2. Fill in code for parts of the game (e.g. did the snake eat the food, change direction)
2. AI: Algorithms for the snake
• Avoid walls
• Shortest path to food
3. Multiplayer
• Client/server overview
• Play AIs against each other

2018 | Confidential and Proprietary

Please ask lots of questions!

🤔

2018 | Confidential and Proprietary

Building the game

Snake AI - Part 1

2018 | Confidential and Proprietary

2018 | Confidential and Proprietary

Tools & Technologies

​

• Javascript
• Plus a little HTML & CSS
• Glitch: tool to create and publish web apps

​

nst each other

2018 | Confidential and Proprietary

Glitch

Screenshare tour of new project

​

1. File Browser
1. Script, css, html
2. Project view
3. Split View
• Make changes & watch them take effect
• Javascript console in chrome
• What do errors look like?

​

nst each other

2018 | Confidential and Proprietary

Glitch Signup

Make an account at

glitch.com/signin

1. Go to: glitch.com/signin
2. Click “create an account”
1. If you have an account already, feel free to use it!

2018 | Confidential and Proprietary

2018 | Confidential and Proprietary

Make your personal copy of the Snake project

​

1. https://glitch.com/edit/#!/snake-ai-part-1
2. Click drop down in upper left and choose “Remix project”

​

nst each other

2018 | Confidential and Proprietary

Game Tour

Screenshare tour of new snake project. How the game works, how it runs now, what code is missing, etc.

​

1. What does this version of it do?
2. What is missing?
1. Snake doesn’t eat food
2. Snake doesn’t change directioner

2018 | Confidential and Proprietary

Parts of the game

Breaking the game into smaller pieces

​

1. Let’s make a list of the different components of the game
1. E.g. drawing the board

2018 | Confidential and Proprietary

Drawing the Board

Mini intro to Canvas element

2018 | Confidential and Proprietary

Things you can make with canvas

Games

Animations

Physics simulations

Visualizations

2018 | Confidential and Proprietary

What do we need to draw?

🐍 🍔

2018 | Confidential and Proprietary

Snake drawing code

What do you think these do?

2018 | Confidential and Proprietary

Snake drawing code

Putting it all together.

2018 | Confidential and Proprietary

Let’s see the drawing in action

​

​

​

2018 | Confidential and Proprietary

Let’s see what the game does now

https://snake-ai-part-1.glitch.me/

​

2018 | Confidential and Proprietary

Where’s the board?

2018 | Confidential and Proprietary

2018 | Confidential and Proprietary

Let’s call drawGame(gameState)

2018 | Confidential and Proprietary

Now we should have a board!

🐍🍔

2018 | Confidential and Proprietary

Board background

- Load an image for the background

- Where do we put the code to draw it?

2018 | Confidential and Proprietary

Bonus:

If you get ahead of us, try spending some time customizing the look of the game board.

2018 | Confidential and Proprietary

Game State

Keeping track of what is happening

2018 | Confidential and Proprietary

What information about the game state do we need to keep track of?

2018 | Confidential and Proprietary

Game state

• Where is the snake?
• Which way is it going?
• Where is the food?
• What is the score?

2018 | Confidential and Proprietary

What needs to be updated at each iteration of the game?

2018 | Confidential and Proprietary

Check for players input

Move the snake

Was the food eaten?

Update score, generate new food

Did the snake collide?

Game Over

2018 | Confidential and Proprietary

🏁 Where should we start? 🏁

2018 | Confidential and Proprietary

Check for players input

Move the snake

Was the food eaten?

Update score, generate new food

Did the snake collide?

Game Over

2018 | Confidential and Proprietary

moveSnake

-What does this function do now?

​

​

Side question: What’s unshift do? What would be some good ways to figure it out?

2018 | Confidential and Proprietary

When should we call moveSnake?

2018 | Confidential and Proprietary

2018 | Confidential and Proprietary

Tip: Developer console

You can open the Developer Console (Ctrl+Shift+I, or right click anywhere in the page)

​

Try calling:

updateGame(gameState);

drawGame(gameState);

​

2018 | Confidential and Proprietary

Game Loop

2018 | Confidential and Proprietary

Game Loop

What does setTimeout do?

​

What is this “100” value?

2018 | Confidential and Proprietary

🎉 It moves! 🎉

🐍 💨

2018 | Confidential and Proprietary

What next?

✅

2018 | Confidential and Proprietary

Check for players input

Move the snake

Was the food eaten?

Update score, generate new food

Did the snake collide?

Game Over

2018 | Confidential and Proprietary

Keyboard controls

2018 | Confidential and Proprietary

Listening

How to set up keyboard listeners

​

2018 | Confidential and Proprietary

Open the javascript console while the game is running and hit some keys. What do you see?

2018 | Confidential and Proprietary

Which key got pressed?

​

The browser gives us an event with a bunch of information in it.

​

2018 | Confidential and Proprietary

The event has a keyCode property

Key codes for arrows

​

➡️ left 37

⬆️ up 38

➡️ right 39

⬇️ down 40

​

​

2018 | Confidential and Proprietary

Mapping a key to a direction

We wrote a little utility to map from keycode to the direction

2018 | Confidential and Proprietary

See it in action

Your console should now print the direction of the arrow key you pressed

2018 | Confidential and Proprietary

Capture the player’s

input

2018 | Confidential and Proprietary

Remember how we didn’t finish moveSnake?

Time to connect what direction we want to go with the rest of the game

2018 | Confidential and Proprietary

Incorporating

It in each game

update

If you haven’t yet, time to query player.nextMoveFunction(gameState) during each game iteration

2018 | Confidential and Proprietary

Bonus:

No key press left behind!

What happens if you press multiple keys during a single game iteration?

​

What is the right behavior in that case?

​

Can you change nextCommand to keep track of all of them

2018 | Confidential and Proprietary

Bonus: Reversing direction is not allowed! 🚫

In the original version of snake, you couldn’t reverse direction.

​

If you were heading right and hit the left arrow, nothing would happen. Instead, you’d have to move up or down a row before you turned back to the left.

​

Don’t allow your snake to reverse direction!

​

Hint: Look at the direction you are going and compare it to the direction the key press told you to go.

2018 | Confidential and Proprietary

🎉 The keys control the snake! 🎉

⌨️ 🐍 💨

2018 | Confidential and Proprietary

Progress!

✅

✅

2018 | Confidential and Proprietary

What next?

✅

✅

2018 | Confidential and Proprietary

How do we know if the snake ate the food?

2018 | Confidential and Proprietary

Here’s the function we need to fill in

Hints:

Look at the parameters. What information do they contain?

Look at the name of the function

2018 | Confidential and Proprietary

When should we check if we ate the food?

2018 | Confidential and Proprietary

Remember our friendly moveSnake function and the TODO notes in it?

2018 | Confidential and Proprietary

Back in moveSnake

// TODO

​

We need to check if the snake ate the food, in which case we need to update the score, let the snake grow and generate a new item of food on the board.

2018 | Confidential and Proprietary

Updating the score

- Where do we keep track of the score?

2018 | Confidential and Proprietary

Make more food!

🍔 🍕 🍟 🌯 🍦 🧀 🥞 🍛 🥗 🧆 🥓

​

​

2018 | Confidential and Proprietary

Growing the snake

​

We now need to make sure the snake grows by one unit when it eats the food.

​

How would you do that?

2018 | Confidential and Proprietary

🎉 The snake eats food! 🎉

⌨️ 🐍 💨 🍔

2018 | Confidential and Proprietary

Almost done!

✅

✅

✅

2018 | Confidential and Proprietary

What next?

✅

✅

✅

2018 | Confidential and Proprietary

Ending the Game

2018 | Confidential and Proprietary

How does the game end?

​

How do we tell if we hit a wall?

2018 | Confidential and Proprietary

Where should we check for the end of the game?

Which function gets called on every iteration of the game?

2018 | Confidential and Proprietary

Where do we keep track of whether the game is over?

2018 | Confidential and Proprietary

🎉 We have a full game! 🎉

⌨️ 🐍 💨 🍔 💯

2018 | Confidential and Proprietary

Break Time!

⏸

2018 | Confidential and Proprietary

The Snake AI

Snake AI - Part 2

2018 | Confidential and Proprietary

2018 | Confidential and Proprietary

Demo of AI

demo

2018 | Confidential and Proprietary

New glitch project to remix

snake-ai-part-2

2018 | Confidential and Proprietary

Let’s get started with our first AI player

2018 | Confidential and Proprietary

What does this code do?

2018 | Confidential and Proprietary

Let’s try it

2018 | Confidential and Proprietary

Next: Avoiding the wall

2018 | Confidential and Proprietary

Remember the code to find out when the game is over?

​

This is very similar.

2018 | Confidential and Proprietary

Dealing with a lot of cases can be messy.

​

We can make it cleaner by using helper functions.

​

In Robotics and Physics, we often call this changing the reference frame.

2018 | Confidential and Proprietary

Your turn, put willCollideWithWall and rightTurnDirection to use.

2018 | Confidential and Proprietary

Next: Avoiding collisions with ourselves

Hint: We have done something very similar in part1

2018 | Confidential and Proprietary

Algorithm concepts: Composition

2018 | Confidential and Proprietary

Combining Random with avoiding collisions

2018 | Confidential and Proprietary

AI Concepts: Heuristics VS ML

​

Examples: Chess AI, Autonomous Vehicles

2018 | Confidential and Proprietary

Algorithm Concepts: Greedy

2018 | Confidential and Proprietary

Ideas share: Greedy strategies

2018 | Confidential and Proprietary

Demo of a greedy example

demo

2018 | Confidential and Proprietary

Ideas share: non-greedy strategies

2018 | Confidential and Proprietary

Demo of “Slow and Steady”

Tip: Is there a way we could fast-forward?

2018 | Confidential and Proprietary

Time to unleash your creativity

2018 | Confidential and Proprietary

Which strategies worked well? Which didn’t?

2018 | Confidential and Proprietary

Two players

Demo time

2018 | Confidential and Proprietary

Do our AI strategies change for 2-players?

2018 | Confidential and Proprietary

Multiplayer

Battle time!

Snake AI - Part 3

2018 | Confidential and Proprietary

2018 | Confidential and Proprietary

Tools & Technologies

​

​

​

​

• WebSockets using socket.io
• For client-server communication

​

nst each other

2018 | Confidential and Proprietary

Going multiplayer!

2018 | Confidential and Proprietary

Let’s chat about Client and Server

2018 | Confidential and Proprietary

Player 1

Player 2

gameState

gameLoop

Client aka your computer

Client-only game

2018 | Confidential and Proprietary

Player 1

gameState

gameLoop

Client 1

Client+Server game

Server

Player 2

Client 2

Game commands

Game commands

2018 | Confidential and Proprietary

But how does it work?

2018 | Confidential and Proprietary

Client sends messages to server

​

2018 | Confidential and Proprietary

And the server handles each message the client sends

​

2018 | Confidential and Proprietary

Same game loop, but on the server side

​

2018 | Confidential and Proprietary

Cool. Now let’s play!

snake-ai-part-3

2018 | Confidential and Proprietary

Thank you.

Questions?

2018 | Confidential and Proprietary