Skip to content

Commit 9b187b9

Browse files
leoncoolmoonleoncoolmoon
committed
improve stability
1 parent 0837523 commit 9b187b9

File tree

3 files changed

+70
-33
lines changed

3 files changed

+70
-33
lines changed

‎15-Connect-Four-Game/index.html

Lines changed: 38 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,20 @@
11
<!DOCTYPE html>
22
<html lang="en">
3+
34
<head>
45
<meta charset="UTF-8">
56
<meta name="viewport" content="width=device-width, initial-scale=1.0">
67
<title>Connect Four</title>
7-
8+
89
<!-- 👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻-->
910
<!-- Also uploaded the demo of this code in a gif : https://c.tenor.com/x8v1oNUOmg4AAAAd/tenor.gif-->
1011
<!-- 👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻-->
1112

1213
<!-- 👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻-->
13-
<!-- More html-css-js Games Calculators Games Cards Elements Projects on https://www.github.com/he-is-talha -->
14+
<!-- More html-css-js Games Calculators Games Cards Elements Projects on https://www.github.com/he-is-talha -->
1415
<!-- 👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻-->
1516

16-
<link rel="icon" href="https://leoncoolmoon.github.io/icon.png">
17+
<link rel="icon" href="https://leoncoolmoon.github.io/icon.png">
1718

1819
<!-- Google Fonts -->
1920
<link rel="preconnect" href="https://fonts.gstatic.com">
@@ -23,22 +24,42 @@
2324
<link rel="stylesheet" href="style.css">
2425

2526
</head>
27+
2628
<body>
2729
<div id="grid-config">
28-
<div class="input-group">
29-
<label for="grid-width">Columns:</label>
30-
<input type="number" id="grid-width" min="3" max="20" value="10">
31-
</div>
32-
<div class="input-group">
33-
<label for="grid-height">Rows:</label>
34-
<input type="number" id="grid-height" min="3" max="20" value="10">
35-
</div>
36-
<div class="input-group">
37-
<label for="win-condition">Win Condition:</label>
38-
<input type="number" id="win-condition" min="3" max="8" value="5">
39-
</div>
30+
<fieldset>
31+
<legend>Game Settings:</legend>
32+
<div class="input-group">
33+
<label for="grid-width">Columns:</label>
34+
<input type="number" id="grid-width" min="3" max="20" value="10">
35+
</div>
36+
<div class="input-group">
37+
<label for="grid-height">Rows:</label>
38+
<input type="number" id="grid-height" min="3" max="20" value="10">
39+
</div>
40+
<div class="input-group">
41+
<label for="win-condition">Win Condition:</label>
42+
<input type="number" id="win-condition" min="3" max="8" value="5">
43+
</div>
44+
</fieldset>
45+
<fieldset>
46+
<legend>Player Settings:</legend>
47+
<div>
48+
<input type="radio" id="hvh" name="player" value="0" />
49+
<label for="hvh">human vs. human</label>
50+
</div>
51+
<div>
52+
<input type="radio" id="hvc" name="player" value="1" checked />
53+
<label for="hvc">human vs. computer</label>
54+
</div>
55+
<div>
56+
<input type="radio" id="cvh" name="player" value="2" />
57+
<label for="cvh">computer vs. human</label>
58+
</div>
59+
60+
</fieldset>
4061
<button id="update-grid">OK</button>
41-
</div>
62+
</div>
4263
<div id="main-container">
4364
<div id="player">
4465
<h1 id="player-type">Player - 1</h1>
@@ -50,4 +71,5 @@ <h1 id="player-type">Player - 1</h1>
5071
<script src="script.js"></script>
5172

5273
</body>
74+
5375
</html>

‎15-Connect-Four-Game/script.js

Lines changed: 16 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ var updateGridBTN = document.getElementById("update-grid");
77
var widthInput = document.getElementById("grid-width");
88
var heightInput = document.getElementById("grid-height");
99
var winConditionInput = document.getElementById("win-condition");
10-
10+
var player = 1;
1111
// Game Flow Variables
1212

1313
var columns = 10;
@@ -27,6 +27,7 @@ function initGame(column, row, winCounts) {
2727
countMove = 0;
2828
lastMove = [];
2929
buttons = document.getElementsByClassName("btn");
30+
player = document.querySelector('input[name="player"]:checked').value;
3031
for (var i = 0; i < buttons.length; i++) {
3132
// Handing the Event when button was clicked
3233
buttons[i].addEventListener("click", function () {
@@ -84,6 +85,7 @@ function updateGrid() {
8485

8586

8687
document.getElementById("grid-config").style.display = "none";
88+
pcStart();
8789
}
8890

8991
// Event Listener for Buttons
@@ -121,8 +123,7 @@ function makeMove(button, buttonNo) {
121123
// Update the player
122124
playerNumber = 2;
123125
playerType.textContent = "Player - 2";
124-
//getBestMove(filledGrid,winCount,playerNumber);
125-
PCMove();
126+
if(player == 1){PCMove();}
126127
} else {
127128
button.classList.add("btn-player-2");
128129
filledGrid[row][col] = 2;
@@ -137,6 +138,7 @@ function makeMove(button, buttonNo) {
137138
// Update the player
138139
playerNumber = 1;
139140
playerType.textContent = "Player - 1";
141+
if(player == 2){PCMove();}
140142
}
141143

142144
// If all the cells has been filled
@@ -156,7 +158,7 @@ function makeMove(button, buttonNo) {
156158

157159
}
158160
function colorButton(points) {
159-
var i = [];
161+
/* var i = [];
160162
points.forEach(function (point) {
161163
i.push([toBtNo(point[0], point[1] - 1), point[2]]);
162164
})
@@ -173,7 +175,7 @@ function colorButton(points) {
173175
buttons[j].innerHTML = "";
174176
buttons[j].style.color = "transparent";
175177
}
176-
}
178+
}*/
177179

178180
}
179181
var winMethod = 0;
@@ -308,7 +310,16 @@ function resetBoard() {
308310
filledGrid[i][j] = -1;
309311
}
310312
}
313+
pcStart();
314+
}
311315

316+
function pcStart() {
317+
if(player == 2){
318+
var r = Math.floor( rows/2);
319+
var c = Math.floor( columns/2);
320+
var i = toBtNo(r, c);
321+
makeMove(buttons[i], i);
322+
}
312323
}
313324

314325
function PCMove() {

‎15-Connect-Four-Game/style.css

Lines changed: 16 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,11 @@ body {
2121
width: 80%;
2222
max-width: 550px;
2323
}
24-
24+
fieldset {
25+
height: 40vh;
26+
border:#3f2fd0 2px solid;
27+
box-shadow: 2px 3px 7px grey;
28+
}
2529
#player-type {
2630
color: #4f3ff0;
2731
font-family: "Poppins", sans-serif;
@@ -31,17 +35,17 @@ body {
3135
}
3236
#grid-config {
3337
background-color: #d5deff;
34-
border: 3px solid #4f3ff0;
35-
border-radius: 8px;
36-
padding: 20px;
37-
margin-top: 20px;
38-
display: flex;
39-
justify-content: space-between;
40-
align-items: center;
41-
flex-wrap: wrap;
42-
width: 80%;
43-
max-width: 550px;
44-
position: absolute;
38+
border: 3px solid #4f3ff0;
39+
border-radius: 8px;
40+
padding: 20px;
41+
margin-top: 20px;
42+
display: flex;
43+
justify-content: space-between;
44+
flex-wrap: wrap;
45+
width: 80%;
46+
max-width: 550px;
47+
position: absolute;
48+
align-items: flex-end;
4549
}
4650
.input-group {
4751
display: flex;

0 commit comments

Comments
 (0)