You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
97 lines
3.0 KiB
97 lines
3.0 KiB
// This is the simple version of brain game. It shuffles only once,
|
|
// and does so by setting a class on an element to shift it.
|
|
// In this version, there are no ids, and a elements will only
|
|
// receive a single class (so there are some workarounds with these restrictions).
|
|
|
|
$(function() {
|
|
|
|
console.log('app.js jquery');
|
|
|
|
var $board = $('#board');
|
|
var $startShuffle = $('#start-shuffle');
|
|
var $message = $('#message');
|
|
|
|
// variables declared globally for use in all functions
|
|
var randomBrain;
|
|
var state;
|
|
|
|
// resets the board, the start button, and the message prompt
|
|
var reset = function() {
|
|
state = "start";
|
|
$startShuffle.text("START");
|
|
$startShuffle.css('background-color', 'cadetblue');
|
|
$startShuffle.css('color', 'white');
|
|
$message.text('Click Start to give a brain an idea');
|
|
$board.html("");
|
|
for (var i=0; i < 3; i ++) {
|
|
var $brain = $('<div>');
|
|
$brain.addClass('position' + i);
|
|
$brain.html('<img src="brain.png"/>');
|
|
$board.append($brain);
|
|
}
|
|
}
|
|
|
|
// run the reset function on window onload
|
|
reset();
|
|
|
|
// click handler for the start button,
|
|
// changes which function is invoked depending on the stage of the game
|
|
$startShuffle.click(function() {
|
|
if (state === "start") {
|
|
giveIdea();
|
|
} else if (state === "shuffle") {
|
|
shuffleBrains();
|
|
} else if (state === "reset") {
|
|
reset();
|
|
}
|
|
});
|
|
|
|
// selects a random brain, sets the randomBrain variable, shows the light, and sets the
|
|
// state variable for the start button
|
|
var giveIdea = function() {
|
|
randomBrain = Math.floor(Math.random() * 3);
|
|
$('.position' + randomBrain).html('<img src="brainlight.png"/>');
|
|
$startShuffle.text('SHUFFLE');
|
|
$startShuffle.css('background-color', 'coral');
|
|
$message.text("Press SHUFFLE to shuffle the brains");
|
|
state = "shuffle";
|
|
}
|
|
|
|
// shuffles the brains on the page
|
|
var shuffleBrains = function() {
|
|
$('.position' + randomBrain).html('<img src="brain.png"/>');
|
|
var positions =[0, 1, 2];
|
|
var assigned = false;
|
|
|
|
// loops over all the brains (the children on the board)
|
|
// and gives them a new random position class.
|
|
// also sets click events for each.
|
|
$board.children().each(function() {
|
|
var newPosition = positions.splice(Math.floor(Math.random() * positions.length), 1);
|
|
if (!assigned) {
|
|
if ($(this).hasClass('position' + randomBrain)) {
|
|
randomBrain = newPosition[0];
|
|
assigned = true;
|
|
}
|
|
}
|
|
$(this).attr('class', 'position' + newPosition[0]);
|
|
$(this).click(checkBrain);
|
|
});
|
|
}
|
|
|
|
// checks if the selected brain is the correct one
|
|
var checkBrain = function() {
|
|
if ($(this).hasClass('position' + randomBrain)) {
|
|
$('#message').text("THIS IS THE BRAIN!!!");
|
|
$(this).html('<img src="brainlight.png"/>');
|
|
} else {
|
|
$('#message').text('Not the brain . . . ');
|
|
}
|
|
state = "reset";
|
|
$startShuffle.text('RESET');
|
|
$startShuffle.css('background-color', 'black');
|
|
$startShuffle.css('color', 'white');
|
|
}
|
|
|
|
}); // end window.onload
|