JSFiddle - React, Tailwind, and code Playground
HTML
<div ng-app="MyApp">
<div ng-controller="Game as ctrl">
<table class="board">
<h1>Table</h1>
<input type="number" ng-model="val">
<button ng-click="ctrl.foo(val)">PRESS</button>
<tr ng-repeat="item in ctrl.arr">
<td ng-repeat="td in ctrl.arr" ng-click="ctrl.push($event, $parent.$index, $index, val)">{{ctrl.arr2[$parent.$index][$index]}}</td>
</tr>
</table>
</div>
</div>
CSS
table.board td {
width: 1.5em;
height: 1.5em;
text-align: center;
vertical-align: middle;
border: solid 1px #ddd;
}
JavaScript
var app = angular.module("MyApp", []);
app.controller('Game', function Game() {
this.arr2 = [];
this.rez = [];
this.player = 1;
this.foo = function(size) {
this.arr = [];
for (var i = 0; i < size; i++) {
this.arr.push(i);
this.arr2.push([]);
for (var j = 0; j < size; j++) {
this.arr2[i].push("");
}
}
}
this.push = function(ev, tr, td, size) {
if (this.player == 1 && this.arr2[tr][td] == "") {
// if(this.player == 1 && ev.currentTarget.text == ""){
this.arr2[tr][td] = 'X';
this.player -= 1;
setInterval(this.cpu(tr, td), 2000);
} else {
alert('Unaveleble :) ');
}
console.log(tr,td);
this.rezult();
// console.log(ev.currentTarget.text);
}
this.cpu = function(tr, td) {
var i = Math.floor(Math.random() * 5);
var j = Math.floor(Math.random() * 5);
// console.log("cpu " + i,j);
if (this.player == 0 && this.arr2[i][j] == "") {
this.arr2[i][j] = 'o';
this.player = 1;
}
else {
this.cpu();
}
};
this.rezult = function(){
this.arr2.forEach(function(arr, i, innerArr){
arr.forEach(function(val, j){
var wincomb = innerArr[i][j] && innerArr[i][j+1] && innerArr[i][j+2];
var wincomb2 = innerArr[i][j] && innerArr[i+1][j] && innerArr[i+2][j];
var wincomb3 = innerArr[i][j] && innerArr[i+1][j+1] && innerArr[i+2][j+2];
console.log(wincomb == "X" && innerArr[i][j] !== "o");
if(wincomb == "X"){
alert(' X wins!');
...