Thom Page
10 years ago
parent
2a45a5fb52
commit
f06d459eeb
@ -0,0 +1,37 @@
|
|||||||
|
#board {
|
||||||
|
min-width: 300px;
|
||||||
|
max-width: 800px;
|
||||||
|
min-height: 300px;
|
||||||
|
max-height: 800px;
|
||||||
|
/* background-color: pink;*/
|
||||||
|
border-radius: 5%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.size {
|
||||||
|
border: 1px solid grey;
|
||||||
|
background-color: azure;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.square {
|
||||||
|
position: relative;
|
||||||
|
display: inline-block;
|
||||||
|
left: 1.5%;
|
||||||
|
top: 2px;
|
||||||
|
/* height: 32%; width: 32%;*/
|
||||||
|
border-radius: 10%;
|
||||||
|
overflow: hidden;
|
||||||
|
background-color: white;
|
||||||
|
cursor: pointer;
|
||||||
|
border: 1px solid black;
|
||||||
|
}
|
||||||
|
|
||||||
|
img {
|
||||||
|
height: 100%; width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
#reset {
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
Before Width: | Height: | Size: 92 KiB After Width: | Height: | Size: 92 KiB |
|
Before Width: | Height: | Size: 120 KiB After Width: | Height: | Size: 120 KiB |
|
Before Width: | Height: | Size: 22 KiB After Width: | Height: | Size: 22 KiB |
|
Before Width: | Height: | Size: 993 B After Width: | Height: | Size: 993 B |
@ -0,0 +1,25 @@
|
|||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<title>EXTRA tic tac toe</title>
|
||||||
|
<link rel="stylesheet" type="text/css" href="css/style.css">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div id="container">
|
||||||
|
<span class="size">9</span>
|
||||||
|
<span class="size">16</span>
|
||||||
|
<span class="size">25</span>
|
||||||
|
<span class="size">36</span>
|
||||||
|
<span class="size">49</span>
|
||||||
|
<span class="size">64</span>
|
||||||
|
<span class="size">81</span>
|
||||||
|
<span class="size">100</span>
|
||||||
|
<span class="size">121</span>
|
||||||
|
<span class="size">144</span>
|
||||||
|
<span class="size">169</span>
|
||||||
|
<span class="size">196</span>
|
||||||
|
<br><br>
|
||||||
|
<div id="board"></div>
|
||||||
|
</div>
|
||||||
|
<script type="text/javascript" src="js/app_extra.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@ -0,0 +1,197 @@
|
|||||||
|
window.onload = function() {
|
||||||
|
console.log('app.js');
|
||||||
|
|
||||||
|
// the game will start when a size is selected
|
||||||
|
// will also reset the game when clicked
|
||||||
|
var sizeButtons = document.getElementsByClassName('size');
|
||||||
|
for (var i=0; i < sizeButtons.length; i++) {
|
||||||
|
sizeButtons[i].addEventListener('click', setValues);
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
// global variables to be populated by setValues function
|
||||||
|
var turn, size, Xpositions, Opositions, windex;
|
||||||
|
|
||||||
|
// setValues sets the variables for the game and invokes the makeBoard function
|
||||||
|
var setValues = function() {
|
||||||
|
turn = true;
|
||||||
|
size = this.innerText;
|
||||||
|
Xpositions = [];
|
||||||
|
Opositions = [];
|
||||||
|
|
||||||
|
windex = [];
|
||||||
|
|
||||||
|
// generates winning combinations for rows and columns according to the number of squares
|
||||||
|
for (var i=0; i < Math.sqrt(size); i++) {
|
||||||
|
var row = [];
|
||||||
|
for (var j=(i * Math.sqrt(size)); j < (Math.sqrt(size) + (i * Math.sqrt(size))); j++) {
|
||||||
|
row.push(j);
|
||||||
|
}
|
||||||
|
var col = [];
|
||||||
|
for (var j = i; j < (i + parseInt(size)); j += Math.sqrt(size)) {
|
||||||
|
col.push(j);
|
||||||
|
}
|
||||||
|
windex.push(row, col);
|
||||||
|
}
|
||||||
|
|
||||||
|
// generates winning combinations for diagonals (top left to bottom right)
|
||||||
|
var diag1 = [];
|
||||||
|
for (var j=0; j < parseInt(size); j += (Math.sqrt(size) + 1)) {
|
||||||
|
diag1.push(j);
|
||||||
|
}
|
||||||
|
|
||||||
|
// generates winning combinations for diagonals (top right to bottom left)
|
||||||
|
var diag2 = [];
|
||||||
|
for (var k=(Math.sqrt(size) - 1); k <= (size - Math.sqrt(size)); k += (Math.sqrt(size) - 1)) {
|
||||||
|
diag2.push(k);
|
||||||
|
}
|
||||||
|
windex.push(diag1, diag2);
|
||||||
|
|
||||||
|
// makes the board according to the number of squares
|
||||||
|
makeBoard();
|
||||||
|
}
|
||||||
|
|
||||||
|
// generates the board according to the size variable, and
|
||||||
|
// adds an eventListener for each square (play function)
|
||||||
|
var makeBoard = function() {
|
||||||
|
var board = document.getElementById('board');
|
||||||
|
board.innerHTML = "";
|
||||||
|
for (var i=0; i < size; i++) {
|
||||||
|
var square = document.createElement('square');
|
||||||
|
square.id = i;
|
||||||
|
square.className = "square";
|
||||||
|
square.style.margin = "2px";
|
||||||
|
square.style.width = (100 / Math.sqrt(size)) - 1 + "%";
|
||||||
|
square.style.height = (100 / Math.sqrt(size)) - 1 + "%";
|
||||||
|
var board = document.getElementById('board');
|
||||||
|
board.appendChild(square);
|
||||||
|
square.addEventListener('click', play);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
var play = function() {
|
||||||
|
if (!this.className.includes("x") && !this.className.includes("o")) {
|
||||||
|
if (turn) {
|
||||||
|
this.innerHTML = '<img src="images/x.png"/>';
|
||||||
|
this.className += ' x';
|
||||||
|
Xpositions.push(this.id);
|
||||||
|
} else {
|
||||||
|
this.innerHTML = '<img src="images/o.png"/>';
|
||||||
|
this.className += ' o';
|
||||||
|
Opositions.push(this.id);
|
||||||
|
}
|
||||||
|
turn = !turn;
|
||||||
|
checkWin();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
var checkWin = function() {
|
||||||
|
var squares = document.getElementsByClassName('square');
|
||||||
|
if (checkPositions(Xpositions)) {
|
||||||
|
for (var i=0; i < squares.length; i++) {
|
||||||
|
squares[i].innerHTML = '<img src="images/egg.png"/>'
|
||||||
|
}
|
||||||
|
} else if (checkPositions(Opositions)) {
|
||||||
|
for (var j=0; j < squares.length; j++) {
|
||||||
|
squares[j].innerHTML = '<img src="images/depression.png"/>'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
var checkPositions = function(playerPositions) {
|
||||||
|
for (var i=0; i < windex.length; i++) {
|
||||||
|
var hits = 0;
|
||||||
|
for (var j=0; j < windex[i].length; j++) {
|
||||||
|
for (var k=0; k < playerPositions.length; k++) {
|
||||||
|
if (windex[i][j] == playerPositions[k]) {
|
||||||
|
hits++;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
if (hits == Math.sqrt(size)) { return true };
|
||||||
|
}
|
||||||
|
return false
|
||||||
|
}
|
||||||
|
|
||||||
|
// EOF
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
// if (size == 9) {
|
||||||
|
// windex = [
|
||||||
|
// [0, 1, 2], [3, 4, 5], [6, 7, 8],
|
||||||
|
// [0, 3, 6], [1, 4, 7], [2, 5, 8],
|
||||||
|
// [0, 4, 8], [2, 4, 6]
|
||||||
|
// ];
|
||||||
|
// } else if (size == 16) {
|
||||||
|
// windex = [
|
||||||
|
// [0, 1, 2, 3], [4, 5, 6, 7], [8, 9, 10, 11], [12, 23, 14, 15],
|
||||||
|
// [0, 4, 8, 12], [1, 5, 9, 13], [2, 6, 10, 14], [3, 7, 11, 15],
|
||||||
|
// [0, 5, 10, 15], [3, 6, 9, 12]
|
||||||
|
// ];
|
||||||
|
// } else if (size == 25) {
|
||||||
|
// windex = [
|
||||||
|
// [0, 1, 2, 3, 4], [5, 6, 7, 8, 9], [10, 11, 12, 13, 14], [15, 16, 17, 18, 19], [20, 21, 22, 23, 24],
|
||||||
|
// [0, 5, 10, 15, 20], [1, 6, 11, 16, 21], [2, 7, 12, 17, 22], [3, 8, 13, 18, 23], [4, 9, 14, 19, 24],
|
||||||
|
// [0, 6, 12, 18, 24], [4, 8, 12, 16, 20]
|
||||||
|
// ];
|
||||||
|
// }
|
||||||
|
|
||||||
|
|
||||||
|
// sets up arrays of winning row numbers
|
||||||
|
// for (var i=0; i < Math.sqrt(size); i++) {
|
||||||
|
// var row = [];
|
||||||
|
// for (var j=(i * Math.sqrt(size)); j < (Math.sqrt(size) + (i * Math.sqrt(size))); j++) {
|
||||||
|
// row.push(j);
|
||||||
|
// }
|
||||||
|
// winrar.push(row);
|
||||||
|
// }
|
||||||
|
|
||||||
|
// console.log('rows: ', winrar);
|
||||||
|
|
||||||
|
// var winwoop = [];
|
||||||
|
// for (var i=0; i < Math.sqrt(size); i++) {
|
||||||
|
// var col = [];
|
||||||
|
// for (var j = i; j < (i + parseInt(size)); j += Math.sqrt(size)) {
|
||||||
|
// col.push(j);
|
||||||
|
// }
|
||||||
|
// winwoop.push(col);
|
||||||
|
// }
|
||||||
|
|
||||||
|
// console.log('columns: ', winwoop);
|
||||||
|
|
||||||
|
// [0, 4, 8], [2, 4, 6]
|
||||||
|
// var windrip = [];
|
||||||
|
|
||||||
|
// var diag1 = [];
|
||||||
|
// var diag2 = [];
|
||||||
|
|
||||||
|
// for (var j=0; j < parseInt(size); j += (Math.sqrt(size) + 1)) {
|
||||||
|
// diag1.push(j);
|
||||||
|
// }
|
||||||
|
// for (var k=(Math.sqrt(size) - 1); k <= (size - Math.sqrt(size)); k += (Math.sqrt(size) - 1)) {
|
||||||
|
// diag2.push(k);
|
||||||
|
// }
|
||||||
|
|
||||||
|
// console.log('diag1: ', diag1);
|
||||||
|
// console.log('diag2: ', diag2);
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
// 0, 3, 6
|
||||||
|
// 1, 4, 7
|
||||||
|
// 2, 5, 8
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
// sets up arrays of winning column numbers
|
||||||
|
|
||||||
|
// sets up arrays of winning diagonal numbers
|
||||||
|
|
||||||
|
// console.log(diag2);
|
||||||
@ -1,88 +0,0 @@
|
|||||||
window.onload = function() {
|
|
||||||
|
|
||||||
console.log('app.js');
|
|
||||||
|
|
||||||
var turn = true;
|
|
||||||
|
|
||||||
var Xpositions = [];
|
|
||||||
var Opositions = [];
|
|
||||||
|
|
||||||
var windex = [
|
|
||||||
[0, 1, 2], [3, 4, 5], [6, 7, 8],
|
|
||||||
[0, 3, 6], [1, 4, 7], [2, 5, 8],
|
|
||||||
[0, 4, 8], [2, 4, 6]
|
|
||||||
];
|
|
||||||
|
|
||||||
var squares = document.getElementsByClassName('square');
|
|
||||||
|
|
||||||
var play = function() {
|
|
||||||
|
|
||||||
if (!this.className.includes("x") && !this.className.includes("o")) {
|
|
||||||
|
|
||||||
if (turn) {
|
|
||||||
this.innerHTML = '<img src="x.png"/>';
|
|
||||||
this.className += ' x';
|
|
||||||
Xpositions.push(this.id);
|
|
||||||
} else {
|
|
||||||
this.innerHTML = '<img src="o.png"/>';
|
|
||||||
this.className += ' o';
|
|
||||||
Opositions.push(this.id);
|
|
||||||
}
|
|
||||||
turn = !turn;
|
|
||||||
checkWin();
|
|
||||||
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
for (var i=0; i < squares.length; i++) {
|
|
||||||
squares[i].addEventListener('click', play);
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
var checkWin = function() {
|
|
||||||
var squares = document.getElementsByClassName('square');
|
|
||||||
if (checkX()) {
|
|
||||||
console.log('X WON!!!!!');
|
|
||||||
for (var i=0; i < squares.length; i++) {
|
|
||||||
squares[i].innerHTML = '<img src="egg.png"/>'
|
|
||||||
}
|
|
||||||
} else if (checkO()) {
|
|
||||||
console.log('O WON!!!!!');
|
|
||||||
for (var j=0; j < squares.length; j++) {
|
|
||||||
squares[j].innerHTML = '<img src="depression.png"/>'
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
var checkX = function() {
|
|
||||||
for (var i=0; i < windex.length; i++) {
|
|
||||||
var hits = 0;
|
|
||||||
for (var j=0; j < windex[i].length; j++) {
|
|
||||||
for (var k=0; k < Xpositions.length; k++) {
|
|
||||||
if (windex[i][j] == Xpositions[k]) {
|
|
||||||
hits++;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
if (hits == 3) { return true };
|
|
||||||
}
|
|
||||||
return false
|
|
||||||
}
|
|
||||||
|
|
||||||
var checkO = function() {
|
|
||||||
for (var i=0; i < windex.length; i++) {
|
|
||||||
var hits = 0;
|
|
||||||
for (var j=0; j < windex[i].length; j++) {
|
|
||||||
for (var k=0; k < Opositions.length; k++) {
|
|
||||||
if (windex[i][j] == Opositions[k]) {
|
|
||||||
hits++;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
if (hits == 3) { return true };
|
|
||||||
}
|
|
||||||
return false
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
|
After Width: | Height: | Size: 92 KiB |
|
After Width: | Height: | Size: 120 KiB |
|
After Width: | Height: | Size: 22 KiB |
|
After Width: | Height: | Size: 993 B |
@ -0,0 +1,63 @@
|
|||||||
|
window.onload = function() {
|
||||||
|
console.log('app.js');
|
||||||
|
|
||||||
|
var squares = document.getElementsByClassName('square');
|
||||||
|
for (var i=0; i < squares.length; i++) {
|
||||||
|
squares[i].addEventListener('click', play);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
var turn = true;
|
||||||
|
|
||||||
|
var Xpositions = [],
|
||||||
|
Opositions = [];
|
||||||
|
|
||||||
|
var windex = [
|
||||||
|
[0, 1, 2], [3, 4, 5], [6, 7, 8],
|
||||||
|
[0, 3, 6], [1, 4, 7], [2, 5, 8],
|
||||||
|
[0, 4, 8], [2, 4, 6]
|
||||||
|
];
|
||||||
|
|
||||||
|
var play = function() {
|
||||||
|
if (!this.className.includes("x") && !this.className.includes("o")) {
|
||||||
|
if (turn) {
|
||||||
|
this.innerHTML = '<img src="images/x.png"/>';
|
||||||
|
this.className += ' x';
|
||||||
|
Xpositions.push(this.id);
|
||||||
|
} else {
|
||||||
|
this.innerHTML = '<img src="images/o.png"/>';
|
||||||
|
this.className += ' o';
|
||||||
|
Opositions.push(this.id);
|
||||||
|
}
|
||||||
|
turn = !turn;
|
||||||
|
checkWin();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
var checkWin = function() {
|
||||||
|
var squares = document.getElementsByClassName('square');
|
||||||
|
if (checkPositions(Xpositions)) {
|
||||||
|
for (var i=0; i < squares.length; i++) {
|
||||||
|
squares[i].innerHTML = '<img src="images/egg.png"/>'
|
||||||
|
}
|
||||||
|
} else if (checkPositions(Opositions)) {
|
||||||
|
for (var j=0; j < squares.length; j++) {
|
||||||
|
squares[j].innerHTML = '<img src="images/depression.png"/>'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
var checkPositions = function(playerPositions) {
|
||||||
|
for (var i=0; i < windex.length; i++) {
|
||||||
|
var hits = 0;
|
||||||
|
for (var j=0; j < windex[i].length; j++) {
|
||||||
|
for (var k=0; k < playerPositions.length; k++) {
|
||||||
|
if (windex[i][j] == playerPositions[k]) {
|
||||||
|
hits++;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
if (hits == 3) { return true };
|
||||||
|
}
|
||||||
|
return false
|
||||||
|
}
|
||||||
Loading…
Reference in new issue