All right, I'm awake, I got a good meal, and it's time to get back at it. The current challenge (on the Simon Game) is that I need to have a for loop repeat, but I need a time interval between iterations within the loop. I've been able to make it work somewhat, but not correctly, so that's the first challenge of the day (and probably the biggest challenge of the project).
Well, I've put in 6 hours today, but I've made no progress. It's one of those days. I'm going to start from scratch now.
Let me save this before anything happens to the browser as I mess with this recursive code. First, call the function, like so:
loop(0);
Next, this function works:
function loop(i) {
if(i < counter) {
console.log(i);
setTimeout(function() {
$(goalPattern[i]).animate({
opacity: 1,
}, 250, function() {
// Animation complete.
$(goalPattern[i]).animate({
opacity: .4,
}, 250, function() {});
});
i++;
loop(i);
}, 1000);
} // Ends IF Statement\
} // Ends loop()
It works. That took me a lot of work...okay, now I'm going to add sound to this portion of the code. Ok, the sound is added:
function loop(i) {
if(i < counter) {
console.log(i);
setTimeout(function() {
current = goalPattern[i]
switch (current) {
case "#boxGreen":
audioGreen.play();
break;
case "#boxRed":
audioRed.play();
break;
case "#boxYellow":
audioYellow.play();
break;
case "#boxBlue":
audioBlue.play();
break;
}
$(goalPattern[i]).animate({
opacity: 1,
}, 250, function() {
// Animation complete.
$(goalPattern[i]).animate({
opacity: .4,
}, 500, function() {});
});
i++;
loop(i);
}, 1000); // Ends setTimeout;
} // Ends IF Statement\
} // Ends loop()
And I also changed the random generator, so that it does not have any of the same colors in sequence:
function randomNum0to3() {
return Math.floor(Math.random() * 4);
}
function createSequence20() {
for (var i = 0; i < 20; i++) {
goalPattern.push(arrayIds[randomNum0to3()]);
if (goalPattern[i] === goalPattern[i - 1]) {
goalPattern.pop();
i--;
}
}
console.log(goalPattern);
}
Cool. Ok, the next issue I was having was that some of the lights were not turning off with this code:
$(goalPattern[i]).animate({
opacity: 1,
}, 250, function() {
// Animation complete.
$(goalPattern[i]).animate({
opacity: .4,
}, 250, function() {});
});
So I changed it to this code (after putting goalPattern[i] in the current variable, declared right before this):
$(current).animate({
opacity: 1,
}, 250, function() {
// Animation complete.
$(current).animate({
opacity: .4,
}, 250, function() {});
});
And that solved the problem. Okay, I added this at the bottom of the code that fires when a color is clicked:
if (testMatch(goalPattern, arrayPlayer) === false) {
arrayPlayer = [];
alert("Try the same pattern again, you are still on level " + counter + "!");
loop(0);
}
And that makes an alert pop up when the player enters the wrong color, that lets them know they're at the same level, and asks them to try again! Here's how to toggle a variable on a button click, I thought this up right now:
$(".strict").click(function() {
switch(strictToggle) {
case 1:
strictMode = true;
$(this).toggleClass("green");
strictToggle--;
break;
case 0:
strictMode = false;
$(this).toggleClass("green");
strictToggle++;
break;
} // Closes switch statement
}); // Closes .strict jQuery Selector
Cool, saving that.
Note that on Codepen, anchor links are normally blocked, and in order to get past that, we need to use this format:
<a href=""http://samplelink.com/thesample" target="_blank"></a>
Cool.
Also, I completed the Simon Game. I feel amazing!!! Check it out:
});
// This code is recursive, and it makes the pattern, with time gaps in between.
function loop(i) {
if(i < counter) {
console.log(i);
setTimeout(function() {
current = goalPattern[i]
switch (current) {
case "#boxGreen":
audioGreen.play();
break;
case "#boxRed":
audioRed.play();
break;
case "#boxYellow":
audioYellow.play();
break;
case "#boxBlue":
audioBlue.play();
break;
}
$(current).animate({
opacity: 1,
}, 250, function() {
// Animation complete.
$(current).animate({
opacity: .4,
}, 250, function() {});
});
i++;
loop(i);
}, 1000); // Ends setTimeout;
} // Ends IF Statement\
} // Ends loop()
}); // Closes jQuery wrapper
var audioGreen = new Audio("https://s3.amazonaws.com/freecodecamp/simonSound1.mp3");
var audioRed = new Audio("https://s3.amazonaws.com/freecodecamp/simonSound2.mp3");
var audioBlue = new Audio("https://s3.amazonaws.com/freecodecamp/simonSound3.mp3");
var audioYellow = new Audio("https://s3.amazonaws.com/freecodecamp/simonSound4.mp3");
var counter = 0;
var arrayIds = ["#boxGreen", "#boxRed", "#boxBlue", "#boxYellow"];
var arrayPlayer = [];
var goalPattern = [];
var strictMode = false;
var strictToggle = 1;
// This generates a random number from 0 to 3, to target one of the three colors in the array called arrayId's.
function randomNum0to3() {
return Math.floor(Math.random() * 4);
}
// This creates a random sequence of 20 items.
function createSequence20() {
for (var i = 0; i < 20; i++) {
goalPattern.push(arrayIds[randomNum0to3()]);
// If an item in the sequence repeats the item in the sequence before it, it is removed from the array, then i is decreased one, so that the sequence can go one more time, but still produce only 20 items in the array.
if (goalPattern[i] === goalPattern[i - 1]) {
goalPattern.pop();
i--;
}
}
console.log(goalPattern);
}
function testMatch(goalPattern, arrayPlayer) {
for (var i = 0; i < arrayPlayer.length; i++) {
if (goalPattern[i] !== arrayPlayer[i]){
return false;
}
}
return true;
}
function resetGame() {
arrayPlayer = [];
goalPattern =[];
createSequence20();
counter = 0;
$("#counter").text(counter);
}
About 215 lines (including notes and spaces, though)! :)
Okay, now I'm going to real quickly do the Tribute Page project, just to knock it out, and be 100% finished with my Front End Certification.
Let me get started on that...
Okay, I'm done with the Tribute Page, it's simple:
And that's it. I'm going to catch a movie to reward myself for a great day, and then I'll go through claiming my front end certificate.
I clocked 7 hours of coding today.
I've been working on this since about August or September, and I got really serious about my studying starting in January, a little over two months ago.
It's all paid off. Here's my Free Code Camp Front End Certification:
What a journey.
Well, I've put in 6 hours today, but I've made no progress. It's one of those days. I'm going to start from scratch now.
Let me save this before anything happens to the browser as I mess with this recursive code. First, call the function, like so:
loop(0);
Next, this function works:
function loop(i) {
if(i < counter) {
console.log(i);
setTimeout(function() {
$(goalPattern[i]).animate({
opacity: 1,
}, 250, function() {
// Animation complete.
$(goalPattern[i]).animate({
opacity: .4,
}, 250, function() {});
});
i++;
loop(i);
}, 1000);
} // Ends IF Statement\
} // Ends loop()
It works. That took me a lot of work...okay, now I'm going to add sound to this portion of the code. Ok, the sound is added:
function loop(i) {
if(i < counter) {
console.log(i);
setTimeout(function() {
current = goalPattern[i]
switch (current) {
case "#boxGreen":
audioGreen.play();
break;
case "#boxRed":
audioRed.play();
break;
case "#boxYellow":
audioYellow.play();
break;
case "#boxBlue":
audioBlue.play();
break;
}
$(goalPattern[i]).animate({
opacity: 1,
}, 250, function() {
// Animation complete.
$(goalPattern[i]).animate({
opacity: .4,
}, 500, function() {});
});
i++;
loop(i);
}, 1000); // Ends setTimeout;
} // Ends IF Statement\
} // Ends loop()
And I also changed the random generator, so that it does not have any of the same colors in sequence:
function randomNum0to3() {
return Math.floor(Math.random() * 4);
}
function createSequence20() {
for (var i = 0; i < 20; i++) {
goalPattern.push(arrayIds[randomNum0to3()]);
if (goalPattern[i] === goalPattern[i - 1]) {
goalPattern.pop();
i--;
}
}
console.log(goalPattern);
}
Cool. Ok, the next issue I was having was that some of the lights were not turning off with this code:
$(goalPattern[i]).animate({
opacity: 1,
}, 250, function() {
// Animation complete.
$(goalPattern[i]).animate({
opacity: .4,
}, 250, function() {});
});
So I changed it to this code (after putting goalPattern[i] in the current variable, declared right before this):
$(current).animate({
opacity: 1,
}, 250, function() {
// Animation complete.
$(current).animate({
opacity: .4,
}, 250, function() {});
});
And that solved the problem. Okay, I added this at the bottom of the code that fires when a color is clicked:
if (testMatch(goalPattern, arrayPlayer) === false) {
arrayPlayer = [];
alert("Try the same pattern again, you are still on level " + counter + "!");
loop(0);
}
And that makes an alert pop up when the player enters the wrong color, that lets them know they're at the same level, and asks them to try again! Here's how to toggle a variable on a button click, I thought this up right now:
$(".strict").click(function() {
switch(strictToggle) {
case 1:
strictMode = true;
$(this).toggleClass("green");
strictToggle--;
break;
case 0:
strictMode = false;
$(this).toggleClass("green");
strictToggle++;
break;
} // Closes switch statement
}); // Closes .strict jQuery Selector
Cool, saving that.
Note that on Codepen, anchor links are normally blocked, and in order to get past that, we need to use this format:
<a href=""http://samplelink.com/thesample" target="_blank"></a>
Cool.
Also, I completed the Simon Game. I feel amazing!!! Check it out:
});
// This code is recursive, and it makes the pattern, with time gaps in between.
function loop(i) {
if(i < counter) {
console.log(i);
setTimeout(function() {
current = goalPattern[i]
switch (current) {
case "#boxGreen":
audioGreen.play();
break;
case "#boxRed":
audioRed.play();
break;
case "#boxYellow":
audioYellow.play();
break;
case "#boxBlue":
audioBlue.play();
break;
}
$(current).animate({
opacity: 1,
}, 250, function() {
// Animation complete.
$(current).animate({
opacity: .4,
}, 250, function() {});
});
i++;
loop(i);
}, 1000); // Ends setTimeout;
} // Ends IF Statement\
} // Ends loop()
}); // Closes jQuery wrapper
var audioGreen = new Audio("https://s3.amazonaws.com/freecodecamp/simonSound1.mp3");
var audioRed = new Audio("https://s3.amazonaws.com/freecodecamp/simonSound2.mp3");
var audioBlue = new Audio("https://s3.amazonaws.com/freecodecamp/simonSound3.mp3");
var audioYellow = new Audio("https://s3.amazonaws.com/freecodecamp/simonSound4.mp3");
var counter = 0;
var arrayIds = ["#boxGreen", "#boxRed", "#boxBlue", "#boxYellow"];
var arrayPlayer = [];
var goalPattern = [];
var strictMode = false;
var strictToggle = 1;
// This generates a random number from 0 to 3, to target one of the three colors in the array called arrayId's.
function randomNum0to3() {
return Math.floor(Math.random() * 4);
}
// This creates a random sequence of 20 items.
function createSequence20() {
for (var i = 0; i < 20; i++) {
goalPattern.push(arrayIds[randomNum0to3()]);
// If an item in the sequence repeats the item in the sequence before it, it is removed from the array, then i is decreased one, so that the sequence can go one more time, but still produce only 20 items in the array.
if (goalPattern[i] === goalPattern[i - 1]) {
goalPattern.pop();
i--;
}
}
console.log(goalPattern);
}
function testMatch(goalPattern, arrayPlayer) {
for (var i = 0; i < arrayPlayer.length; i++) {
if (goalPattern[i] !== arrayPlayer[i]){
return false;
}
}
return true;
}
function resetGame() {
arrayPlayer = [];
goalPattern =[];
createSequence20();
counter = 0;
$("#counter").text(counter);
}
About 215 lines (including notes and spaces, though)! :)
Okay, now I'm going to real quickly do the Tribute Page project, just to knock it out, and be 100% finished with my Front End Certification.
Let me get started on that...
Okay, I'm done with the Tribute Page, it's simple:
And that's it. I'm going to catch a movie to reward myself for a great day, and then I'll go through claiming my front end certificate.
I clocked 7 hours of coding today.
I've been working on this since about August or September, and I got really serious about my studying starting in January, a little over two months ago.
It's all paid off. Here's my Free Code Camp Front End Certification:
What a journey.
SUMMARY OF CODING SKILLS
Books: Status
"Head First HTML and CSS," by E. Robson & E. Freeman Complete
"Head First HTML and CSS," by E. Robson & E. Freeman Complete
"A Smarter Way to Learn JavaScript," by Mark Myers Complete
"HTML and CSS," by Jon Duckett Complete
"JavaScript and JQuery," by Jon Duckett Complete
Team Treehouse (Front End Web Dev Track Complete): Status
How to Make a Website Complete
HTML Complete
HTML Forms Complete
HTML Tables Complete
HTML Video and Audio Complete
CSS Foundations Complete
CSS Basics Complete
CSS Layout Techniques Complete
CSS Layout Basics Complete
CSS Selectors Complete
Responsive Layouts Complete
CSS Flexbox Layout Complete
Git Basics Complete
Console Foundations Complete
Introduction to Programming Complete
JavaScript Basics Complete
JavaScript Loops, Arrays, & Objects Complete
AJAX Basics Complete
JQuery Basics Complete
Interactive Web pages with JavaScript Complete
Object-Oriented JavaScript Complete
Accessibility Complete
Website Optimization Complete
Front End Performance Optimization Complete
Aesthetic Foundations Complete
Design Foundations Complete
Adobe Photoshop Foundations Complete
Adobe Illustrator Foundations 66% Complete
Other Courses: Status
HTML and CSS (Codecademy) Complete
Introduction to Web Dev (The Odin Project) Complete
Web Dev 101 (The Odin Project) 33% Complete
Free Code Camp (FCC) Status
1. Get Started with Free Code Camp Complete
2. HTML5 and CSS Complete
3. Responsive Design with Bootstrap Complete
4. Gear up for Success Complete
5. jQuery Complete
6. Basic Front End Development Projects Complete
7. Basic JavaScript Complete
8. Object Oriented and Functional Programming Complete
9. Basic Algorithm Scripting Complete
10. JSON API's and Ajax Complete
11. Intermediate Front End Development Projects Complete
5. jQuery Complete
6. Basic Front End Development Projects Complete
7. Basic JavaScript Complete
8. Object Oriented and Functional Programming Complete
9. Basic Algorithm Scripting Complete
10. JSON API's and Ajax Complete
11. Intermediate Front End Development Projects Complete
12. Intermediate Algorithm Scripting Complete
13. Advanced Front End Development Projects Complete
14. Claim Your Front End Development Certificate Complete
15. Automated Testing and Debugging
16. Node.js and Express.js
17. Git
18. MongoDB
19. API Projects
16. Node.js and Express.js
17. Git
18. MongoDB
19. API Projects
20. Dynamic Web Application Projects
21. Claim Your Back End Development Certificate
Harvard CS50: Intro to Comp Sci Status
12 Week Course (Plus Week 0), Pre-Work for UT Boot Camp Week 0 of 12
The Coding Boot Camp at UT Austin Status (starts 4/19/2016)
Week 1-6: Mastering the Browser (HTML, CSS, JavaScript, JQuery)
Harvard CS50: Intro to Comp Sci Status
12 Week Course (Plus Week 0), Pre-Work for UT Boot Camp Week 0 of 12
The Coding Boot Camp at UT Austin Status (starts 4/19/2016)
Week 1-6: Mastering the Browser (HTML, CSS, JavaScript, JQuery)
Week 7-10: API & JSON (RESTful API"s, parsing JSON, AJAX)
Week 11-14: Server Side (Node.js, MySQL, MongoDB)
Week 15-18: PHP (WordPress, CodeIgniter, Laravel)
Week 18-21: Full Stack Coding
Week 22-24: Final Project
CodePen Projects: http://codepen.io/Adancode/
Week 22-24: Final Project
CodePen Projects: http://codepen.io/Adancode/
GitHub Projects: https://github.com/Adancode
LinkedIn Profile: https://www.linkedin.com/in/adamcamacho1
Team Treehouse Profile: https://teamtreehouse.com/adamcamacho
Free Code Camp Profile: http://www.freecodecamp.com/adancode
Team Treehouse Profile: https://teamtreehouse.com/adamcamacho
Free Code Camp Profile: http://www.freecodecamp.com/adancode
Hours Spent Coding Today: 7
Total Hours Coding: 1,072
No comments:
Post a Comment