From e9f4ebbed7546487cee9b37174919e1b63707e15 Mon Sep 17 00:00:00 2001 From: rfamilara Date: Thu, 15 Oct 2020 22:26:58 -0500 Subject: [PATCH 01/11] Completed button.js code for buttons --- objectives/rules-game-life/src/button.js | 90 ++++++++++++++++++++++++ 1 file changed, 90 insertions(+) create mode 100644 objectives/rules-game-life/src/button.js diff --git a/objectives/rules-game-life/src/button.js b/objectives/rules-game-life/src/button.js new file mode 100644 index 000000000..a5c1386a8 --- /dev/null +++ b/objectives/rules-game-life/src/button.js @@ -0,0 +1,90 @@ +function resetGen(){ + counter = 0 + gen.innerHTML = 'Generation: 0' +} +function randomize(){ + resetGen(); + for(i = 0; i < height; i++){ + for(j = 0; j < width; j++){ + canvasArr[i][j] = 0 + item = document.getElementById(`r${i}c${j}`) + item.classList.remove('on') + if(Math.random() > .6 ){ + canvasArr[i][j] = 1 + item.classList.add('on') + } + } + } +} + +function togglePlay(){ + let button = document.querySelector('#play') + running = !running + if(running){ + button.innerHTML = 'Pause' + timer = setInterval(()=>{sim()},speed) + }else{ + clearInterval(timer) + button.innerHTML = 'Play' + } +} + + +function lowerSpeed(){ + var tracker = document.getElementById('speedTracker') + if(speed < 2000){ + speed += 10 + tracker.innerHTML = `speed: ${speed}ms` + } +} + +function increaseSpeed(){ + var tracker = document.getElementById('speedTracker') + if(speed > 10){ + speed -= 10 + tracker.innerHTML = `speed: ${speed}ms` + } +} + + +function next(){ + running = true + sim() + running = !running +} + +function clearBoard(){ + resetGen() + starty = 0 + startx = 0 + if(running){ + togglePlay() + } + for(y = 0; y < height; y++){ + for(x = 0; x < width; x++){ + let item = document.getElementById(`r${y}c${x}`) + canvasArr[y][x] = 0 + item.classList.remove('on') + } + } +} + +function increment(dir, amount){ + if(dir ==='x'){ + var x = document.getElementById('xwidth') + if (width < 120 && amount > 0){ + width += amount + }else if(width > 10 && amount < 0){ + width += amount + } + x.innerHTML = `Width: ${width}` + }else{ + var y = document.getElementById('yheight') + if (height < 120 && amount > 0){ + height += amount + }else if(height > 10 && amount < 0){ + height += amount + } + y.innerHTML = `Height: ${height}` + } + reinitialize() \ No newline at end of file From 9eaf3fb61afc232f457eca34869839598091e09e Mon Sep 17 00:00:00 2001 From: rfamilara Date: Mon, 19 Oct 2020 21:58:08 -0500 Subject: [PATCH 02/11] Began coding variables for index.js --- objectives/rules-game-life/src/index.css | 88 +++++++++++++++++++++++ objectives/rules-game-life/src/index.html | 74 +++++++++++++++++++ objectives/rules-game-life/src/index.js | 7 ++ 3 files changed, 169 insertions(+) create mode 100644 objectives/rules-game-life/src/index.css create mode 100644 objectives/rules-game-life/src/index.html create mode 100644 objectives/rules-game-life/src/index.js diff --git a/objectives/rules-game-life/src/index.css b/objectives/rules-game-life/src/index.css new file mode 100644 index 000000000..1ede3e0ce --- /dev/null +++ b/objectives/rules-game-life/src/index.css @@ -0,0 +1,88 @@ +body { + background:rgb(22, 27, 31); + width: 80%; + margin: 0 auto; + +} +.instructions{ + margin-left: 20%; + margin-bottom: 5%; + margin-top: 5% ; +} +#canvas { + box-sizing: border-box; + margin: 0 auto; +} +#counter{ + font-size: large; + color: yellow; + margin-left: 44%; + margin-bottom: 2%; +} +td { + width: 9px; + height: 9px; + border: 1px solid rgb(43, 43, 43); +} + +.Title{ + color:yellow; + margin-left: 30%; +} + +.on { + background:black; + border: 1px solid rgb(255, 30, 0); +} + + +button { + font-weight: 700; + color: seashell; + background: rgb(109, 125, 138); + padding: 5px; + border: 1px solid white; + border-radius: 3px; +} + +p,h1,h2,h3{ + color: white; + margin: 3px; +} + +.main-controls { + display: flex; + width: 100%; + justify-content: center; +} + +.main-controls button{ + margin: 5px; + width: 150px; + margin-top: 2%; +} + +.secondary-controls { + display: flex; + flex-direction: column; + align-items: center; +} +.secondary-controls button { + width: 150px; + margin-bottom: 3%; +} +.control-box { + width: 80%; + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; +} + +.control-box p,.control-box h2{ + width: 100%; + text-align: center; +} +.other-button{ + background:rgb(109, 125, 138); +} \ No newline at end of file diff --git a/objectives/rules-game-life/src/index.html b/objectives/rules-game-life/src/index.html new file mode 100644 index 000000000..f1e7dba05 --- /dev/null +++ b/objectives/rules-game-life/src/index.html @@ -0,0 +1,74 @@ + + + +The Game of Life + + + + +

Conway's Game of Life

+
+

Rules:

+

If the cell is alive and has 2 or 3 neighbors, then it remains + alive. Else it dies.

+

If the cell is dead and has exactly 3 neighbors, then it comes to + life. Else if remains dead.

+
+

Generation: 0

+ + +
+ + + + +
+ + + + + + +
+ +
+ +
+

Shapes

+ + + +
+
+

Width: 50

+ + +
+
+

Height: 50

+ + +
+ + + + + +
+ +
+
+ + + + + + + + + \ No newline at end of file diff --git a/objectives/rules-game-life/src/index.js b/objectives/rules-game-life/src/index.js new file mode 100644 index 000000000..34fb28d90 --- /dev/null +++ b/objectives/rules-game-life/src/index.js @@ -0,0 +1,7 @@ +var width = 30; +var height = 30; +var canvasArr = []; +var speed = 150; +var running = false; +var count = 0 +var gen = document.getElementById('counter') From a4cc49036bb4e5aed65898aad2b21e563949f151 Mon Sep 17 00:00:00 2001 From: rfamilara Date: Mon, 19 Oct 2020 22:21:29 -0500 Subject: [PATCH 03/11] Create code for fuction handle click -function handleCellClick --- objectives/rules-game-life/src/index.js | 17 +++++++++++++++++ 1 file changed, 17 insertions(+) diff --git a/objectives/rules-game-life/src/index.js b/objectives/rules-game-life/src/index.js index 34fb28d90..4b3426975 100644 --- a/objectives/rules-game-life/src/index.js +++ b/objectives/rules-game-life/src/index.js @@ -5,3 +5,20 @@ var speed = 150; var running = false; var count = 0 var gen = document.getElementById('counter') + +function handleCellClick(e){ + if (!running){ + var pos = e.target.id.split('r') + pos = pos[1].split('c') + pos[0] = parseInt(pos[0]) + pos[1] = parseInt(pos[1]) + if(canvasArr[pos[0]][pos[1]] === 0){ + canvasArr[pos[0]][pos[1]] = 1 + }else{ + canvasArr[pos[0]][pos[1]] = 0 + } + + var cell = e.target + cell.classList.toggle('on') + } +} \ No newline at end of file From 151a594cfd1ce069212d59eeff31a1671bd671de Mon Sep 17 00:00:00 2001 From: rfamilara Date: Mon, 19 Oct 2020 22:26:27 -0500 Subject: [PATCH 04/11] Created getElementByID --- objectives/rules-game-life/src/index.js | 18 +++++++++++++++++- 1 file changed, 17 insertions(+), 1 deletion(-) diff --git a/objectives/rules-game-life/src/index.js b/objectives/rules-game-life/src/index.js index 4b3426975..230e657d5 100644 --- a/objectives/rules-game-life/src/index.js +++ b/objectives/rules-game-life/src/index.js @@ -21,4 +21,20 @@ function handleCellClick(e){ var cell = e.target cell.classList.toggle('on') } -} \ No newline at end of file +} +var canvas = document.getElementById('canvas') +function initialize(){ + for(i = 0; i < height; i++){ + canvasArr.push([]) + var row = document.createElement('tr'); + for(j = 0; j < width; j++){ + canvasArr[i].push(0) + var cell = document.createElement('td') + cell.id = `r${i}c${j}` + cell.addEventListener('click', handleCellClick) + row.appendChild(cell) + } + canvas.appendChild(row) + } +} +initialize() \ No newline at end of file From 8b430bcd23a97087474a73ee7b3608648aaeb78f Mon Sep 17 00:00:00 2001 From: rfamilara Date: Mon, 19 Oct 2020 22:31:22 -0500 Subject: [PATCH 05/11] Created a reinitialize function --- objectives/rules-game-life/src/index.js | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/objectives/rules-game-life/src/index.js b/objectives/rules-game-life/src/index.js index 230e657d5..1fb47f5fa 100644 --- a/objectives/rules-game-life/src/index.js +++ b/objectives/rules-game-life/src/index.js @@ -37,4 +37,11 @@ function initialize(){ canvas.appendChild(row) } } -initialize() \ No newline at end of file +initialize() + +function reinitialize(){ + while(canvas.firstChild){ + canvas.removeChild(canvas.firstChild) + } + initialize() +} From d1fd4d84bf38e29c9dd869a9c16b9f1e3284c179 Mon Sep 17 00:00:00 2001 From: rfamilara Date: Tue, 20 Oct 2020 22:12:18 -0500 Subject: [PATCH 06/11] Started check alive function using arrays --- objectives/rules-game-life/src/index.js | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/objectives/rules-game-life/src/index.js b/objectives/rules-game-life/src/index.js index 1fb47f5fa..070d2702b 100644 --- a/objectives/rules-game-life/src/index.js +++ b/objectives/rules-game-life/src/index.js @@ -45,3 +45,11 @@ function reinitialize(){ } initialize() } +function checkAlive(x,y,arr){ + var count = 0 + if(x > 0 && y > 0 && canvasArr[y-1][x-1] === 1){ + count++ + } + if(y > 0&& canvasArr[y-1][x] === 1){ + count++ + } \ No newline at end of file From 2770d7819cdfc7d7d82096c5a5696e8e72ede15b Mon Sep 17 00:00:00 2001 From: rfamilara Date: Thu, 22 Oct 2020 22:58:09 -0500 Subject: [PATCH 07/11] Completed function check alive array --- objectives/rules-game-life/src/index.js | 38 ++++++++++++++++++++++++- 1 file changed, 37 insertions(+), 1 deletion(-) diff --git a/objectives/rules-game-life/src/index.js b/objectives/rules-game-life/src/index.js index 070d2702b..2d50ab55b 100644 --- a/objectives/rules-game-life/src/index.js +++ b/objectives/rules-game-life/src/index.js @@ -52,4 +52,40 @@ function checkAlive(x,y,arr){ } if(y > 0&& canvasArr[y-1][x] === 1){ count++ - } \ No newline at end of file + } + if(y > 0 && x < width-1 !== null && canvasArr[y-1][x+1] === 1){ + count++ + } + if(x > 0 && canvasArr[y][x-1] === 1){ + count++ + } + if(x < width-1 && canvasArr[y][x+1] === 1){ + count++ + } + if(y< height-1 && x > 0 !== null && canvasArr[y+1][x-1] === 1){ + count++ + } + if(y < height-1 && arr[y+1][x] === 1){ + count++ + } + if(y < height-1 && x < width-1 && canvasArr[y+1][x+1] === 1){ + count++ + } + if(count < 2 || count > 3){ + if(arr[y][x] === 1){ + arr[y][x] = 0 + } + return {alive:false, data: arr} + }else{ + if(canvasArr[y][x] < 1 && count == 3){ + arr[y][x] = 1 + return {alive: true, data: arr, counter: count} + }else if(canvasArr[y][x] == 0 && count !== 3){ + return {alive: false, data: arr, counter: count} + }else{ + return {alive: true, data: arr, counter: count} + } + + } + +} From e19be8c23e77b54ae10ca087b859f5f1c028f313 Mon Sep 17 00:00:00 2001 From: rfamilara Date: Sun, 25 Oct 2020 17:29:54 -0500 Subject: [PATCH 08/11] Created code for shapes.js --- objectives/rules-game-life/src/shapes.js | 94 ++++++++++++++++++++++++ 1 file changed, 94 insertions(+) create mode 100644 objectives/rules-game-life/src/shapes.js diff --git a/objectives/rules-game-life/src/shapes.js b/objectives/rules-game-life/src/shapes.js new file mode 100644 index 000000000..a18fddfb2 --- /dev/null +++ b/objectives/rules-game-life/src/shapes.js @@ -0,0 +1,94 @@ +var startx = 0 +var starty = 0 + + +function beacon(){ + var arr = [[1,1,0,0], + [1,1,0,0], + [0,0,1,1], + [0,0,1,1]] + for(y = 0, i = starty; y < arr.length; y++, i++){ + for(x = 0, j=startx; x < arr[y].length; x++, j++){ + if(arr[y][x] === 1){ + canvasArr[i][j] = 1 + let cell = document.getElementById(`r${i}c${j}`) + cell.classList.add('on') + } + } + } + if(startx < canvasArr[0].length - 5){ + startx += 5 + starty += 0 + }else if(starty < canvasArr[0].length - 5){ + startx = 0 + starty += 5 + }else{ + startx = 0 + starty = 0 + } +} + +function blinker(){ + var arr = + [[0,1,0], + [1,1,1], + [0,1,0]] + for(y = 0, i = starty; y < arr.length; y++, i++){ + for(x = 0, j=startx; x < arr[y].length; x++, j++){ + if(arr[y][x] === 1){ + canvasArr[i][j] = 1 + let cell = document.getElementById(`r${i}c${j}`) + cell.classList.add('on') + } + } + } + if(startx < canvasArr[0].length - 5){ + startx += 4 + starty += 0 + }else if(starty < canvasArr[0].length - 5){ + startx = 0 + starty += 4 + }else{ + startx = 0 + starty = 0 + } +} + +function hammerHead(){ + + var arr = + [[1,1,1,1,1,0,0,0,0,0,0,0,1,1,0,0,0,0], + [1,0,0,0,0,1,0,0,0,0,0,1,1,0,1,1,1,0], + [1,0,0,0,0,0,0,0,0,0,1,1,0,1,1,1,1,0], + [0,1,0,0,0,0,0,1,1,0,1,1,0,0,1,1,0,0], + [0,0,0,1,1,0,0,0,0,1,0,0,1,0,0,0,0,0], + [0,0,0,0,0,1,0,1,0,1,0,1,0,0,0,0,0,0], + [0,0,0,0,0,0,1,0,0,0,0,0,0,0,0,0,0,0], + [0,0,0,0,0,0,1,0,0,0,0,0,0,0,0,0,0,0], + [0,0,0,0,0,1,0,1,0,1,0,1,0,0,0,0,0,0], + [0,0,0,1,1,0,0,0,0,1,0,0,1,0,0,0,0,0], + [0,1,0,0,0,0,0,1,1,0,1,1,0,0,1,1,0,0], + [1,0,0,0,0,0,0,0,0,0,1,1,0,1,1,1,1,0], + [1,0,0,0,0,1,0,0,0,0,0,1,1,0,1,1,1,0], + [1,1,1,1,1,0,0,0,0,0,0,0,1,1,0,0,0,0],] + for(y = 0, i = starty; y < arr.length; y++, i++){ + for(x = 0, j=startx; x < arr[y].length; x++, j++){ + if(arr[y][x] === 1){ + canvasArr[i][j] = 1 + let cell = document.getElementById(`r${i}c${j}`) + cell.classList.add('on') + } + } + } + if(startx < canvasArr[0].length - startx - 15){ + startx += 15 + starty += 0 + }else if(starty < canvasArr[0].length - starty - 19){ + startx = 0 + starty += 19 + }else{ + startx = 0 + starty = 0 + } + +} \ No newline at end of file From b953c8d66ebb6224744ed6bcc76ce5bd254ad2cd Mon Sep 17 00:00:00 2001 From: rfamilara Date: Sun, 25 Oct 2020 17:45:48 -0500 Subject: [PATCH 09/11] Added a closing bracket after the reinitialize function at button --- objectives/rules-game-life/src/button.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/objectives/rules-game-life/src/button.js b/objectives/rules-game-life/src/button.js index a5c1386a8..64fe47220 100644 --- a/objectives/rules-game-life/src/button.js +++ b/objectives/rules-game-life/src/button.js @@ -87,4 +87,5 @@ function increment(dir, amount){ } y.innerHTML = `Height: ${height}` } - reinitialize() \ No newline at end of file + reinitialize() +} \ No newline at end of file From 77a567f713f09f462eb4ee64e82dd19288eafa76 Mon Sep 17 00:00:00 2001 From: rfamilara Date: Sun, 25 Oct 2020 21:44:03 -0500 Subject: [PATCH 10/11] Moved the src file to root directory --- {objectives/rules-game-life/src => src}/button.js | 0 {objectives/rules-game-life/src => src}/index.css | 0 {objectives/rules-game-life/src => src}/index.html | 0 {objectives/rules-game-life/src => src}/index.js | 0 {objectives/rules-game-life/src => src}/shapes.js | 0 5 files changed, 0 insertions(+), 0 deletions(-) rename {objectives/rules-game-life/src => src}/button.js (100%) rename {objectives/rules-game-life/src => src}/index.css (100%) rename {objectives/rules-game-life/src => src}/index.html (100%) rename {objectives/rules-game-life/src => src}/index.js (100%) rename {objectives/rules-game-life/src => src}/shapes.js (100%) diff --git a/objectives/rules-game-life/src/button.js b/src/button.js similarity index 100% rename from objectives/rules-game-life/src/button.js rename to src/button.js diff --git a/objectives/rules-game-life/src/index.css b/src/index.css similarity index 100% rename from objectives/rules-game-life/src/index.css rename to src/index.css diff --git a/objectives/rules-game-life/src/index.html b/src/index.html similarity index 100% rename from objectives/rules-game-life/src/index.html rename to src/index.html diff --git a/objectives/rules-game-life/src/index.js b/src/index.js similarity index 100% rename from objectives/rules-game-life/src/index.js rename to src/index.js diff --git a/objectives/rules-game-life/src/shapes.js b/src/shapes.js similarity index 100% rename from objectives/rules-game-life/src/shapes.js rename to src/shapes.js From e123e69ebb277d6caae03c2b0643449b37589162 Mon Sep 17 00:00:00 2001 From: rfamilara Date: Sun, 25 Oct 2020 23:57:26 -0500 Subject: [PATCH 11/11] Add more responsiveness --- src/index.js | 21 +++++++++++++++++++++ 1 file changed, 21 insertions(+) diff --git a/src/index.js b/src/index.js index 2d50ab55b..36c0cd290 100644 --- a/src/index.js +++ b/src/index.js @@ -89,3 +89,24 @@ function checkAlive(x,y,arr){ } } +function sim(){ + if(running){ + count++ + gen.innerHTML = `Generation: ${count}` + var newArr = JSON.parse(JSON.stringify(canvasArr)) + for(y = 0; y < height; y++){ + for(x = 0; x < width; x++){ + let item = document.getElementById(`r${y}c${x}`) + let res = checkAlive(x,y,newArr) + newArr = res.data + if(res.alive){ + item.classList.add('on') + }else{ + item.classList.remove('on') + } + } + } + canvasArr = newArr + } + +} \ No newline at end of file