Tic-Tac-Toe Free Code Camp Challenge

Developer
Ajala Comfort
Size
5,214 Kb
Views
4,048
  1. Tic-Tac-Toe Free Code Camp Challenge Previews
  2. Tic-Tac-Toe Free Code Camp Challenge HTML Codes
  3. Tic-Tac-Toe Free Code Camp Challenge CSS Codes
  4. Tic-Tac-Toe Free Code Camp Challenge JS Codes

How do I make an tic-tac-toe free code camp challenge?

What is a tic-tac-toe free code camp challenge? How do you make a tic-tac-toe free code camp challenge? This script and codes were developed by Ajala Comfort on 11 January 2023, Wednesday.

Tic-Tac-Toe Free Code Camp Challenge Previews
IQ Test

Tic-Tac-Toe Free Code Camp Challenge - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Tic-Tac-Toe Free Code Camp Challenge </title> <link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <body>
<div id="askUserShape" class="panel modal-dialog row"> <div class="col-xs-6">X</div> <div class="col-xs-6">O</div>
</div> <div id="countDown"> </div> <div id="BOARD"> </div> <div id="SHIELD"></div> <div id="winnerBoard"></div> <div id="LEVEL"></div>
</body> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Tic-Tac-Toe Free Code Camp Challenge - Script Codes CSS Codes

body{width:100%;height:700px;}
#askUserShape{ width:50%; height:200px; margin:auto; background-color:#e67e22; z-index:2; position:relative; top:10%; display:none;
} #askUserShape > div{ height:100%; font-size:6.5vw; text-align:center; padding-top:5%; cursor:pointer; color:white;
}
#askUserShape > div:hover{background-color:#fbfcfc;color:#d35400;}
#countDown{ display:none; position:relative; width:70%; margin:auto; height:100%; background-color:rgba(211, 84, 0,0.6); font-size:20.5vw; text-align:center; color:white;
}
#BOARD{width:50%;height:700px;margin:auto;margin-top:2%;}
#BOARD div{display:block;color:black;font-size:7vw;text-align:center;float:left;}
.boxes{border:1px solid transparent;border-right:5px solid rgba(211, 84, 0,0.6);}
.border_right{ border-right:5px solid rgba(211, 84, 0,0.6);
}
.border_bottom{ border-bottom:5px solid rgba(211, 84, 0,0.6);
}
#SHIELD{width:100%;height:750px;position:absolute;top:0;z-index:4;background-color:rgba(211, 84, 0,0.3);display:none;}
#winnerBoard{width:50%;height:60px;position:fixed;border:2px solid rgba(230, 126, 34,1.0);top:0;z-index:5;text-align:center;font-size:1.5vw;padding-top:0.5%;color:rgba(44, 62, 80,1.0);font-weight:bolder;letter-spacing:5px;margin-left:25%;}
#LEVEL{width:100px;height:100%;position:absolute;color:rgba(211, 84, 0,1.0);left:0;top:0;
font-size:2.0vw;text-align:center; font-weight:light;letter-spacing:2px;
}
}

Tic-Tac-Toe Free Code Camp Challenge - Script Codes JS Codes

/*
THE PROGRAM IS STIL UNDER CONSTRUCTION :D
JUST INCASE THERE ARE GLITCHES! THANKS FOR UNDERSTANDING!:::::::::: HAPPY FCC!
*/
$(document).ready(function(){ //store all globals here var shapeOfUser,countDownInterator =0,currentLevelRowNumber = 3,countingForMulti = 0,multiArray = [],winningLetter; //STORE ALL ARRAYS HERE var countDownValues = [1,2,3, "START"],currentID, playerShape,computerShape,ID,currentPlayer = "USER"; //INTERVALS var org, startingPoint = 1,muliples = [], currVal = currentLevelRowNumber, numberOfBoxes = Math.pow(currentLevelRowNumber,2), interForPlaying, counterPlays = 0, BoxNumber = 1,rowNumber = 0,reps = Math.ceil(numberOfBoxes / 2);
reset(); //LISTEN TO THE SELECTION OF THE SHAPE $("#askUserShape div").on("click",function(e){ shapeOfUser = $(this).html(); playerShape= shapeOfUser;computerShape = playerShape === "X"?"O":"X"; $("#askUserShape").fadeOut("slow"); $("#countDown").fadeIn("slow"); createMultiArray(); muliplesOfRowNumber(); org = setInterval(countDown,1000/2); }); /////////////////////////LISTEN TO CLICK OF THE BOX $(document).on("click", ".box",function(){ var slot = $(this).html();var position = $(this).attr("id");ID = position;position = (position.match(/\d+/g))[0]; if(slot && slot.length){ alert("Position Filled");} else{$("#SHIELD").fadeIn("slow");var p = getInnerOuterForUser(position); currentID = ID;if(p){UserSelects(p[0],p[1]);} } }); //ALL FUNCTIONS ////////////////////////RESET function reset(){ ////////////////////////////////////RESET ALL VARS //store all globals here
shapeOfUser,countDownInterator =0,countingForMulti = 0,multiArray = [],winningLetter, countDownValues = [1,2,3, "START"],currentID, playerShape,computerShape,ID,currentPlayer = "USER", org,startingPoint = 1, muliples = [], currVal = currentLevelRowNumber,numberOfBoxes = Math.pow(currentLevelRowNumber,2), interForPlaying, counterPlays = 0, BoxNumber = 1,rowNumber = 0,reps = Math.ceil(numberOfBoxes / 2); ////////////////////DISPLAY LEVEL currentLevel(); ///////////////////EMPTA COUNTDOWN $("#countDown").empty(); //////////////////////////////REMOVE SHILED $("#SHIELD").fadeOut("slow"); //REMOVE BOARD $("#BOARD").empty(); // ANIMATE THE ENTRANCE OF THE ASUSERSAHPE DIALOG $("#askUserShape").slideDown("7000"); } ///////////////////////COUNTDOWN function countDown(){ var val = countDownValues[countDownInterator]; if(countDownInterator ===countDownValues.length ){clearInterval(org);closeCountDown();} else{countDownInterator++;} $("#countDown").html(val);} //////////////////////////CLOSE COUNTDOWN function closeCountDown(){$("#countDown").hide();displayBOARD();} //////////////////////////////CREATE MULTIARRAY function createMultiArray(){ var eachSubArray = [],curr = startingPoint;countingForMulti++; while(startingPoint < currentLevelRowNumber + curr){eachSubArray.push(startingPoint);startingPoint++;} multiArray.push(eachSubArray); return countingForMulti<currentLevelRowNumber? createMultiArray():multiArray; } //////////////////////////////////////////////////GET ODD VALUES FROM MULTI function getOdd(){ var oddFusion = [];var odds =multiArray.filter(function(sub,i,ar){return (i % 2 === 0);}); odds.forEach(function(sub){sub.forEach(function(a){oddFusion.push(a);})} );return oddFusion;} //////////////////////////////////////////////////////////// GETS MULTIPLES OF THE ROW NUMBER IN AN ARRAY function muliplesOfRowNumber(){muliples.push(currVal); currVal = currVal + currentLevelRowNumber;return currVal === currentLevelRowNumber * (currentLevelRowNumber+1)? muliples:muliplesOfRowNumber();} /////////////////////////////////////////////////RETURNS THE BOOLEAN IF FALLS UNDER BORDER RIGHT function BorderRightNone(n){return (muliples).indexOf(n)>= 0;} //////////////////////////////////////////////FOR ALL BORDER BOTTOM function BorderBottom(n){var endOfMulti = multiArray[multiArray.length-1];return endOfMulti.indexOf(n) < 0; }
/////////////////////////////////////////// ADDD BOXES TO THE BOARDS function addBoard(){
if(!BorderRightNone(BoxNumber) ){$("#BOARD").append("<div class='border_bottom border_right box' id='box_" +BoxNumber + "'></div>");}else{$("#BOARD").append("<div class='border_bottom box' id = 'box_" + BoxNumber + "'></div>");}rowNumber+= 2; BoxNumber++;} ////////////////////////////////////////DISPLAYS TH E BOARD function displayBOARD(){addBoard(); numberOfBoxes--;return numberOfBoxes > 0 ? displayBOARD():styleBoxes();} ///////////////////////////////GIVES THE BOXES THEIR SIZES function styleBoxes(){var percent = (1 /currentLevelRowNumber ) * 100;percent = Math.round(percent);$("#BOARD div").css({"width":percent + "%","height":percent + "%"});play();} /////////////////////////////////////////// function computerSelectsPosition(){$("#SHIELD").fadeIn("slow");var outer =Math.round(Math.random()*2);var inner =Math.round(Math.random()*2);return (checkIfFilled(multiArray[outer][inner])) === false?fillShape(outer,inner):computerSelectsPosition();} ///////////////////////////////////CHECKEDFILLED function checkIfFilled(n){return isNaN(n);} /////////////////////////////FILL SHAPE function fillShape(outer,inner){ if(currentPlayer === "COMPUTER"){var cid = multiArray[outer][inner];currentID = ("box_" +cid);multiArray[outer][inner] = computerShape;displayShape(computerShape);} else{multiArray[outer][inner] = playerShape;displayShape(playerShape);} currentPlayer = currentPlayer === "USER"?"COMPUTER":"USER"; return true; } ////////////////////////////////DISPLAY SHAPE function displayShape(shape){ $("#"+currentID).html(shape);} ///////////////////////////////////USER CLICKS function UserSelects(outer,inner){counterPlays++;var check =checkIfFilled(multiArray[outer][inner]); if(check === false){fillShape(outer,inner);if(counterPlays < reps){ computerPlay();}}} ////////////////////////////////////GET THE INNER AND OUTER function getInnerOuterForUser(n){ var inner,outer;multiArray.forEach(function(sub,i,arr){sub.forEach(function(num,po,array){ if(num == n){outer = i,inner = po;}})}) return [outer,inner];} //CHECK FILLED function checkFull(){var filled = true;multiArray.forEach(function(sub){sub.forEach(function(i){if(isNaN(i) === false){filled = false;}})});return filled;};
///BEGIN GAME function play(){ var min = 1000/2; interForPlaying = setInterval(function(){ //currentPlayer === "USER"?userPlay():computerPlay(); userPlay(); var status = win(); console.log(status); console.log(counterPlays);console.log(reps); if(status === true){WON();} if(counterPlays >= reps && status === false){clear(); alert("YOU LOST");} },min); } function clear(){clearInterval(interForPlaying); } ///////////////////////////displayWinner function displayWinner(){$("#winnerBoard").html("YOU WON");} function currentLevel(){$("#LEVEL").html("L<br>E<br>V<br>E<br>L<br> <br>" + (currentLevelRowNumber -3) )} ///////////////////////////////////////////NXT LEVEL function nextLevel(){currentLevelRowNumber++;if(currentLevelRowNumber > 5){alert("GAME NEEDS SOME WORK... THANK YOU!!!")} else{ reset();} } ///////////////////////////////////////////////WON function WON(){clear();displayWinner();currentLevel();nextLevel();} ///////////////////////////////////////////LOST function LOST(){clear();alert("THE COMPUTER WON!");} /////////////////////////////userpLAY function userPlay(){$("#SHIELD").fadeOut("slow");} /////////////////////////////COMPUTER PLAY function computerPlay(){computerSelectsPosition();} //////////////////////////////WON function win(){ if(horizontalWin(multiArray)){return checkWHOWON();} else if(vertical(multiArray)){return checkWHOWON();} else if(diagonal(multiArray)){return checkWHOWON();} return false; } ////////////////////////////////////CHECK WHO function checkWHOWON(){ return winningLetter === playerShape?true:LOST(); } //////////////////////////////HORIZONTALPLAY function horizontalWin(array){ var horizontalWin = false; array.forEach(function(sub){var first = sub[0], count = 1; sub.forEach(function(a,i,arr){if(i !== 0 && first === a){count++;}}) if(count === currentLevelRowNumber){horizontalWin = true;winningLetter = first;} }) return horizontalWin; } //////////////////////////////////////VERTICAL function vertical(array){ var transformedArray = isSamePosArray(array); return horizontalWin(transformedArray); } //////////////////////////////////////issamePo function isSamePosArray(array){ var looping = currentLevelRowNumber,tracker = 0,mainA = []; while(looping > 0){var smaller = []; array.forEach(function(sub){smaller.push(sub[tracker]);});mainA.push(smaller);tracker++;looping--;} return mainA;
} ///////////////////////////////////////atin function atincrementPos(array){ var looptimes = 2, tracker = 0, main = []; while(looptimes > 0){ var smaller = []; array.forEach(function(sub){smaller.push(sub[tracker]);looptimes >= 2?tracker++:tracker--;}) looptimes--;tracker--; main.push(smaller); } return main; } /////////////////////////////////diagonal function diagonal(array){var transformedDiag = atincrementPos(array);return horizontalWin(transformedDiag);}
});
Tic-Tac-Toe Free Code Camp Challenge - Script Codes
Tic-Tac-Toe Free Code Camp Challenge - Script Codes
Home Page Home
Developer Ajala Comfort
Username AJALACOMFORT
Uploaded January 11, 2023
Rating 3
Size 5,214 Kb
Views 4,048
Do you need developer help for Tic-Tac-Toe Free Code Camp Challenge?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Ajala Comfort (AJALACOMFORT) Script Codes
Name
My Porfolio
Calculator with ReactJs
COLOR PICKER
Second Website
Recipe Book
Basic ReactJs Form
Calender Update
Intermediate Todo List with React.js
Palindrome Word
Slide Show with ReactJs
Create amazing marketing copy with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!