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.
  • - +
    + +
    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