Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

2 player Game added #403

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

2 player Game added #403

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
89 changes: 89 additions & 0 deletions ConnectFourGame/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,89 @@
<!DOCTYPE html>
<html>

<head>
<meta charset="utf8">
<title>Connect Four Game</title>
<link rel="stylesheet" , href="style.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.4.1.js"
integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU=" crossorigin="anonymous"></script>
</head>

<body>
<div id="tsparticles"></div>
<div class="container" align='center'>
<h1>Connect Four Game!<br>
<span style="font-size: 0.4em;">BY HIMANSHU KUMAR AMB</span>
</h1>

<h2></h2>
<h3></h3>
<table class="board">
<tr>
<td><button type="button"></button></td>
<td><button type="button"></button></td>
<td><button type="button"></button></td>
<td><button type="button"></button></td>
<td><button type="button"></button></td>
<td><button type="button"></button></td>
<td><button type="button"></button></td>
</tr>

<tr>
<td><button type="button"></button></td>
<td><button type="button"></button></td>
<td><button type="button"></button></td>
<td><button type="button"></button></td>
<td><button type="button"></button></td>
<td><button type="button"></button></td>
<td><button type="button"></button></td>
</tr>

<tr>
<td><button type="button"></button></td>
<td><button type="button"></button></td>
<td><button type="button"></button></td>
<td><button type="button"></button></td>
<td><button type="button"></button></td>
<td><button type="button"></button></td>
<td><button type="button"></button></td>
</tr>

<tr>
<td><button type="button"></button></td>
<td><button type="button"></button></td>
<td><button type="button"></button></td>
<td><button type="button"></button></td>
<td><button type="button"></button></td>
<td><button type="button"></button></td>
<td><button type="button"></button></td>
</tr>

<tr>
<td><button type="button"></button></td>
<td><button type="button"></button></td>
<td><button type="button"></button></td>
<td><button type="button"></button></td>
<td><button type="button"></button></td>
<td><button type="button"></button></td>
<td><button type="button"></button></td>
</tr>

<tr>
<td><button type="button"></button></td>
<td><button type="button"></button></td>
<td><button type="button"></button></td>
<td><button type="button"></button></td>
<td><button type="button"></button></td>
<td><button type="button"></button></td>
<td><button type="button"></button></td>
</tr>
</table>
</div>
<script src="https://cdn.jsdelivr.net/npm/tsparticles"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery-particles"></script>
<script src="script.js"></script>
</body>

</html>
194 changes: 194 additions & 0 deletions ConnectFourGame/script.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,194 @@
var player1 = prompt("Player One: Enter Your Name , You will be Blue");
console.log("Player One is :- " + player1)
var player1Color = 'rgb(86, 151, 255)';
var player2 = prompt("Player Two: Enter Your Name , You will be Red");
console.log("Player Two is :- " + player2)
var player2Color = 'rgb(237, 45, 73)';
var game_on = true;
var table = $('table tr');

function reportwin(rowNum, colNum) {
console.log(currentName + " You won starting at this row,col :- (" + (rowNum + 1) + "," + (colNum + 1) + ")");

}

function changeColor(rowIndex, colIndex, color) {
return table.eq(rowIndex).find('td').eq(colIndex).find('button').css('background-color', color);
}

function returnColor(rowIndex, colIndex) {
return table.eq(rowIndex).find('td').eq(colIndex).find('button').css('background-color');
}
function checkBottom(colIndex) {
var colorReport = returnColor(5, colIndex)
for (var row = 5; row > -1; row--) {
colorReport = returnColor(row, colIndex);
if (colorReport === 'rgb(128, 128, 128)') {
return row
}
}
}
function colorMatchCheck(one, two, three, four) {
return (one === two && one === three && one === four && one !== 'rgb(128, 128, 128)' && one !== undefined)
}
function horizontalWinCheck() {
for (var row = 0; row < 6; row++) {
for (var col = 0; col < 4; col++) {
if (colorMatchCheck(returnColor(row, col), returnColor(row, col + 1), returnColor(row, col + 2), returnColor(row, col + 3))) {
console.log('Horizontal Win');
reportwin(row, col);
return true;
} else {
continue;
}
}
}
}
function verticalWinCheck() {
for (var col = 0; col < 7; col++) {
for (var row = 0; row < 3; row++) {
if (colorMatchCheck(returnColor(row, col), returnColor(row + 1, col), returnColor(row + 2, col), returnColor(row + 3, col))) {
console.log('Vertical Win');
reportwin(row, col);
return true;
} else {
continue;
}
}
}
}
function diagonalWinCheck() {
for (var col = 0; col < 5; col++) {
for (var row = 0; row < 7; row++) {
if (colorMatchCheck(returnColor(row, col), returnColor(row + 1, col + 1), returnColor(row + 2, col + 2), returnColor(row + 3, col + 3))) {
console.log('Diagonal Win');
reportwin(row, col);
return true;
} else if (colorMatchCheck(returnColor(row, col), returnColor(row - 1, col + 1), returnColor(row - 2, col + 2), returnColor(row - 3, col + 3))) {

reportwin(row, col);
return true;
} else {
continue;
}
}
}
}
var currentPlayer = 1;
var currentName = player1;
var currentColor = player1Color;

$('h3').text(player1 + " it is your turn, pick a column to drop in!")

$('.board button').on('click', function () {
var col = $(this).closest('td').index();
var bottomAvail = checkBottom(col);
changeColor(bottomAvail, col, currentColor);
if (horizontalWinCheck() || verticalWinCheck() || diagonalWinCheck()) {
$('h1').text(currentName + " You have Won!")
$("h2").text("Refresh to play again")
$('h3').fadeOut(20);
$('.container').fadeOut(3000);
console.log(currentName + " You have Won!")
game_on = false;
}
currentPlayer = currentPlayer * -1;
if (currentPlayer === 1) {
currentName = player1;
$('h3').text(currentName + " it is your turn, pick a column to drop in!")
currentColor = player1Color;
} else {
currentName = player2;
$('h3').text(currentName + " it is your turn, pick a column to drop in!")
currentColor = player2Color;
}
if (game_on === false) {
$('h3').text("Refresh the page to Play Again!")
}
})



$("#tsparticles")
.particles()
.init(
{
background: {
color: {
value: "#171717",
},
},
fpsLimit: 60,
interactivity: {
detectsOn: "canvas",
events: {
onClick: {
enable: true,
mode: "push",
},
onHover: {
enable: true,
mode: "repulse",
},
resize: true,
},
modes: {
bubble: {
distance: 400,
duration: 2,
opacity: 0.8,
size: 40,
},
push: {
quantity: 4,
},
repulse: {
distance: 200,
duration: 0.4,
},
},
},
particles: {
color: {
value: "#ffffff",
},
links: {
color: "#ffffff",
distance: 150,
enable: true,
opacity: 0.5,
width: 1,
},
collisions: {
enable: true,
},
move: {
direction: "none",
enable: true,
outMode: "bounce",
random: false,
speed: 6,
straight: false,
},
number: {
density: {
enable: true,
value_area: 800,
},
value: 80,
},
opacity: {
value: 0.5,
},
shape: {
type: "circle",
},
size: {
random: true,
value: 7,
},
},
detectRetina: true,
},

);
35 changes: 35 additions & 0 deletions ConnectFourGame/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,35 @@
.container{
position: relative;
top: 0px;
left: 0px;
width: 100%;
color: white;

}
#tsparticles{
position: absolute;
left: 0px ;
top: 0px;
width: 100%;
height: 100vh;
z-index: -1;
}
.board button{
width:90px;
height:90px;
background-color: gray;
margin: 1px;
border: 4px solid black;
border-radius: 50%;
}
.board{
transition: 0.8s;
box-shadow: 0px 0px 10px rgb(255, 255, 255);
}
.board:hover{
box-shadow: 0px 0px 40px rgb(13, 255, 73);
}
p{
text-align: right;
font-size: 2em;
}