|
SoCoder -> Article Home -> Coding Basics |
|
|
|
|
Jayenkai
|
MidletPascal : Cookie : Tic-Tac-Toe part oneMade for my Cookie : It's good enough for me |
|
Note : These tutorials have been created for an "LG Cookie" centric forum, and as such are targetted at that phone. They're also aimed at folk who may/may not be all that good at coding. Only time will tell if folk are able to follow!! Tic-Tac-tuTOErial : Part One Tic Tac Toe's a very simplistic game. Each player takes it in turns to draw either an x or an o in the grid. Whoever gets a line wins. Unfortunately, computer's don't have a "Draw a tic-tac-toe grid" command, nor a "Take it in turns" command. Kinda sucks. We have to do it all ourselves. Note, if you're struggling with things so far, they're about to get worse.. Take a breather, re-read the last part, and make sure you know what's going on. Load images First off, let's draw our two images. For the purposes of our game, let's make each one 64x64 pixels, and call them Ecksy.png and Ohsie.png, so we can remember which one's which! Next, open Midlet Pascal, and start a new project. Replace the sample script with in our basecode. Create yourself two variables to hold the images, and load the images in. var ecksy,ohsie:image; ^Variable section ecksy:=loadimage("/ecksy.png"); ohsie:=loadimage("/ohsie.png"); ^Loading section Next, we need to make a grid. If you Compile and Run at this point, you'll see nothing special, but at least you can be sure that it's compiled! Superfast "Array" tutorial! First off, we'll create a chunk of memory for the grid to fit into. This is called an Array. Whereas before we've used variables to hold single items, an Array will let us place a whole bunch of things into a single name. Think of it like a map. Whereas before we created a single name for a single item, this time we're drawing a map, with a grid on it. We create a grid reference, link it to a single variable, and then each point in the grid reference can hold a different value. For tic-tac-toe, we need a 3x3 grid, so we set up an array to be 3x3. var Playground:array[1..3,1..3] of integer; ^ Variables section our grid now has "1 to 3" across, and "1 to 3" down. When we need to access each point, we use the variable's name, and a grid reference to do it. eg, the top left would be, Playground[1,1], bottom left would be Playground[1,3] and top right would be Playground[3,1] Following? Good! Let's carry on. If you run at this point, you'll just be checking your Array line is right! We've not really done anything yet! Superfast "For..Loop" tutorial! To count from 1 to 3, we need to make a "For" loop. example For n:=1 to 10 do begin n_Times_10:=(n*10); end; ^ don't put that in your game, it's just an example! Within the loop above, the first time it passes through, the variable n_Times_10 would be 10. This is because the first time, n is equal to 1. The loop then procedes to count though all the rest of the number, so slowly but surely, n_Times_10 would pass from 10, up to 100. After n=10, the loop ends, and the program continues. True, the example above it useless, but it's just an example! Now, let's make things tricky by combining two for-loops together, so we can filter through all of our boxes. var x,y:integer; ^ Variable section. These will be used over and over again in our program. They're our multi-purpose Grid Reference numbers. When the player clicks, we'll set them to the position they clicked in. We'll also use them to flick through the grid, check for winners, and other things. For now, we'll reset the grid back to nothing. for x:=1 to 3 do begin for y:=1 to 3 do begin Playground[x,y]:=0; end; end; ^ Loading section. A nice twisted mess of loop! The loop will count from 1 to 3 placing the value into x. But within each count, it'll also count 1 to 3, placing that value into y. ; start of x 1st. x=1, y=1 ; start of y 2nd. x=1, y=2 3rd. x=1, y=3 ; end of y ; next x 1st. x=2, y=1 ; start of y 2nd. x=2, y=2 3rd. x=2, y=3 ; end of y ; next x 1st. x=3, y=1 ; start of y 2nd. x=3, y=2 3rd. x=3, y=3 ; end of y ; end of x If you can understand that flow, you're getting really good at this! Give yourself a pat on the back! In our code above, we take the values of x and y, and use them as grid references for Playground, resetting each point to 0. We do this because, even though we only just made the boxes, memory isn't perfect. You should ALWAYS reset things before you use them. It gets messy otherwise. Once you grasp it, the loop above is incredibly simple, but I'm expecting a flurry of "WTF's" to come after I've posted this! No matter, let's carry on anyway!! If you run at this point, there's still nothing to see  Mass Confusion : Never mind : Draw a grid, instead! MidletPascal contains some handy drawing commands, so we'll use those to draw our grid. Within your main loop, let's create 4 lines on the screen. First, Depending on what color your background is, and your X's and O's, you'll want to find a suitable drawing color. I picked white. Nothing wrong with that! SetColor(255,255,255); ^ Main Game loop Then add 4 lines onto the screen, suitably spread apart. 2 go across, 2 go down. // Two Down, one at 80, one at 160 Drawline(80,0,80,240); Drawline(160,0,160,240); // Two Across, same spacing. Drawline(0,80,240,80); Drawline(0,160,240,160); ^ Main Game loop Simple stuff. Next, setup the drawing function so it can draw our icons when it needs to. for x:=1 to 3 do begin for y:=1 to 3 do begin if Playground[x,y]=1 then drawimage(ecksy,(x*80)-72,(y*80)-72); if Playground[x,y]=2 then drawimage(ohsie,(x*80)-72,(y*80)-72); end; end; ^ Main Game Loop You should be able to follow that, but.. about that (*80)-72 bit! 1*80 is 80. But if we draw an Ecksy at 80, that's hitting the grid. Our Ecksy is 64 pixels wide, and the gap is 80.. 80-64 leaves 16, 16/2 is 8. So to center the Ecksy inside the gap, we need to move it left (64 + 8) pixels.. So (1*80) - 72! the same works for the y co-ordinate, and since we're inside those handy For Loops, the exact same will happen for each of the grid points. Lovely stuff! If you run the game, now, you'll see the grid of lines onscreen, but still no X's or O's showing up, because our grid reference is still all 0's Tap-Tap-Tap! Hop back to the middle of that loop, just under the drawing area. We need to check the following. If the stylus is inside the area of the grid, AND held on the screen, AND not already registered, AND the grid reference is set to 0.. So, first, the inside of the area is.. X Area is (x*80)-80 to (x*80), and Y Area is (y*80)-80 to (y*80) We check the stylus is inside there, like so. if (mx > ((x*80)-80) ) and (mx < (x*80) ) and (my > ((y*80)-80) ) and (my < (y*80) ) then begin //Next bit goes in here.. end; Inside that bit, you then want to check that the stylus is held, and not already registered. if (mdown=1) and (mudown=0) then begin //Next bit goes in here.. end; And then inside THAT bit, you want to check the grid is 0. if Playground[x,y]=0 then begin //Next bit goes in here.. end; *phew* The inside of that, should now contain the rules to set the grid. Playground[x,y]:=1; mudown:=1; For now, we've just set it to 1. If you compile and run at this point, you can click in a grid point to draw an x. Success!! Now, if you're new to coding, you've probably just struggled through an AWFUL lot of stuff, here. Arrays and For-Loops are complex things, especially when doing multi-dimensional stuff, which is what we're done here. I'll stop this tutorial at this point. If you try it out, follow through well, you should be able to get this all to run. If not, have another read. Try to understand the concepts we're working with, and then freak out when you realise that this is only Tic-Tac-Toe. Imagine how complex Chess would be!! .. Blimey! If you've any questions, leave 'em below. Here's what you should have, so far.. Only look if you REALLY can't quite manage! No cheating! In the next part.. 1. Getting both players working, and taking turns. 2. Adding a reset button 3. Adding rules, so the game knows when someone's won. and, maybe even.. 4. Adding a computer player.. dum-dum-durr... |
|
|
|
|
Comments |
|
| |||
|
| ||||