Now it's time for some tic tac toe! All right, I've got the HTML and CSS done, take a look:
Now it's time for the JavaScript. Okay, I got the value of "X" or "O" to get set via using the "this" keyword. I did so by giving the X and O elements the same class, then using this code:
<div id="topContainer"><h1 class="title text-center">Play Tic Tac Toe! Select <span class="playerSelectionBoxes" id="selectionX" value="X">X</span>
<span id="or">or</span>
<span class="playerSelectionBoxes" id="selectionO" value="O">O</span>!</h1>
</div>
And the JavaScript (inside a jQuery wrapper):
$(".playerSelectionBoxes").click(function() {
player = this.attributes[2].value;
console.log(player);
});
});
Cool! So now that I have the player's selection, it's time to set what will happen to a square when a player clicks on it. I got it!
Here it is:
$(".playerSelectionBoxes").click(function() {
player = this.attributes[2].value;
console.log(player);
if (player === "X") {
alert("it's working " + player);
$(".ticBox").click( function() {
$(this).text(player);
});
}
});
And a pic:
And now, the CSS is making the boxes move when the X or O appears. Working on that real quick...
Ok, so I solved the problem by placing a spacer inside the boxes (an actual space, so it's invisible), like so:
<div id="container">
<div class="top-row text-center">
<div class="ticBox" id="box1"> </div>
<div class="ticBox" id="box2"> </div>
<div class="ticBox" id="box3"> </div>
<div>
<div class="middle-row text-center">
<div class="ticBox" id="box4"> </div>
<div class="ticBox" id="box5"> </div>
<div class="ticBox" id="box6"> </div>
<div>
<div class="bottom-row text-center">
<div class="ticBox" id="box7"> </div>
<div class="ticBox" id="box8"> </div>
<div class="ticBox" id="box9"> </div>
</div>
Moving on, back to the JavaScript. All right, I made a turn variable to count 9 turns and then say, "Game Over" plus a statement variable that will hold "You win!" or "You lose, try again!"
I solved it!
Here's today's work, well the JavaScript anyhow:
$(document).ready(function() {
$(".playerSelectionBoxes").click(function() {
player = this.attributes[2].value;
$("#topContainer").css("pointer-events", "none");
$("#selectionX").addClass("grayed");
$("#selectionO").addClass("grayed");
if (player === "X") {
computer = "O";
}
if (player === "O") {
computer = "X";
}
$(".ticBox").click( function() {
$(this).text(player);
turn = turn + 1;
// The code below grabs "this", which equals the actual element clicked, for example <div class="ticBox" id="box1">X</div>, and grabs the value of the second attribute, the id (the [1] targets the second attribute, as if it was in an array).
removePlayerSelection = "#" + this.attributes[1].value;
// The remove function removes the targeted element (second item in parentheses) of the array selected (first item in parentheses).
remove(boxArray, removePlayerSelection);
// Below are the victory conditions.
if ((winner !== "Computer") && $("#box1").text() === player && $("#box2").text() === player && $("#box3").text() === player ||
$("#box4").text() === player && $("#box5").text() === player && $("#box6").text() === player ||
$("#box7").text() === player && $("#box8").text() === player && $("#box9").text() === player ||
$("#box1").text() === player && $("#box4").text() === player && $("#box7").text() === player ||
$("#box2").text() === player && $("#box5").text() === player && $("#box8").text() === player ||
$("#box3").text() === player && $("#box6").text() === player && $("#box9").text() === player ||
$("#box1").text() === player && $("#box5").text() === player && $("#box9").text() === player ||
$("#box3").text() === player && $("#box5").text() === player && $("#box7").text() === player ) {
winner = "Player";
alert("Congratulations, you win!");
}
computerChoice();
if ((winner !== "Player") && $("#box1").text() === computer && $("#box2").text() === computer && $("#box3").text() === computer ||
$("#box4").text() === computer && $("#box5").text() === computer && $("#box6").text() === computer ||
$("#box7").text() === computer && $("#box8").text() === computer && $("#box9").text() === computer ||
$("#box1").text() === computer && $("#box4").text() === computer && $("#box7").text() === computer ||
$("#box2").text() === computer && $("#box5").text() === computer && $("#box8").text() === computer ||
$("#box3").text() === computer && $("#box6").text() === computer && $("#box9").text() === computer ||
$("#box1").text() === computer && $("#box5").text() === computer && $("#box9").text() === computer ||
$("#box3").text() === computer && $("#box5").text() === computer && $("#box7").text() === computer ) {
winner = "Computer";
alert("You lose, try again!");
}
if (turn === 5 && winner !== "Computer" && winner !== "Player") {
winner = "Tie";
alert("It's a " + winner + "!");
}
});
});
$("#reset").click(function() {
resetGame();
});
function resetGame() {
boxArray = ["#box1", "#box2", "#box3", "#box4", "#box5", "#box6", "#box7", "#box8", "#box9"];
// The   is there toprevent a CSS issue from causing the boxes to move when an X or O is entered.
$("#box1").html(" ");
$("#box2").html(" ");
$("#box3").html(" ");
$("#box4").html(" ");
$("#box5").html(" ");
$("#box6").html(" ");
$("#box7").html(" ");
$("#box8").html(" ");
$("#box9").html(" ");
turn = 0;
winner = "Default";
}
function computerChoice() {
// The computer will only take a turn if the player has not won yet.
if (winner !== "Player") {
randomBoxId = boxArray[randomNum()];
$(randomBoxId).text(computer);
remove(boxArray, randomBoxId);
}
}
}); //Close jQuery wrapper
var boxArray = ["#box1", "#box2", "#box3", "#box4", "#box5", "#box6", "#box7", "#box8", "#box9"];
var player;
var computer;
var randomNum;
var randomBoxId;
var turn = 0;
var statement = "You lose, try again!"
var removePlayerSelection;
var winner = "Default";
function randomNum() {
return Math.floor(Math.random() * boxArray.length);
}
function remove(boxArray, item) {
for(var i = boxArray.length; i--;) {
if(boxArray[i] === item) {
boxArray.splice(i, 1);
}
}
}
I put a solid 8 hours in today, and this is awesome, I'm now one project away from earning my front end certification!
Now it's time for the JavaScript. Okay, I got the value of "X" or "O" to get set via using the "this" keyword. I did so by giving the X and O elements the same class, then using this code:
<div id="topContainer"><h1 class="title text-center">Play Tic Tac Toe! Select <span class="playerSelectionBoxes" id="selectionX" value="X">X</span>
<span id="or">or</span>
<span class="playerSelectionBoxes" id="selectionO" value="O">O</span>!</h1>
</div>
And the JavaScript (inside a jQuery wrapper):
$(".playerSelectionBoxes").click(function() {
player = this.attributes[2].value;
console.log(player);
});
});
Cool! So now that I have the player's selection, it's time to set what will happen to a square when a player clicks on it. I got it!
Here it is:
$(".playerSelectionBoxes").click(function() {
player = this.attributes[2].value;
console.log(player);
if (player === "X") {
alert("it's working " + player);
$(".ticBox").click( function() {
$(this).text(player);
});
}
});
And a pic:
Ok, so I solved the problem by placing a spacer inside the boxes (an actual space, so it's invisible), like so:
<div id="container">
<div class="top-row text-center">
<div class="ticBox" id="box1"> </div>
<div class="ticBox" id="box2"> </div>
<div class="ticBox" id="box3"> </div>
<div>
<div class="middle-row text-center">
<div class="ticBox" id="box4"> </div>
<div class="ticBox" id="box5"> </div>
<div class="ticBox" id="box6"> </div>
<div>
<div class="bottom-row text-center">
<div class="ticBox" id="box7"> </div>
<div class="ticBox" id="box8"> </div>
<div class="ticBox" id="box9"> </div>
</div>
Moving on, back to the JavaScript. All right, I made a turn variable to count 9 turns and then say, "Game Over" plus a statement variable that will hold "You win!" or "You lose, try again!"
I solved it!
Here's today's work, well the JavaScript anyhow:
$(document).ready(function() {
$(".playerSelectionBoxes").click(function() {
player = this.attributes[2].value;
$("#topContainer").css("pointer-events", "none");
$("#selectionX").addClass("grayed");
$("#selectionO").addClass("grayed");
if (player === "X") {
computer = "O";
}
if (player === "O") {
computer = "X";
}
$(".ticBox").click( function() {
$(this).text(player);
turn = turn + 1;
// The code below grabs "this", which equals the actual element clicked, for example <div class="ticBox" id="box1">X</div>, and grabs the value of the second attribute, the id (the [1] targets the second attribute, as if it was in an array).
removePlayerSelection = "#" + this.attributes[1].value;
// The remove function removes the targeted element (second item in parentheses) of the array selected (first item in parentheses).
remove(boxArray, removePlayerSelection);
// Below are the victory conditions.
if ((winner !== "Computer") && $("#box1").text() === player && $("#box2").text() === player && $("#box3").text() === player ||
$("#box4").text() === player && $("#box5").text() === player && $("#box6").text() === player ||
$("#box7").text() === player && $("#box8").text() === player && $("#box9").text() === player ||
$("#box1").text() === player && $("#box4").text() === player && $("#box7").text() === player ||
$("#box2").text() === player && $("#box5").text() === player && $("#box8").text() === player ||
$("#box3").text() === player && $("#box6").text() === player && $("#box9").text() === player ||
$("#box1").text() === player && $("#box5").text() === player && $("#box9").text() === player ||
$("#box3").text() === player && $("#box5").text() === player && $("#box7").text() === player ) {
winner = "Player";
alert("Congratulations, you win!");
}
computerChoice();
if ((winner !== "Player") && $("#box1").text() === computer && $("#box2").text() === computer && $("#box3").text() === computer ||
$("#box4").text() === computer && $("#box5").text() === computer && $("#box6").text() === computer ||
$("#box7").text() === computer && $("#box8").text() === computer && $("#box9").text() === computer ||
$("#box1").text() === computer && $("#box4").text() === computer && $("#box7").text() === computer ||
$("#box2").text() === computer && $("#box5").text() === computer && $("#box8").text() === computer ||
$("#box3").text() === computer && $("#box6").text() === computer && $("#box9").text() === computer ||
$("#box1").text() === computer && $("#box5").text() === computer && $("#box9").text() === computer ||
$("#box3").text() === computer && $("#box5").text() === computer && $("#box7").text() === computer ) {
winner = "Computer";
alert("You lose, try again!");
}
if (turn === 5 && winner !== "Computer" && winner !== "Player") {
winner = "Tie";
alert("It's a " + winner + "!");
}
});
});
$("#reset").click(function() {
resetGame();
});
function resetGame() {
boxArray = ["#box1", "#box2", "#box3", "#box4", "#box5", "#box6", "#box7", "#box8", "#box9"];
// The   is there toprevent a CSS issue from causing the boxes to move when an X or O is entered.
$("#box1").html(" ");
$("#box2").html(" ");
$("#box3").html(" ");
$("#box4").html(" ");
$("#box5").html(" ");
$("#box6").html(" ");
$("#box7").html(" ");
$("#box8").html(" ");
$("#box9").html(" ");
turn = 0;
winner = "Default";
}
function computerChoice() {
// The computer will only take a turn if the player has not won yet.
if (winner !== "Player") {
randomBoxId = boxArray[randomNum()];
$(randomBoxId).text(computer);
remove(boxArray, randomBoxId);
}
}
}); //Close jQuery wrapper
var boxArray = ["#box1", "#box2", "#box3", "#box4", "#box5", "#box6", "#box7", "#box8", "#box9"];
var player;
var computer;
var randomNum;
var randomBoxId;
var turn = 0;
var statement = "You lose, try again!"
var removePlayerSelection;
var winner = "Default";
function randomNum() {
return Math.floor(Math.random() * boxArray.length);
}
function remove(boxArray, item) {
for(var i = boxArray.length; i--;) {
if(boxArray[i] === item) {
boxArray.splice(i, 1);
}
}
}
I put a solid 8 hours in today, and this is awesome, I'm now one project away from earning my front end certification!
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 On 6 of 6
14. Claim Your Front End Development Certificate
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 On 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 On 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: http://codepen.io/Adancode/
Week 22-24: Final Project
CodePen: http://codepen.io/Adancode/
GitHub: https://github.com/Adancode
LinkedIn: https://www.linkedin.com/in/adamcamacho1
Team Treehouse: https://teamtreehouse.com/adamcamacho
Free Code Camp: http://www.freecodecamp.com/adancode
Team Treehouse: https://teamtreehouse.com/adamcamacho
Free Code Camp: http://www.freecodecamp.com/adancode
Hours Spent Coding Today: 8
Total Hours Coding: 1,047
No comments:
Post a Comment