Skip to content

Instantly share code, notes, and snippets.

@choopi24

choopi24/FourInRow.css

Last active May 19, 2018 16:50
Show Gist options
  • Save choopi24/46001b79246e84a1aa7e7d9aea939b2b to your computer and use it in GitHub Desktop.
Save choopi24/46001b79246e84a1aa7e7d9aea939b2b to your computer and use it in GitHub Desktop.
Download ZIP
Raw
FourInRow.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;
}
.board{
display: none;
grid-template-columns: repeat(7, 1fr);
border: 1px solid blue;
height: 100%;
grid-gap: 5px;
width: 80%;
padding: 10px 0px 0px 25px;
margin: 0 auto;
}
.buttons{
border:1px solid black;
display:block;
background-color: beige;
width: 63%;
height: 80%;
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;
}
h2{
text-align:center;
}
.scoreBoard{
display:flex;
flex-direction: column;
width:80%;
height:20%;
margin: 15px auto;
/* border:1px solid black; */
}
table{
width:30%;
margin:0 auto;
}
td{
border:1px solid black;
}
td,tr{
padding:10px;
}
input,.dbButton{
width:15%;
margin: 0 auto;
}
#dataBase{
display:none;
}
Raw
FourInRow.html
<!DOCTYPE html>
<html>
<head>
<script src="FourInRow2.js"></script>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="FourInRow.css">
<title>Four in a row Game</title>
</head>
<body onload="startDB()">
<div id="winnerBoard"></div>
<div class="container" id = "iContain">
<div class="navBar" id="navBarID">
<div class = "scoreBoard">
<input type="text" id="PlayerOne" value="1st player name">
<input type="text" id="PlayerTwo" value="2nd player name"><br>
</div>
<h2 class="navStuff">1st player, Choose your color:</h2>
<button class="navButton navStuff" id="blueButton" onclick="gameSet(2)">Blue</button>
<button class="navButton navStuff" id="redButton" onclick="gameSet(3)">Red</button>
</div>
<div class="pOne" id="ONE"><h1>Blue player turn...</h1></div>
<div class="pTwo" id="TWO"><h1>Red player turn...</h1> </div>
<div class = "board" id="gameBoard1"></div>
<div id="scoreBoardTbl">
<table id="dataBase">
<tr id="player1"></tr>
<tr id="player2"></tr>
</table>
</div>
<button class="navButton" onclick="resetGame()">Reset Game</button>
<button class="navButton" onclick="deleteDB()">delete his score</button>
<input id="playedName" type="text" value="Enter player score to be removed">
<button class="navButton" onclick="dropTable()">drop table</button>
</div>
<script src="FourInRow.js"></script>
</body>
</html>
Raw
FourInRow.js
var turn = -100;
var openData=1;
var msg;
var gameWon,col,row,colors,gameNum,redWin=0,blueWin=0,starting=0,id1;
var navigation = document.getElementsByClassName('navStuff');
var gameBoard = document.getElementById('gameBoard1');
const None='none',BLUE='blue',RED='red';
const blueTurn = document.getElementById('ONE');
const redTurn = document.getElementById('TWO');
//choose color and more....
function gameSet(num){
var check=document.getElementById('PlayerOne');
var check1=document.getElementById('PlayerTwo');
if (check.value=="1st player name" || check1.value=="2nd player name"){
return false;
}else{
varSet(num);
for (var i = 0;i<3;i++){
navigation[i].style.display="none";
}
check.style.display="none";
check1.style.display="none";
document.getElementById('dataBase').style.display="block";
turn = num;
if(turn%2==0){
blueTurn.style.display = "block";
redTurn.style.display = "none";
}else{
blueTurn.style.display = "none";
redTurn.style.display = "block";
}
gameNum=Game();
}
}
//Creating Board
//function playGame(){
//if (turn<0){alert("Choose Color");throw ''}
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(openData==1){
createTable();
showDB();
openData++;
}
gameBoard.style.display="grid";
if (gameWon==666){
return false;
}
if(starting>=1){
id1=this.id;
col = parseInt(id1.charAt(1))-1;
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";
}
gameWon = checkIt(row,col);
}
starting++;
}
function checkIt(row,col){
var checkWin=0;
if(Board[row][col]!=None){
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");blueWin++;UpdateScore("Blue");}
if(colors==RED){alert("Red Won");redWin++;UpdateScore("Red");}
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");blueWin++;UpdateScore("Blue");}
if(colors==RED){alert("Red Won");redWin++;UpdateScore("Red");}
return 666;
}
}
// 1ST DIAGONAL CHECKING
checkWin=0;
for (var i = 0;i<7;i++){
for (var j = 0;j<7;j++){
if (Board[j][i]!=None){
colors=Board[j][i];
var x=i,y=j;
for (var count=0;count<4;count++){
if (Board[x][y]!=colors){
checkWin=0;
count=4;
}
else{
checkWin++;
if(x<=6&&x>=0){x++;}
else{count=4;}
if(y<=6&&y>=0){y++;}
else{count=4;}
}
if(checkWin==4){
if(colors==BLUE){alert("Blue Won");blueWin++;UpdateScore("Blue");}
if(colors==RED){alert("Red Won");redWin++;UpdateScore("Red");}
return 666;
}
}//END OF 1ST DIAGONAL CHECKING
//START OF 2ND DIAGONAL CHECKING
x=i, y=j, checkWin=0;
for (var count=0;count<4;count++){
if (Board[x][y]!=colors){
checkWin=0;
count=4;
}
else{
checkWin++;
if(x<=6&&x>=0){x++;}
else{count=4;}
if(y<=6&&y>=0){y--;}
else{count=4;}
}
if(checkWin==4){
if(colors==BLUE){alert("Blue Won");blueWin++;UpdateScore("Blue");}
if(colors==RED){alert("Red Won");redWin++;UpdateScore("Red");}
return 666;
}
}//END OF 2ND DIAGONAL CHECKING
//START OF 3RD DIAGONAL CHEKING
x=i, y=j, checkWin=0;
for (var count=0;count<4;count++){
if (Board[x][y]!=colors){
checkWin=0;
count=4;
}
else{
checkWin++;
if(x<=6&&x>=0){x--;}
else{count=4;}
if(y<=6&&y>=0){y++;}
else{count=4;}
}
if(checkWin==4){
if(colors==BLUE){alert("Blue Won");blueWin++;UpdateScore("Blue");}
if(colors==RED){alert("Red Won");redWin++;UpdateScore("Red");}
return 666;
}
}
//END OF 3RD DIAGONAL CHEKING
//START OF 4TH DIAGONAL CHECKING
x=i, y=j, checkWin=0;
for (var count=0;count<4;count++){
if (Board[x][y]!=colors){
checkWin=0;
count=4;
}
else{
checkWin++;
if(x<=6&&x>=0){x--;}
else{count=4;}
if(y<=6&&y>=0){y--;}
else{count=4;}
}
if(checkWin==4){
if(colors==BLUE){alert("Blue Won");blueWin++;UpdateScore("Blue");}
if(colors==RED){alert("Red Won");redWin++;UpdateScore("Red");}
return 666;
}
}
//END OF 4TH DIAGONAL CHECKING
}
}
}
}
}
}
function resetGame(){
for(var i=0;i<7;i++){
for (var j = 0;j<7;j++){
console.log(Board[i][j]);
Board[i][j]=None;
console.log(Board[i][j]);
}
}
var allButtons = document.getElementsByClassName('buttons');
var len = allButtons.length-1;
for (var i = 0 ;i<len;i++){
allButtons[i].className="buttons";
}
gameWon=55;
}
//dataManagement
function deleteDB(){
var onePlayer=document.getElementById('PlayerOne').value;
var player = document.getElementById('playedName').value;
console.log(player);
console.log(onePlayer);
db.transaction(function (tx) {
tx.executeSql('Delete from jackles where playerName = ?', [player]);
if(player==onePlayer){
var chosenCandidate = document.getElementById('playerOneName');
chosenCandidate.innerHTML="<p><b> deleted </b></p>";
document.getElementById('playerOneScore').innerHTML="<p><b> 0 </b></p>";
}
else{
var chosenCandidate = document.getElementById('playerTwoName');
chosenCandidate.innerHTML="<p><b> deleted </b></p>";
document.getElementById('playerTwoScore').innerHTML="<p><b> 0 </b></p>";
}
})
}
function dropTable(){
db.transaction(function(tx){
tx.executeSql('drop table jackles');
});
}
Raw
FourInRow2.js
//Database Management
var db,msg,players1,players2,score1=0,score2=0,mycolor;
var advance1 = 1,advance2=1,advance3=1;
var firstplayer;
function varSet(number){
if(number==2){
mycolor="Blue";
firstplayer="Blue";
}
if(number==3){
mycolor="Red";
firstplayer="Red";
}
}
function startDB()
{
try {
var shortName = 'dataBase';
var version = '1.0';
var displayName = 'Product Database';
var maxSize = 65536; // in bytes
db = openDatabase(shortName, version, displayName, maxSize);
} catch(e)
{
// Error handling
alert("Error creating the database");
}
}
function createTable()
{
db.transaction(function (tx,) {
// tx.executeSql('DROP TABLE jackles')
tx.executeSql('CREATE TABLE IF NOT EXISTS jackles (playerName unique,score integer, color unique)');
players1=document.getElementById("PlayerOne").value;
players2=document.getElementById('PlayerTwo').value;
tx.executeSql('INSERT INTO jackles (playerName, score,color) VALUES (?, ?,?)',[players1, score1,mycolor]);
if(mycolor=="Blue"){mycolor="Red";}
else{mycolor="Blue";}
tx.executeSql('INSERT INTO jackles (playerName, score,color) VALUES (?, ?,?)',[players2,score2,mycolor]);
});
}
function showDB()
{
db.transaction(function (tx) {
tx.executeSql('SELECT * FROM jackles ', [], function (tx, results) {
var data;
for (var i =0;i<results.rows.length;i++){
data = "<td id='playerOneName'><p><b>" + results.rows.item(i).playerName + "</b></p></td>";
document.getElementById('player1').innerHTML+=data;
data = "<td><p><b>" + results.rows.item(i).color + "</b></p></td>";
document.getElementById('player1').innerHTML+=data;
data= "<td id='playerOneScore'><p><b>" + results.rows.item(i).score + "</b></p></td>";
document.getElementById('player1').innerHTML+=data;
i++;
data = "<td id='playerTwoName'><p><b>" + results.rows.item(i).playerName + "</b></p></td>";
document.getElementById('player2').innerHTML+=data;
data = "<td><p><b>" + results.rows.item(i).color + "</b></p></td>";
document.getElementById('player2').innerHTML+=data;
data = "<td id='playerTwoScore'><p><b>" + results.rows.item(i).score + "</b></p></td>";
document.getElementById('player2').innerHTML+=data;
}
}, null);
});
}
function UpdateScore(winner)
{
db.transaction(function (tx) {
tx.executeSql('update jackles set score = ?where color= ?', [advance3,winner]);
advance3;
if (winner==firstplayer){
document.getElementById('playerOneScore').innerHTML="<p><b>" + advance1 + "</b></p>";
advance1++;
}
else{
document.getElementById('playerTwoScore').innerHTML="<p><b>" + advance2 + "</b></p>";
advance2++;
}
})
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment