Skip to content

Instantly share code, notes, and snippets.

@CarterMcAlister

CarterMcAlister/index.html

Created April 1, 2019 01:33
Show Gist options
  • Save CarterMcAlister/7d7194ef200fd94777fe2a024381e911 to your computer and use it in GitHub Desktop.
Save CarterMcAlister/7d7194ef200fd94777fe2a024381e911 to your computer and use it in GitHub Desktop.
Download ZIP
TicTacToe
Raw
index.html
<body ng-app='TicTacToe' ng-controller='MainCtrl'>
<div class="container">
<div class="row">
<h1>TicTacToe</h1>
<h3>{{subText}}</h3>
<div class="row">
<button type="button" class="btn btn-default btn-lg" ng-click="selected(0)">{{spots[0]}}</button>
<button type="button" class="btn btn-default btn-lg" ng-click="selected(1)">{{spots[1]}}</button>
<button type="button" class="btn btn-default btn-lg" ng-click="selected(2)">{{spots[2]}}</button>
</div>
<div class="row">
<button type="button" class="btn btn-default btn-lg" ng-click="selected(3)">{{spots[3]}}</button>
<button type="button" class="btn btn-default btn-lg" ng-click="selected(4)">{{spots[4]}}</button>
<button type="button" class="btn btn-default btn-lg" ng-click="selected(5)">{{spots[5]}}</button>
</div>
<div class="row">
<button type="button" class="btn btn-default btn-lg" ng-click="selected(6)">{{spots[6]}}</button>
<button type="button" class="btn btn-default btn-lg" ng-click="selected(7)">{{spots[7]}}</button>
<button type="button" class="btn btn-default btn-lg" ng-click="selected(8)">{{spots[8]}}</button>
</div>
<div class="row">
<button type="button" class="btn btn-default btn-md" ng-click="symbolSelect('X')">Select X</button>
<button type="button" class="btn btn-default btn-md" ng-click="symbolSelect('O')">Select O</button>
</div>
</div>
</div>
</body>
Raw
script.js
//todo, fix 8 on first move, add random
var app = angular.module('TicTacToe', []);
app.controller('MainCtrl', function($scope, $timeout) {
//initial vars
$scope.spots = ["", "", "",
"", "", "",
"", "", ""];
$scope.subText = 'Select your symbol';
var humanMarker = '';
var compMarker = '';
var turn = true;
var winner = false;
//functions
function reset(){
$scope.spots = ["", "", "",
"", "", "",
"", "", ""];
$scope.subText = 'Select your symbol';
winner = false;
}
$scope.symbolSelect = function(sym){
console.log('human:', sym)
humanMarker = sym;
reset();
if(sym == 'X'){
compMarker = 'O';
}else{
compMarker = 'X';
}
$scope.subText = "You are "+humanMarker+", make your move"
}
$scope.selected = function(place){
if($scope.spots[place] == '' && !winner){
$scope.spots[place] = humanMarker;
won();
if(!winner){
$timeout(function(){aiMove()}, 500);
}
}
}
function won(){
//check row
for(var i = 0; i<8; i+=3){
for(var j = 0; j<3; j++){
if($scope.spots[i] == $scope.spots[i+1] && $scope.spots[i+1] == $scope.spots[i+2] && $scope.spots[i] != ''){
winner = true;
if($scope.spots[i] == humanMarker){
$scope.subText = 'You win!';
}else{
$scope.subText = 'Computer wins this time.';
}
}
}
}
//check column
for(var i = 0; i<3; i++){
for(var j = 0; j<3; j++){
if($scope.spots[i] == $scope.spots[i+3] && $scope.spots[i+3] == $scope.spots[i+6] && $scope.spots[i] != ''){
winner = true;
if($scope.spots[i] == humanMarker){
$scope.subText = 'You win!';
}else{
$scope.subText = 'Computer wins this time.';
}
}
}
}
//check diag l-r
if($scope.spots[0] == $scope.spots[4] && $scope.spots[4] == $scope.spots[8] && $scope.spots[4] != ''){
winner = true;
if($scope.spots[4] == humanMarker){
$scope.subText = 'You win!';
}else{
$scope.subText = 'Computer wins this time.';
}
}
//check diag r-l
if($scope.spots[2] == $scope.spots[4] && $scope.spots[4] == $scope.spots[6] && $scope.spots[4] != ''){
winner = true;
if($scope.spots[4] == humanMarker){
$scope.subText = 'You win!';
}else{
$scope.subText = 'Computer wins this time.';
}
}
}
function patternCheck(marker){
var check = [["", marker, marker], [marker, "", marker], [marker, marker, ""],]
//check row
for(var i = 0; i<8; i+=3){
for(var j = 0; j<check.length; j++){
if(check[j].toString() == $scope.spots.slice(i,i+3).toString() && turn){
turn = false;
if(check[j][0] == ""){
$scope.spots[i+j] = compMarker;
} else if(check[j][1] == ""){
$scope.spots[i+j] = compMarker;
}else{
$scope.spots[i+j] = compMarker;
}
}
}
}
//check column
for(var i = 0; i<3; i++){
for(var j = 0; j<check.length; j++){
if(check[j].toString() == [$scope.spots[i], $scope.spots[i+3], $scope.spots[i+6]].toString() && turn){
turn = false;
if(check[j][0] == ""){
$scope.spots[i+(j*3)] = compMarker;
} else if(check[j][1] == ""){
$scope.spots[i+(j*3)] = compMarker;
}else{
$scope.spots[i+(j*3)] = compMarker;
}
}
}
}
//check diag l-r
for(var j = 0; j<check.length; j++){
if(check[j].toString() == [$scope.spots[0], $scope.spots[4], $scope.spots[8]].toString() && turn){
turn = false;
if(check[j][0] == ""){
$scope.spots[0] = compMarker;
} else if(check[j][1] == ""){
$scope.spots[4] = compMarker;
}else{
$scope.spots[8] = compMarker;
}
}
}
//check diag r-l
for(var j = 0; j<check.length; j++){
if(check[j].toString() == [$scope.spots[2], $scope.spots[4], $scope.spots[6]].toString() && turn){
turn = false;
if(check[j][0] == ""){
$scope.spots[2] = compMarker;
} else if(check[j][1] == ""){
$scope.spots[4] = compMarker;
}else{
$scope.spots[6] = compMarker;
}
}
}
}
function selectMovement(marker){
for(var i = 0; i<=8; i++){
if($scope.spots[i] == marker && turn){
if($scope.spots[i-3] == ""){
$scope.spots[i-3] = compMarker;
turn = false;
}else if($scope.spots[i+1] == ""){
$scope.spots[i+1] = compMarker;
turn = false;
}else if($scope.spots[i+3] == ""){
$scope.spots[i+3] = compMarker;
turn = false;
}else if($scope.spots[i-1] == ""){
$scope.spots[i-1] = compMarker;
turn = false;
}
}
}
}
function aiMove(){
turn = true;
//look for winning moves
patternCheck(compMarker);
//look for oponent winning moves
if(turn){
patternCheck(humanMarker);
}
//make next closest move
if(turn){
selectMovement(compMarker);
}
//make move near enemy
if(turn){
selectMovement(humanMarker);
}
//check for winner
won();
//tie if still no move
if(turn && !winner){
$scope.subText = "It's a tie!"
}
}
})
Raw
scripts
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.2/angular.min.js"></script>
Raw
style.css
body{
text-align:center;
background: #FDF6EE;
font-family: 'Oswald', sans-serif;
}
.btn:focus{
outline: none;
}
.btn-lg{
min-width:100px;
min-height:100px;
border: solid;
margin: 5px 0px 0px 0px;
}
.btn-md{
margin: 10px 5px 0px 5px;
}
Raw
styles
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
Raw
tictactoe.markdown
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment