-
Notifications
You must be signed in to change notification settings - Fork 0
/
sketch2.js
103 lines (103 loc) · 3.66 KB
/
sketch2.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
"use strict"
var turno= 1, element, a = 1, t, done, tremble;
//funcion constructora de celdas
function Cell(empty,value){
this.e=empty;
this.v=value;
}
var juego=[];//array vacio donde meto las 9 celdas
for(var i=0;i<9;i++){
juego.push(new Cell(true,"n"));
}
/*funcion que pone los valores de vacio a verdadero en todas las celdas, los
colores, turnos etc, */
function resetear() {
done= false;
t = document.getElementById("texto");
for(var x=0;x<9;x++){
let elemid = document.getElementById("cell"+x);
juego[x].e = true;
juego[x].v = "";
elemid.innerHTML = "";
}
turno = 1;
tremble.innerHTML= deftext;
tremble.className="";
t.style.backgroundColor="#e34a06";
for(var p=0;p<6;p++){
let elemclass = document.getElementById("line"+p);
let cl = elemclass.className;
elemclass.className="";
setTimeout(function(){elemclass.className=cl;},100);
}
for(var p=0;p<2;p++){
let elemclass = document.getElementById("hline"+p);
let cl = elemclass.className;
elemclass.className="";
setTimeout(function(){elemclass.className=cl;},100);
}
}
function clickerino(n){
tremble = document.getElementById("trem");
t = document.getElementById("texto");
element = document.getElementById("cell"+n);
if(juego[n].e==true && !done){
switch(turno){
case 1:
juego[n].e=false;
juego[n].v="x";
element.style.color = "#e34a06";
element.innerHTML = "X";
t.style.backgroundColor="#407026";
turno = 2;
break;
case 2:
juego[n].e=false;
juego[n].v="o";
element.style.color = "#407026";
t.style.backgroundColor="#e34a06";
element.innerHTML = "O";
turno = 1;
break;
}
/*Cycle through all the values of the keys and if all are false, it sets
"true" as the value of the variable, for it to be used in the last "else if".*/
var falserino = juego.every(valor => valor.e==false);
}
if(!done){
if(juego[0].v== "x" && juego[1].v=="x" && juego[2].v=="x" ||
juego[0].v== "x" && juego[3].v=="x" && juego[6].v=="x" ||
juego[0].v== "x" && juego[4].v=="x" && juego[8].v=="x" ||
juego[2].v== "x" && juego[5].v=="x" && juego[8].v=="x" ||
juego[2].v== "x" && juego[4].v=="x" && juego[6].v=="x" ||
juego[1].v== "x" && juego[4].v=="x" && juego[7].v=="x" ||
juego[6].v== "x" && juego[7].v=="x" && juego[8].v=="x" ||
juego[3].v== "x" && juego[4].v=="x" && juego[5].v=="x"){
tremble.innerHTML= xtext; done=true; tremble.className="animated tada"; t.style.backgroundColor="#e34a06";
setTimeout(function(){resetear();}, 5000);
}else if(juego[0].v== "o" && juego[1].v=="o" && juego[2].v=="o" ||
juego[0].v== "o" && juego[3].v=="o" && juego[6].v=="o" ||
juego[0].v== "o" && juego[4].v=="o" && juego[8].v=="o" ||
juego[2].v== "o" && juego[5].v=="o" && juego[8].v=="o" ||
juego[2].v== "o" && juego[4].v=="o" && juego[6].v=="o" ||
juego[1].v== "o" && juego[4].v=="o" && juego[7].v=="o" ||
juego[6].v== "o" && juego[7].v=="o" && juego[8].v=="o" ||
juego[3].v== "o" && juego[4].v=="o" && juego[5].v=="o") {
tremble.innerHTML= otext; done=true; tremble.className="animated rubberBand"; t.style.backgroundColor="#407026";
setTimeout(function(){resetear();}, 5000);
}else if (falserino){
tremble.innerHTML= dtext; done=true;
t.style.backgroundColor="#f9bd03";
tremble.className="animated flash";
setTimeout(function(){resetear();}, 5000);
}
}
}
var deftext = `Play!`;
var xtext = `Player 1 wins!`;
var otext = `Player 2 wins!`;
var dtext = `Draw`;
var descript = `
CSS grid, Javascript and <a href="https://cdnjs.com/libraries/animate.css/" target="_blank">animate.css</a><br>
Code on <a href="https://github.com/Flamerinus/3enraya" target="_blank">GitHub</a>.
`;