TicTacToe With the MakeyMakey

by ngaimat in Craft > Cardboard

305 Views, 0 Favorites, 0 Comments

TicTacToe With the MakeyMakey

Screenshot 2022-03-06 154456.png

I created a real life Tic-tac-toe game where you can actively interact and play it as if it was actually online. I used the Makey-Makey to connect my code with my Tic-tac-toe board that I built so you can touch it and appear X or O. I wanted to make something for people to actively play and be able to have fun, so i made a simple game which doesn't need a lot of effort to learn. By playing this game you can have fun with people around you learn and create new strategy's and be able to touch the actually board that is represented online in real life. Since this game is mostly played by the younger audience i think it would be fun for them to find a new way to use their skills and be able to adapt to certain situations to be able to win or lose based on the decisions they made.


Supplies

TV Disk Cover

Tape

Conductible buttons

And a rubber sheet of any kind

Makey Makey Kit

Chromebook, Laptop, or a Computer

Copper tape.

X-Acto knife


Designing the Start Screen

Screenshot 2022-03-06 155626.png
Screenshot 2022-03-06 155731.png
Screenshot 2022-03-06 160029.png

1.) All you have to do for the Background is made a Textbox and write "Welcome to Tic-tac-toe" and you should be done with the background.

2.) For the sprite you'll be needing create a white rectangle long enough to fit the words "Press To Begin" and that is it for designing the sprites.

3.) The coding part is simple, take your newly create "Press To Begin sprite and add the code When Start Screen is clicked show and When this sprite is clicked Broadcast anything I used "Start and then hide it.

4.) Now go into your background and make a code called When I Receive and add your broadcast message so in my case I would put "Start" then add switch to backdrop to what your main backdrop is.

5.) Find a Tic-tac-toe backdrop you like and import into the scratch backgrounds (it has to be transparent for it to work) and set that backdrop as the backdrop it will switch to once you click the button.

Coding the Tic-tac-toe Board

Screenshot 2022-03-06 185708.png
Screenshot 2022-03-06 185932.png
Screenshot 2022-03-06 190556.png

1.) To be Making the Tic-tac-toe Board you first have to start by making a white square, an X, and a O.

2.) Once you have made your X, White Square, and Circle you have to make them so that they fit in the Tic-tac-toe Squares/Boxes.

3.)You have to Make the variables A1, A2, A3, B1, B2, B3, C1, C2, C3, and Turn

4.) After you finish this you have to start coding each one which is pretty simple you first make the code when this sprite is clicked Add a If then statement and put (If Turn=X) you switch it costume X and set A1 To X and set the Turn to O and add wait 1 second to the end of each set turn . Once you Finish this you can just paste it to each of your sprites labeled A1, A2, A3, B1, B2, B3, C1, C2, C3 and change the Letter to Numbers based on the name of the Box. A1, A2, A3 would be on the very top then it goes B1, B2, B3 and then C1, C2, and C3 this goes from Left to right. Then add a check for winner broadcast which you will need later.

5.) Then you add another one but instead of when this sprite is clicked make it so it has the MakeyMakey command when "...." is pressed and add the script you just wrote.


Coding the Winning Part

Screenshot 2022-03-06 192746.png
Screenshot 2022-03-06 192804.png
Screenshot 2022-03-06 192812.png
Screenshot 2022-03-06 192826.png
Screenshot 2022-03-06 192834.png

1.) The First thing you have to do is make a Black Rectangle big enough to be able to fit the words "X Wins" And "O Wins".

2.) After that go to your backdrop and make a when start clicked switch to the the start screen backdrop and then set all the A1, A2, A3, B1, B2, B3, C1, C2, C3 variables to 0.

3.) make a Block called Define Check Winner Box 1, Box 2, and Box 3. Now add a If statement to that if statement you're gonna add 3 operator named and put them on each other one the right hole. Then you make it so Box 1 = Box 2, Box 1 = Box 3, and Box 1 = 0. Then add a if else statement inside the other if statement you just made, Make it so If Box 1 is = to X then broadcast X wins and switch the backdrop to nothing since whoever wins is gonna have the X or X rectangle drop down. Same thing with the O broadcast O wins and switch backdrop to nothing. Now Back to adding the check for winner broadcast earlier add a When I Receive "check for winner" make your block you made Check for winner in( A1, A2, A3,) (B1, B2, B3,) (C1, C2, C3) (A1, B1, C1,) (A2, B2, C2,) (A3, B3, C3,) (A1, B2, C3,) (A3, B2, C1)

4.) Go to the sprites you just made O Wins and X wins add When Start clicked hide. Then add When I receive O wins go to (Which ever coordinates you want) and glide 0.5 secs to 0,0, Same thing for the X wins but instead its When i receive X wins instead of O wins.

Making the Actual Game in Real Life

IMG_5271.jpg

1.) get the two disk cases and tale them together horizontally.

2.) put the cloth/Rubber clothe over the two disk and then take them together.

3.) turn to the back of the disk cases and get a good silver duct tape and tape the entire back and the edges of the from so it doesn't fall out.

4.) get the buttons and put them where you want it and when you find the place you want it make holes at the edge of the disk where the buttons are.

5.) Once the holes are made you can put the Copper tape through them and tape them down which will be the conductor and how you touch and get the X and Os on the screen.

6.) organize your MakeyMakey and put the alligator clips on it you can tape the alligator clips to organize it better.