Tic Tac Toe
Jaap MurreTic Tac Toe game demo, used elsewhere in a two-player mode (over Internet). Illustrates how to handle events (clicks) on many different blocks by defining a function that itself returns a function (a so called handler).
If you are a registered user and signed in, you can here copy this script and its stimuli to your own account, where you can edit it and change it in any way you want.
It is absolutely free to register (no credit card info asked!). You can then instantly copy this experiment with one click and edit it, change its accompanying texts, its landing page, stimuli, etc. Invite your colleagues, friends, or students to check out your experiment. There is no limit on how many people can do your experiment, even with a free account.
The catch? There is no catch! Just keep in mind that with a free account, you cannot collect data. For teaching that is usually not a problem. For research, prepaid data collection (unlimited subjects) starts as low as €10.00 for a 10-day period.
var r, c, blocks = [], b, selected_block;
for (r = 0; r < 3; ++r) {
for (c = 0; c < 3; ++c) {
b = addblock(21+r*20,21+c*20,18,18,"lightgrey");
b.on("click",onClick(b));
b.index = r*3 + c;
blocks.push(b);
}
}
function onClick(block) {
return function() {
if (block.used) { // Cannot change X or O, if already one present
return;
}
var b = block, // This ties the block to this function
event;
b.style("background-color","yellow"); // Show as selected
event = awaitkey("o,x"); // Wait for either the O or X key to be pressed
b.text(event.key,200); // Show the key's letter at size 200%
b.style("background-color","lightgrey"); // Show as not selected
b.used = true; // This block (position) has been taken
b.letter = event.key;
var winner = checkWinner();
if (winner) {
await(500);
blocks[winner[0]].style("background-color","orange");
blocks[winner[1]].style("background-color","orange");
blocks[winner[2]].style("background-color","orange");
}
}
}
function checkWinner() {
var b = blocks;
function check(x,y,z) {
if ((b[x].letter === b[y].letter && b[y].letter === b[z].letter)
&& b[x].letter) { // Include last to check for empty string
return [x,y,z];
}
}
return check(0,1,2) || check(3,4,5) || check (6,7,8)
|| check(0,3,6) || check(1,4,7) || check(2,5,8)
|| check(0,4,8) || check(2,4,6);
}
awaitkey("ESCAPE");