Skip to content

Instantly share code, notes, and snippets.

@eyalcohen4

eyalcohen4/buttonCheck.css

Forked from choopi24/FourInRow.css
Last active May 11, 2018 21:27
Show Gist options
  • Save eyalcohen4/5cd374f4ba71ba2e8805b5cc00c6d4ad to your computer and use it in GitHub Desktop.
Save eyalcohen4/5cd374f4ba71ba2e8805b5cc00c6d4ad to your computer and use it in GitHub Desktop.
Download ZIP
Raw
buttonCheck.css
html {
height: 100vh;
}
body {
background-color:lightcyan;
margin: 0;
padding: 0;
height: 100%;
}
.container{
width:100%;
height: 100%;
}
.navBar{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
margin-bottom: 30px;
width:100%;
height: 20%;
}
.pOne, .pTwo{
position:absolute;
text-align:center;
top: 0;
height:7.5%;
width:50%;
}
h1 {
margin: 0;
}
.pOne{
display:none;
left:0%;
background-color:deepskyblue;
}
.pTwo{
display:none;
left:50%;
background-color:crimson;
}
.preGame{
display:none;
}
.board, .preGame{
display: grid;
grid-template-columns: repeat(7, 1fr);
border: 1px solid blue;
height: 100%;
grid-gap: 5px;
width: 80%;
padding: 10px;
margin: 0 auto;
}
.buttons{
border:1px solid black;
display:block;
background-color: beige;
width: 80px;
height: 80px;
margin-bottom: 5px;
border-radius: 50%;
}
.stTeam{
background-color: deepskyblue;
}
.ndTeam{
background-color: crimson;
}
#winnerBoard{
display:none;
}
#startButton{
position:absolute;
left:46.7%;
top:60%;
padding: 30px;
border-radius:50px;
background-color:lightseagreen;
}
.navButton{
padding: 20px;
border-radius:50px;
}
#redButton{
left:50%;
background-color:crimson;
}
#blueButton{
/* left:45%; */
background-color:lightskyblue;
}
Raw
buttonCheck.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="index.css">
<title>Just Checkin</title>
</head>
<body>
<div id="winnerBoard"></div>
<div class="container" id = "iContain">
<div class="navBar" id="navBarID">
<h2 align="center" class="navStuff">1st player, Choose your color:</h2>
<div>
<button class="navButton navStuff" id="blueButton" onclick="colorChoice(2)">Blue</button>
<button class="navButton navStuff" id="redButton" onclick="colorChoice(3)">Red</button>
</div>
</div>
<div>
<div class="pOne" id="ONE"> <h1>Blue player turn...</h1></div>
<div class="pTwo" id="TWO"><h1>Red player turn...</h1> </div>
</div>
<div class = "board"></div>
</div>
<script src="index.js"></script>
</body>
</html>
Raw
buttonCheck.js
var turn = -100;
var x;
var navigation = document.getElementsByClassName('navStuff');
const None = 'none',
BLUE = 'blue',
RED = 'red';
const blueTurn = document.getElementById('ONE');
const redTurn = document.getElementById('TWO');
//choose color
function colorChoice(x) {
for (var i = 0; i < 3; i++) {
navigation[i].style.display = "none";
}
turn = x;
if (turn % 2 == 0) {
blueTurn.style.display = "block";
redTurn.style.display = "none";
} else {
blueTurn.style.display = "none";
redTurn.style.display = "block";
}
//Game();
}
//Creating Board
//function playGame(){
//if (turn<0){alert("Choose Color");throw ''}
const Board = new Array(7);
// const Board = [];
for (var i = 0; i < 7; i++) {
Board[i] = new Array(7).fill(None);
}
//Buttons Making
for (var i = 1; i < 8; i++) {
for (var j = 1; j < 8; j++) {
const button = document.createElement('button');
button.id = `(${i},${j})`;
button.className = 'buttons';
//button.innerText = `(${i},${j})`;
button.addEventListener('click', Game);
document.querySelector('.board').appendChild(button);
}
}
//Four in row Game
function Game() {
if (x == 666) {
throw "";
}
var id1 = this.id;
//var row = id1.charAt(1), col = id1.charAt(3);
var col = parseInt(id1.charAt(1)) - 1;
var row = parseInt(id1.charAt(3)) - 1;
if (document.getElementById(id1).className == 'buttons stTeam' || document.getElementById(id1).className == 'buttons ndTeam') {
return "";
}
if (turn % 2 == 0) {
document.getElementById(id1).className += " stTeam";
Board[row][col] = BLUE;
turn++;
} else {
document.getElementById(id1).className += " ndTeam";
Board[row][col] = RED;
turn++;
}
if (turn % 2 == 0) {
blueTurn.style.display = "block";
redTurn.style.display = "none";
} else {
blueTurn.style.display = "none";
redTurn.style.display = "block";
}
x = checkIt(row, col);
}
function checkIt(row, col) {
var checkWin;
if (Board[row][col] != None) {
checkWin = 0;
var colors = Board[row][col];
if (Board[row][col] == colors) {
//rows check
var rowWin = 0;
for (var i = 0; i < 7; i++) {
if (Board[i][col] !== colors) {
rowWin = 0;
}
if (Board[i][col] == colors) {
rowWin++;
}
if (rowWin == 4) {
if (colors == BLUE) {
alert("Blue Won");
}
if (colors == RED) {
alert("Red Won");
}
return 666;
}
}
checkWin = 0;
//columns check
for (var i = 0; i < 7; i++) {
if (row > 6) {
return "";
}
if (Board[row][i] !== colors) {
checkWin = 0;
}
if (Board[row][i] == colors) {
checkWin++;
}
if (checkWin == 4) {
if (colors == BLUE) {
alert("Blue Won");
}
if (colors == RED) {
alert("Red Won");
}
return 666;
}
}
}
}
//alert ("in diago check");
var text = "";
for (var i = 0; i < 7; i++) {
for (var j = 0; j < 7; j++) {
//alert(Board[j][i]);
if (Board[j][i] != None) {
text = j + " 1 " + i;
//alert(text);
//CHECK DIAGONAL LEFT TO RIGHT START
var x = j,
y = i,
colored = Board[j][i];
if (Board[x][y] == colored) {
var check = 0;
for (var count = 0; count < 4; count++) {
if (Board[x][y] == colored) {
//alert("another match");
check++;
} else {
count = 4;
}
if (x > 6 || x < 0) {
count = 4;
} else {
x++;
}
if (y < 0 || y > 6) {
count = 4;
} else {
y++;
}
}
if (check == 4) {
if (colored == BLUE) {
alert("BlueWon")
}
if (colored == RED) {
alert("RedWon")
}
return 666;
}
}
//CHECK DIAGONAL LEFT TO RIGHT END
//CHECK DIAGONAL RIGHT TO LEFT START
var x = j,
y = i,
colored = Board[j][i];
if (Board[x][y] == colored) {
var checkRight = 0;
for (var count1 = 0; count1 < 4; count1++) {
if (Board[x][y] !== colored) {
count1 = 4;
} else {
checkRight++;
}
if (x >= 7 || x <= -1) {
count1 = 4;
} else {
x++;
}
if (y <= -1 || y >= 7) {
count1 = 4;
} else {
y--;
}
}
if (checkRight == 4) {
if (colored == BLUE) {
alert("BlueWon")
}
if (colored == RED) {
alert("RedWon")
}
return 666;
}
}
//CHECK DIAGONAL RIGHT TO LEFT END
//dd = checkNowRight(j,i,aa);
}
//if(dd == true || ee == true){
// alert("we have a winner");
// return 666;
// }
}
}
//alert("Diago ended");
}
//}
//DIAGONAL CHECK
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment