Numbers game
11
Numbers Game Joel Grus @joelgrus Chief Scientist, VoloMetrix
-
Upload
joelgrus -
Category
Technology
-
view
421 -
download
0
description
This is a lightning talk for the Seattle AngularJS meetup, it's about a game I built for my daughter.
Transcript of Numbers game
![Page 1: Numbers game](https://reader036.fdocuments.net/reader036/viewer/2022082807/554d2beab4c905c5208b51b5/html5/thumbnails/1.jpg)
Numbers GameJoel Grus@joelgrus
Chief Scientist, VoloMetrix
![Page 2: Numbers game](https://reader036.fdocuments.net/reader036/viewer/2022082807/554d2beab4c905c5208b51b5/html5/thumbnails/2.jpg)
Toy Project with Two Goals
• Learn AngularJS• Make fun / educational game for 2-year-old daughter
(Am a AngularJS newbie, so no guarantees that code is well-designed!)
![Page 3: Numbers game](https://reader036.fdocuments.net/reader036/viewer/2022082807/554d2beab4c905c5208b51b5/html5/thumbnails/3.jpg)
Concept
• Random permutations of colors/labels• Voice tells you which to click
on (“Orange 4”) and whether you clicked right or wrong• 3 game types• Just numbers• Just letters• Numbers and letters
• 2 voice options
![Page 4: Numbers game](https://reader036.fdocuments.net/reader036/viewer/2022082807/554d2beab4c905c5208b51b5/html5/thumbnails/4.jpg)
![Page 5: Numbers game](https://reader036.fdocuments.net/reader036/viewer/2022082807/554d2beab4c905c5208b51b5/html5/thumbnails/5.jpg)
Simple index.html
![Page 6: Numbers game](https://reader036.fdocuments.net/reader036/viewer/2022082807/554d2beab4c905c5208b51b5/html5/thumbnails/6.jpg)
Choosers
![Page 7: Numbers game](https://reader036.fdocuments.net/reader036/viewer/2022082807/554d2beab4c905c5208b51b5/html5/thumbnails/7.jpg)
Game Board
![Page 8: Numbers game](https://reader036.fdocuments.net/reader036/viewer/2022082807/554d2beab4c905c5208b51b5/html5/thumbnails/8.jpg)
Lean on CSS
![Page 9: Numbers game](https://reader036.fdocuments.net/reader036/viewer/2022082807/554d2beab4c905c5208b51b5/html5/thumbnails/9.jpg)
Create / shuffle the board
![Page 10: Numbers game](https://reader036.fdocuments.net/reader036/viewer/2022082807/554d2beab4c905c5208b51b5/html5/thumbnails/10.jpg)
And here’s what happens when you click
![Page 11: Numbers game](https://reader036.fdocuments.net/reader036/viewer/2022082807/554d2beab4c905c5208b51b5/html5/thumbnails/11.jpg)
Demo
• Check out the code at
github.com/joelgrus/numbers-game