Thom Page
10 years ago
|
Before Width: | Height: | Size: 47 KiB After Width: | Height: | Size: 47 KiB |
|
Before Width: | Height: | Size: 6.1 KiB After Width: | Height: | Size: 6.1 KiB |
|
Before Width: | Height: | Size: 52 KiB After Width: | Height: | Size: 52 KiB |
@ -1,6 +1,6 @@
|
||||
<html>
|
||||
<head>
|
||||
<title></title>
|
||||
<title>BRAIN GAME</title>
|
||||
<link rel="stylesheet" type="text/css" href="style.css">
|
||||
<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
|
||||
|
||||
|
Before Width: | Height: | Size: 59 KiB After Width: | Height: | Size: 59 KiB |
@ -0,0 +1,95 @@
|
||||
// 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
|
||||
|
Before Width: | Height: | Size: 47 KiB After Width: | Height: | Size: 47 KiB |
|
Before Width: | Height: | Size: 6.1 KiB After Width: | Height: | Size: 6.1 KiB |
|
Before Width: | Height: | Size: 52 KiB After Width: | Height: | Size: 52 KiB |
|
Before Width: | Height: | Size: 59 KiB After Width: | Height: | Size: 59 KiB |
@ -1,109 +0,0 @@
|
||||
$(function() {
|
||||
|
||||
console.log('app.js jquery');
|
||||
|
||||
var $board = $('#board');
|
||||
var $startShuffle = $('#start-shuffle');
|
||||
var $message = $('#message');
|
||||
|
||||
var brainNum = 5;
|
||||
var gamesPlayed = 0;
|
||||
var wins = 0;
|
||||
|
||||
var randomBrain;
|
||||
var state;
|
||||
|
||||
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 < brainNum; i ++) {
|
||||
var $brain = $('<div>').attr('id', i);
|
||||
$brain.addClass('brain');
|
||||
$brain.html('<img src="brain.png"/>');
|
||||
$board.append($brain);
|
||||
}
|
||||
}
|
||||
|
||||
// run the reset function on window onload
|
||||
reset();
|
||||
|
||||
$startShuffle.click(function() {
|
||||
console.log('start clicked');
|
||||
randomBrain = Math.floor(Math.random() * brainNum);
|
||||
if (state === "start") {
|
||||
giveIdea();
|
||||
} else if (state === "shuffle") {
|
||||
$('#' + randomBrain).html('<img src="brain.png"/>');
|
||||
shuffleBrains();
|
||||
} else if (state === "reset") {
|
||||
reset();
|
||||
}
|
||||
});
|
||||
|
||||
var giveIdea = function() {
|
||||
console.log('give idea function');
|
||||
$('#' + randomBrain).html('<img src="brainlight.png"/>');
|
||||
$startShuffle.text('SHUFFLE');
|
||||
$startShuffle.css('background-color', 'coral');
|
||||
$message.text("Press SHUFFLE to shuffle the brains");
|
||||
state = "shuffle";
|
||||
}
|
||||
|
||||
// run recursively according to the counter
|
||||
var counter = 0;
|
||||
var shuffleBrains = function() {
|
||||
console.log('shuffle brains function running recursively');
|
||||
|
||||
var positions = [];
|
||||
for (var i=0; i < brainNum; i++) {
|
||||
positions.push(i);
|
||||
}
|
||||
|
||||
var horizontals = [0, 205, 410, 615, 820, 1025, 1230, 1435];
|
||||
|
||||
var $allBrains = $('.brain');
|
||||
|
||||
$allBrains.each(function(index, value) {
|
||||
var newIndex = positions.splice(Math.floor(Math.random() * positions.length), 1);
|
||||
$('#' + index).css({transform: 'translate(' + ((newIndex * 205) - horizontals[index]) + 'px)'});
|
||||
$('#' + index).css({transition: 'all 0.4s ease-in'});
|
||||
$('#' + index + ' img').css({ animationName: 'brainsize' });
|
||||
});
|
||||
|
||||
var brainLoop = setTimeout(shuffleBrains, 501);
|
||||
|
||||
counter++;
|
||||
if (counter == 10) {
|
||||
clearTimeout(brainLoop);
|
||||
counter = 0;
|
||||
$message.text('Click on the brain you think is right!');
|
||||
$startShuffle.html('<img src="braincon.png"/>');
|
||||
$startShuffle.css('background-color', 'ivory');
|
||||
|
||||
$('.brain').click(checkBrain);
|
||||
}
|
||||
}
|
||||
|
||||
var checkBrain = function() {
|
||||
if ($(this).is('#' + randomBrain)) {
|
||||
$('#message').text("THIS IS THE BRAIN!!!");
|
||||
$('#' + randomBrain).html('<img src="brainlight.png"/>');
|
||||
wins++;
|
||||
} else {
|
||||
$('#message').text('Not the brain . . . ');
|
||||
}
|
||||
state = "reset";
|
||||
$startShuffle.css('display', 'inline-block');
|
||||
$startShuffle.text('RESET');
|
||||
$startShuffle.css('background-color', 'black');
|
||||
$startShuffle.css('color', 'white');
|
||||
gamesPlayed++
|
||||
$('#wins').text('WINS: ' + wins + ' out of ' + gamesPlayed);
|
||||
}
|
||||
|
||||
}); // end window.onload
|
||||