diff --git a/src/button.js b/src/button.js new file mode 100644 index 000000000..64fe47220 --- /dev/null +++ b/src/button.js @@ -0,0 +1,91 @@ +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 diff --git a/src/index.css b/src/index.css new file mode 100644 index 000000000..1ede3e0ce --- /dev/null +++ b/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/src/index.html b/src/index.html new file mode 100644 index 000000000..f1e7dba05 --- /dev/null +++ b/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/src/index.js b/src/index.js new file mode 100644 index 000000000..36c0cd290 --- /dev/null +++ b/src/index.js @@ -0,0 +1,112 @@ +var width = 30; +var height = 30; +var canvasArr = []; +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') + } +} +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() + +function reinitialize(){ + while(canvas.firstChild){ + canvas.removeChild(canvas.firstChild) + } + 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++ + } + 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} + } + + } + +} +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 diff --git a/src/shapes.js b/src/shapes.js new file mode 100644 index 000000000..a18fddfb2 --- /dev/null +++ b/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