Thom Page
10 years ago
parent
f06d459eeb
commit
debd0f5db3
@ -1,22 +1,18 @@
|
|||||||
var fac = function(num, prod) {
|
var fac = function(num, prod) {
|
||||||
|
|
||||||
if (num === 0) { return prod }
|
if (num === 0) { return prod }
|
||||||
|
prod *= num;
|
||||||
prod *= num;
|
|
||||||
|
|
||||||
return fac(num - 1, prod);
|
return fac(num - 1, prod);
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
// Sharon's solution
|
// Sharon's solution
|
||||||
var fac = function(num) {
|
var fac1 = function(num) {
|
||||||
|
|
||||||
if (num === 1) {
|
if (num === 1) {
|
||||||
return 1;
|
return 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
return num * fac(num-1);
|
return num * fac1(num-1);
|
||||||
|
|
||||||
}; // end of function
|
}; // end of function
|
||||||
@ -0,0 +1,109 @@
|
|||||||
|
$(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
|
||||||
|
After Width: | Height: | Size: 47 KiB |
|
After Width: | Height: | Size: 6.1 KiB |
|
After Width: | Height: | Size: 52 KiB |
@ -0,0 +1,26 @@
|
|||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<title></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>
|
||||||
|
|
||||||
|
<script type="text/javascript" src="app.js"></script>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<div id="container">
|
||||||
|
|
||||||
|
<div id="top">
|
||||||
|
<div id="start-shuffle">START</div>
|
||||||
|
<div id="message"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div id="board"></div>
|
||||||
|
|
||||||
|
<br><br>
|
||||||
|
<div id="wins">WINS:</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
After Width: | Height: | Size: 59 KiB |
@ -0,0 +1,70 @@
|
|||||||
|
body {
|
||||||
|
font-family: monospace;
|
||||||
|
}
|
||||||
|
|
||||||
|
#container {
|
||||||
|
width: 1200px;
|
||||||
|
height: 440px;
|
||||||
|
border: 1px solid black;
|
||||||
|
text-align: center;
|
||||||
|
margin: 0 auto;
|
||||||
|
border-radius: 15px;
|
||||||
|
background-color: ivory;
|
||||||
|
}
|
||||||
|
|
||||||
|
#top {
|
||||||
|
margin-top: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#start-shuffle {
|
||||||
|
/* display: inline-block;*/
|
||||||
|
width: 100px; height: 40px;
|
||||||
|
margin: 0 auto;
|
||||||
|
/* margin-left: 5px;
|
||||||
|
margin-bottom: 5px;*/
|
||||||
|
text-align: center;
|
||||||
|
cursor: pointer;
|
||||||
|
line-height: 40px;
|
||||||
|
vertical-align: center;
|
||||||
|
border-radius: 5px;
|
||||||
|
font-size: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#message {
|
||||||
|
/* display: inline-block;*/
|
||||||
|
line-height: 40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#board {
|
||||||
|
min-width: 1200px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.brain {
|
||||||
|
display: inline-block;
|
||||||
|
height: auto; width: auto;
|
||||||
|
margin-left: 5px;
|
||||||
|
margin-top: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#wins {
|
||||||
|
margin-top: 100px;
|
||||||
|
}
|
||||||
|
|
||||||
|
img {
|
||||||
|
animation-duration: 0.5s;
|
||||||
|
animation-iteration-count: 10;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes brainsize {
|
||||||
|
0% { transform: scale(1); }
|
||||||
|
50% { transform: scale(0.6) translateY(200px); }
|
||||||
|
100% { transform: scale(1); }
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
Loading…
Reference in new issue