Sorry your browser is not supported!

You are using an outdated browser that does not support modern web technologies, in order to use this site please update to a new browser.

Browsers supported include Chrome, FireFox, Safari, Opera, Internet Explorer 10+ or Microsoft Edge.

Newcomers DBPro Corner / Writing Tic-Tac-Toe With Mouse Input [Newbie]

Author
Message
StaticBase
10
Years of Service
User Offline
Joined: 23rd Nov 2013
Location: Future
Posted: 26th Jun 2014 08:40 Edited at: 26th Jun 2014 12:04
Link
Hello,

I'm really just getting into writing code, Dark Basic and tic tac toe is where I want to start - simple on paper, definitely challenging in practice, as I've been on and off attempting this for months now.

GOAL:
Write a 2-player, code-only tic-tac-toe game with mouse input.

STRETCH GOALS:
- Add media such as sound fx
- Create an AI
- Create a menu

I am absolutely not interested in the stretch goals and don't want to discuss or think about them until the original goal is met.

So let me begin with how I am approaching this currently:

SETUP:


Since I want the game grid centered on screen I've created variables for this purpose, the next variable "divi" divides the screen's height into 10 pieces. The purpose is best explained by this illustration. Inside the main loop I have "mx" and "my" keeping track of my mouse position and printed out in the corner of the screen for debugging purposes. Moving on: drawing the game board.

GAME BOARD:


The position of the grid is based on the center of the screen, while the proportions are based on the variable "divi". I made two variables "gridX" and "gridY" which marks the top-left boundary of the playing field. From there it's just calculating the lines using these pieces of information. This is the result from this sub-routine.

MOUSE DETECTION:


"boxcenterX" and "boxcenterY" mark the center of the top-left box in the grid. That box is assigned an ID of 1,1 using the "idX" and "idY" variables for debugging purposes. Using the center of that box, the for next loop that follows marks the center of the remaining boxes by jumping over using the distance "gridY" which is a full box length. In this process it also assigns the boundaries of each box in the "left" "right" "top" "bottom" variables. Using these boundaries I am able to detect which square the mouse position is currently located in. I got the idea from this person's post, and quite heavily modified it. This is an older image I made, which used obscure experimental variables back then, but it illustrates the function of this for next loop nevertheless.

WHAT NEXT...?

This is the point where I got stuck. I have been experimenting for the last few days how to move on. I can't quite figure out - when I click on a tile, how should I store that information? I've gotten to the point where I click on a tile and print a gigantic "X" in that tile but as soon as I release the mouse button, it vanishes. It has something to do with the main loop's "CLS" and "SYNC" functions, but those are a necessity for the program, I can't just remove them.

Also, I've been trying my dang hardest to wrap my mind around arrays, but I understand that they are the key to solving this problem. Honestly, hours of reading still hasn't helped me. I suppose I understand the purpose of an array, maybe even its function. But for the love of code I do not understand how to implement one in code, in practice.

I would love for somebody to present me with some extremely simple problems that implement array, so that I could solve them. I would love a couple that follow a slow but steady learning curve, so that I can master it and figure out how I can implement it into my tic-tac-toe game.

Thanx guys, I'll check back frequently and update!

EDIT: It may help to see the full code as it is right now. Just copy/paste into your DarkBasic Pro editor and launch:

Back to top
Profile PM Email
StaticBase
10
Years of Service
User Offline
Joined: 23rd Nov 2013
Location: Future
Posted: 26th Jun 2014 12:01
Link
OK here is what would help me solve the problem:

Let's say I do something really simple like divide the screen into 4 sections. I have my mouse cursor and on the top left, using the "PRINT" command I keep track of my mouse position like so:


When I hover over any part of the quadrant, it gets highlighted with a slightly lighter color, so that I know which quadrant my mouse is hovering over, like so:


And when I click on a selected quadrant, I spawn an "O" using the "TEXT" command in the center of that quadrant no matter where I clicked on it, like so:


But then I am free to chose my next quadrant, this one staying in its place. The next one I place changes into an "X" and appears in the center of the section I click without disappearing. Then the next one is an "O" again. And finally an "X" for the last one, like so:


And when they are all full, a message pops up on screen... anything like "Complete!" and the board resets so I can start over again.

This is pretty much the problem I am facing right now, but simplified. If I can solve this, I can move ahead. How would you accomplish this?
Back to top
Profile PM Email
Derek Darkly
12
Years of Service
User Offline
Joined: 22nd Sep 2011
Location: Whats Our Vector, Victor?
Posted: 26th Jun 2014 19:00 Edited at: 26th Jun 2014 19:37
Link
Hope this helps, or that someone has something better.



666GO†O666
Back to top
Profile PM
StaticBase
10
Years of Service
User Offline
Joined: 23rd Nov 2013
Location: Future
Posted: 27th Jun 2014 06:18
Link
Hi derek thanx for your quick reply. Your code is well-written but I ran into the problem where I click and nothing shows up. I played around with it and got the "X" to show up in the correct quadrant, but as soon as the mouse button is released, the symbol disappears. This is the issue that I'm trying to resolve with my tic-tac-toe game too.

Luckily, I ran into a forum post which gives me an idea of how to finally store all the symbols in their correct cells and store that information:
http://forum.thegamecreators.com/?m=forum_view&t=211356&b=7&msg=2523591#m2523591

I don't have anything to show at the moment, but I will incorporate phaelax's example into your code and see if I can get this working the way I want it to. I will post the result soon because I do want feedback on making the code clean before it's implemented in my tic-tac-toe game.

Thnk you again, Derek
Back to top
Profile PM Email
TheComet
16
Years of Service
User Offline
Joined: 18th Oct 2007
Location: I`m under ur bridge eating ur goatz.
Posted: 27th Jun 2014 11:04
Link
The solution is indeed an array.

Arrays are very easy to understand. You already know what variables are, right? Well, imagine you had a variable for every tile in your grid, like so:



The purpose of which is to store either an "X" or "O", depending on where the player clicked.

Instead of having to write 9 variables, you can just create an array:


And instead of having to fill each and every one of them with an empty string "", you can use a for-loop to iterate over it:


hands are ruined by repetitive stroking... - Mr. V, 2014
Back to top
Profile PM Email Website
StaticBase
10
Years of Service
User Offline
Joined: 23rd Nov 2013
Location: Future
Posted: 27th Jun 2014 23:41
Link
Hi TheComet thank you for responding!

I suppose I understand how to create an array, it's the same as your example simply because it makes sense for a 3x3 board. So I've made one before my main loop:


(P.S. is this in any way wrong? Should the array be inside the loop or is it fine where it is right now? This just made the most sense to me since I only need one and in my test runs an array inside the loop crashed the program)

I then updated my "mouse" subroutine and at the moment when the mouse is hovering over a cell and highlights the cell, I added an "IF" statement checking for a mouse click, which then uses the local variables to write an "X" string to the corresponding space in the array (if I am understanding this correctly).


Since this is a test run, I am just writing one piece of information to the array because I simply want it to show up. At this point I am just not sure how to PRINT this information inside the array to the screen. The "X" shows up in the correct spot when the mouse button is DOWN, as soon as it is RELEASED it disappears.

I need to find a way to display the information written to the array, a draw function or some sort that probably goes somewhwere in the main loop.

P.S. haven't mastered functions either :$
Back to top
Profile PM Email
TheComet
16
Years of Service
User Offline
Joined: 18th Oct 2007
Location: I`m under ur bridge eating ur goatz.
Posted: 28th Jun 2014 19:10
Link
At first glance it looks about right. You've got one thing wrong, though. Array indices start at 0, not at 1, so if this is your code for iterating:


Then you should be subtracting the array indices by 1:


You're clearing the screen every loop, so you have to re-draw everything. I would remove the code that prints the "X" from your mouse subroutine:


And create a new subroutine for drawing the array:


hands are ruined by repetitive stroking... - Mr. V, 2014
Back to top
Profile PM Email Website
Derek Darkly
12
Years of Service
User Offline
Joined: 22nd Sep 2011
Location: Whats Our Vector, Victor?
Posted: 30th Jun 2014 00:53 Edited at: 30th Jun 2014 00:53
Link
Quote: " Array indices start at 0, not at 1"


True, but you don't have to use the whole array, you can just use what you want of it. That's been my experience anyway.

666GO†O666
Back to top
Profile PM
Katyman
FPSC Reloaded TGC Backer
11
Years of Service
User Offline
Joined: 5th Oct 2012
Location: Katy, Texas USA
Posted: 24th Jul 2014 01:53
Link
Back in 2004 I wrote a kid game for Water Conservation that used Tic-Tac-Toe in Dark Basic. Take a look at this code and see if this will help. The "X" and "O" were BMP's of the Water Conservation mascott and WCP logo. You can make your own "X" and "O" to sub for them and remove/replace "background.bmp" for something you like. The code is not copyrighted.

When old programmers die...do they decompile?

Attachments

Login to view attachments
Back to top
Profile PM Email
Back to top

Login to post a reply

Server time is: 2024-04-20 03:34:34
Your offset time is: 2024-04-20 03:34:34