diff --git a/index.html b/index.html
index 227f0d4..3d4def5 100644
--- a/index.html
+++ b/index.html
@@ -27,13 +27,16 @@
Conway's Game of Life
Any dead cell with exactly three live neighbors becomes a
live cell (reproduction)
-
+
- Click on the canvas to select initial live cells, then press 'Start' to watch the patterns evolve according to the rules.
+ Click on the canvas to select initial live cells, then press
+ 'Start' to watch the patterns evolve according to the rules.
-
+
+
+
Start
Stop
diff --git a/script.js b/script.js
index bbec6fd..850a40b 100644
--- a/script.js
+++ b/script.js
@@ -2,6 +2,8 @@
const canvas = document.getElementById('gameCanvas');
canvas.addEventListener('click', handleCanvasClick);
const ctx = canvas.getContext('2d');
+canvas.width = 800;
+canvas.height = 600;
const cellSize = 10;
const rows = canvas.height / cellSize;
const cols = canvas.width / cellSize;
@@ -39,13 +41,12 @@ document.getElementById('startBtn').addEventListener('click', () => {
function animate() {
setTimeout(() => {
-
updateGame();
drawGrid();
if (isAnimating) {
animationId = requestAnimationFrame(animate);
}
- }, 100)
+ }, 100);
}
animate();
console.log('start');
diff --git a/style.css b/style.css
index db29264..3de22c5 100644
--- a/style.css
+++ b/style.css
@@ -1,6 +1,13 @@
+html {
+ box-sizing: border-box;
+}
+
* {
margin: 0;
padding: 0;
+ box-sizing: inherit;
+ font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+ font-weight: normal;
}
body {
@@ -8,12 +15,43 @@ body {
display: flex;
flex-direction: column;
align-items: center;
- margin-top: 50px;
+ margin-top: 10px;
+ padding: 20px;
+}
+
+h1 {
+ font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+ text-align: center;
+ font-weight: bolder;
+ text-transform: capitalize;
+}
+
+.container {
+ display: flex;
+ justify-content: center;
+ align-items: flex-start;
+ position: relative;
}
canvas {
border: 1px solid black;
+ margin: 10px;
+}
+@media (max-width: 768px) {
+ #gameCanvas {
+ width: 400px;
+ max-width: 98%;
+ height: auto;
+ }
+}
+
+@media (max-width: 768px) {
+ button {
+ padding: 15px 25px;
+ font-size: 18px;
+ margin-bottom: 15px;
+ }
}
.controls {
@@ -35,6 +73,7 @@ button {
list-style-type: none;
line-height: 1.2;
}
+
#howTo {
margin-bottom: 20;
}
\ No newline at end of file