GigglingCorpse

Long days ago I spoke with a dentist of game demos, and of a festival dedicated to those. We talked of Ticktacktoe, a classic game of boxes and shapes – a boring, beatable game, but an easy one to program.
It’d be easy to program, right? We could probably make one with flash in less than thirty minutes, couldn’t we? At least one way to find out!

Yup. Sure could!

Ticktacwhatsit is made up of nine (9) blocks, and each can be either blank, an X, or an O. That’s so easy to represent in flash!

I started by making a symbol called called block which had two layers and three keyframes on one layer: blank, X, and O. On the other layer, i added the action stop(); to prevent it from flipping through the frames.

I dragged 9 instances of block onto the stage, and arranged them into a game board (named them in sequence) – and drew some lines between them.

And then I wrote the game code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57

var boxes:Array = [ b0, b1, b2, b3, b4, b5, b6, b7, b8 ];
var nextSymbol:int = 0;
 
removeChild( done );
done.addEventListener( 'go_again', restart );
 
function restart( e:Event ) : void {
	nextSymbol = 0;
	for( var i:int=0; i < boxes.length; i++ ) 
		boxes[i].gotoAndStop( 1 );
	removeChild( done );
}
 
for( var i:int=0; i < boxes.length; i++ ) {
	boxes[i].addEventListener( MouseEvent.CLICK, onClick );
	boxes[i].buttonMode = true;
}
 
 
function onClick( e:MouseEvent ) : void {
	if ( e.currentTarget.currentFrame == 1 ) {
		e.currentTarget.gotoAndStop( nextSymbol+2 );
		if ( checkGame() ) {
			trace( 'won!' );
			done.gotoAndStop( nextSymbol + 1 );
			addChild( done );
		}
		nextSymbol = (nextSymbol+1)%2;
	}
}
 
function checkGame() {
	for( var t:int=0; t < possible.length; t++ ) {
		var val:int = boxes[possible[t][0]].currentFrame;
		for( var i:int=0; i < possible[t].length; i++ ) {
			if ( boxes[possible[t][i]].currentFrame != val || val == 1 )
				break;
			else if ( i == 2 )
				return true;
		}
	}
	return false;
}
 
 
var possible:Array = [
		[ 0, 1, 2 ],
		[ 3, 4, 5 ],
		[ 6, 7, 8 ],
 
		[ 0, 3, 6 ],
		[ 1, 4, 7 ],
		[ 2, 5, 8 ],
 
		[ 0, 4, 8 ],
		[ 2, 4, 6 ]
	];

So the main idea is that we have a bunch of boxes and whenever one of them gets clicked, we may have to do something. I added each of the boxes to an array (line 1), so I could easily loop through them all (line 14), and set the buttonMode and add an onClick event handler to each. A true buttonMode tells flash to display the little hand when you mouseover the object.

The main processing is done whenever you click a block, and the onClick event handler starts on line 20. That’s really all there is to the game, the rest of the stuff are just extras.

The mouse event is passed as a param to the event handler. Its currentTarget property represents the object clicked, which in this case is one of the blocks.
The first test to do on that block is see if it’s empty. If it’s not empty, there’s nothing for us to do.
A block is empty if it is still on its first frame, which is where currentFrame comes in. If it’s not on its first frame it’s either an X (frame 2) or an O (frame 3).

If it is empty, I need to either fill it with an X or an O, whichever wasn’t used last. For this, I have the nextSymbol variable, which is only ever either a 0(X) or a 1(O). I set the block using its gotoAndStop function, passing it the frame we wish it to change to.

After that, I just check if a player has won!
I was pretty lazy about checking; I made a list of every possible victory combination (line 46), and check each of those (line 32) to ensure all the squares in each aren’t on the same frame, or on frame 1 (line 36).

Done!

Line 28: I wonder why I did nextSymbol = ( nextSymbol + 1 ) % 2; instead of nextSymbol ^= 1; Laziness?

Dev, Uncategorized, being helpful to people less experienced than myself in the ways of the world; mostly in the ways of the web actually Actionscript, Flash, Games, Programming

People tend to over-react. I’m not sure why; they must derive some enjoyment from it.

And I could definitely see that being the result of this: web2.0collage.com.

If pleasure from paranoia is your thing, that’s cool we can still be friends. But you should probably skip the rest of this post because I will point out that it cannot see which websites you’ve visited, so much as detect whether you’ve visited a website. A small, but in my opinion, very important distinction. The two would be equivalent if it checked every possible URL.

It works as follows:
There is a specific a tag. CSS defines its :visited style, so that when it points to a page you’ve been to it changes colour and size. Javascript then goes through a list, and for each entry points that tag to the corresponding URL. It then checks the style the browser has applied to it. If it matches that defined in the css’s :visited, it decides you’ve been there. If not? Maybe you hate that site and avoid it at all costs.

Nothing really special, just a clever-ish if ugly-ish (sorry) use of Javascript and CSS.

Uncategorized, being helpful to people less experienced than myself in the ways of the world; mostly in the ways of the web actually Javascript

And how I would do one with Javascript.. so I did. Here's a list of some books I've read semi-recently. The scores are not super well-considered.

show 4 per page
show all

You can have more than one per page, and it's easy to add them. This line of code will do it:
var table = new SortableData( data, headings, settings );

• data is a list of data objects. Each object corresponds directly to a row in the table. An example of the data object:
  { author: 'Alastair Reynold', score: 8, book: 'Chasm City' }
  
   
• headings is an array of data objects. Each describes a column of the table. An example of a heading data object:
  { key: 'author', value: 'Author', type: 'String' }
  
   
• settings is an object whose values are used to overwrite the SortableData object's defaults. You can specify fields like page_size, and page. An example of a settings object:
  { page_size: 5 }
  
   

The SortableData.js file must be included, as it describes the object.

So for each table we instantiate a new SortableData object. That guy takes care of writing and updating HTML, and the paging. But how do we reference the object for the necessary onclick events (clicking a heading to sort by a column, or a page link to view that page)? I chose to do is maintain a static instances array within SortableData. On instantiation, each object assigns itself a unique ID, and adds itself to the instance array.
Static SortableData functions handle the click events. Each function takes, as one of its parameters, a SortableData instance ID and calls the appropriate functions on the instance with that ID. And it even works! First try, in fact!

Then some CSS to style the HTML outputted, and that's it! We're done.

It'd be easy to write a wrapper object that loads data via AJAX, ideally receiving appropriately formatted JSON, but I am pretty lazy. And really, what use do I have for a sortable table?

Dev, being helpful to people less experienced than myself in the ways of the world; mostly in the ways of the web actually Books, Javascript, Web Development

Came across a weird bug the other day, but it had a simple solution which Google (through ignorance or malice, though I hope the former) kept from me.

Typing the = character into flash resulted in a + when using Firefox!

The KeyboardEvent handled claimed:

• keycode = 107
• shift = false
• charCode = 43
• location = 3

But that’s not the right key! That’s the + key on the number pad! We were expecting:

• keycode = 187
• shift = false
• charCode = 61
• location = 0

Now you might be thinking one of two things: Slanty, slanty Firefox; or, I don’t believe it for even a second.
So here are some examples:

This one should display a + when you hit =, if you’re using Firefox:

This one should work as expected:

The difference between those two is the wmode used when embedding. The first uses transparent, the second doesn’t.

Solution

If you want to be able to type = in Firefox, change the wmode parameter from transparent to anything else (direct, normal, or gpu) when embedding the swf.

being helpful to people less experienced than myself in the ways of the world; mostly in the ways of the web actually Bugs, Firefox, Flash