Skip to content

Instantly share code, notes, and snippets.

@choopi24

choopi24/buttonCheck.css

Last active May 9, 2018 12:48
Show Gist options
  • Save choopi24/1bc1212357e316a737172bd07eb185b8 to your computer and use it in GitHub Desktop.
Save choopi24/1bc1212357e316a737172bd07eb185b8 to your computer and use it in GitHub Desktop.
Download ZIP
project testing
Raw
buttonCheck.css
body{
background-color:lightcyan;
}
.container{
position:absolute;
top: 0%;
width:100%;
height:150%;
}
.navBar{
position:absolute;
top: 0%;
width:100%;
height:15.5%;
}
.pOne, .pTwo{
position:absolute;
text-align:center;
height:15.5%;
width:50%;
}
.pOne{
display:block;
left:0%;
background-color:deepskyblue;
}
.pTwo{
display:none;
left:50%;
background-color:crimson;
}
.preGame{
display:none;
}
.board, .preGame{
position: absolute;
top: 47%;
left: 50%;
transform: translate(-50%, -50%);
border: 1px solid blue;
max-height: 755px;
max-width: 715px;
}
.buttons{
border:1px solid black;
display:block;
background-color: beige;
padding: 30px;
margin:5px;
margin-left:15px;
margin-top:15px;
margin-bottom:5px;
width: 80px;
height: 80px;
border-radius:50px;
float:left;
}
.stTeam{
background-color: deepskyblue;
}
.ndTeam{
background-color: crimson;
}
.fourInRow{
display:block;
}
Raw
buttonCheck.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="buttonCheck.css">
<title>Just Checkin</title>
</head>
<body>
<div class="container" id = "iContain">
<div class="fourInRow" id="FIAR">
<div class="navBar"> </div>
<div class="pOne" id="ONE"> <h1>Player 1 Turn...</h1></div>
<div class="pTwo" id="TWO"><h1>Player 2 Turn...</h1> </div>
<div class="preGame"></div>
<div class = "board"></div>
</div>
</div>
<script src="buttonCheck.js"></script>
</body>
</html>
Raw
buttonCheck.js
var turn = 2;
var x;
const None='none',BLUE='blue',RED='red';
//Creating Board
const Board = new Array(7);
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 row = parseInt(id1.charAt(1))-1;
var col = 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){
document.getElementById('ONE').style.display = "block";
document.getElementById('TWO').style.display = "none";
}else{
document.getElementById('ONE').style.display = "none";
document.getElementById('TWO').style.display = "block";
}
x = checkIt(row,col);
}
function checkIt(row,col){
var checkWin;
if(Board[row][col]!=None){
var colors = Board[row][col];
if(Board[row][col]==colors){
//rows check
checkWin=0;
for(var i = 0;i<7;i++){
if(Board[i][col]!=colors){checkWin=0;}
if(Board[i][col]==colors){
checkWin++;
}
if(checkWin>=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(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 aa,bb,cc,dd,ee;
for(var i = 0;i<7;i++){
for (var j = 0;j<7;j++){
if(Board[j][i]!=None){
aa=Board[j][i];
ee = checkNow(j,i,aa);
dd = checkNowRight(j,i,aa);
}
if(dd == true){
alert("we have a winner");
return 666;
}
}
}
//alert("Diago ended");
}
function checkNow(x,y,color){
var check=0;
if (Board[x][y]==color){
//alert("first match");
for(var count=0;count<3;count++){
x++,y++;
if(Board[x][y]==color){
//alert("another match");
check++;
}
else{
count=4;
}
}
if (check==3){
if(color==BLUE){alert("BlueWon")}
if(color==RED){alert("RedWon")}
return true;
}
}
else{
return false;
}
}
function checkNowRight(x,y,color){
var checkRight=0;
if (Board[x][y]==color){
//alert(Board[x][y]);
//alert("first match");
for(var count1=0;count1<3;count1++){
if(x<6){x++;}
if(y>0){y--;}
if(Board[x][y]==color){
//alert(Board[x][y]);
//alert("another match");
checkRight++;
}
else{
count1=4;
}
}
if (checkRight==3){
if(color==BLUE){alert("BlueWon")}
if(color==RED){alert("RedWon")}
return true;
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment