Статья удалена — Инди на DTF

Наткнулся сегодня на статью про аркаду на основе автомата Конвея и навеяли приятные воспоминания. Думаю, что каждый здесь успел поковырять такие клеточные автоматы. Если же нет, то обязательно сделайте это! Я же с вашего позволения поделюсь своей скромной поделкой на js, которую сделал уже достаточно давно, коротая холодные вечера.

Релиз игры в codepen.io - состоялся не помню когда, тут же можно "поиграть" в нее. Жаль, что в статьи dtf не встраивается iframe для игры прямо здесь (если это все же можно как-то сделать, сообщите в комменты).

Релиза в steam нет и не будет. Но возможно, если эта статья соберет 3 лайка (максимальное количество моих подписчиков), я займусь портированием ее в steam. Но это не точно, лучше ждите Elden Ring.

Для всех, кто не понимает о чем речь и заинтересован сделать свою игру на основе этого клеточного автомата советую почитать только одну статью в википедии. Не подсматривайте в код и чужие реализации, чтобы эта маленькая "игра" превратилась в достаточно интересную и недолгую тестовую задачку для вашего мозга.

P.s. Для всех, кто не прочь подсмотреть в код отдельная ссылка

P.p.s Единственное, что здесь может быть ценно для других js-разработчиков - это моя простенькая реализация резиновой 2D сетки в CGrid. Код под спойлером.

Можете переиспользовать на свой страх и риск для поделок ("this software provided as is").Как инициализировать грид можете глянуть в LifeGameCanvasDrawer. Грид предоставляет всего пару методов - закрасить ячейку i, j цветом color - drawCell(i, j, color) и очистить ячейку i, j - clearCell(i, j).

class CGrid { static get GRID_DEFAULT_LINE_WIDTH() { return 1; } constructor(options) { this.canvas = options.canvas; this.canvasCtx = options.canvas.getContext("2d"); this.cellSize = options.cellSize; } draw(color) { let rows = 0; let cols = 0; let i = 0.5; //calc x,y grid line lengths let xLineLength = this.calcGridLineLength(this.canvas.width, this.cellSize); let yLineLength = this.calcGridLineLength(this.canvas.height, this.cellSize); //calc x,y grid offsets let xOffset = Math.floor((this.canvas.width - xLineLength) / 2); let yOffset = Math.floor((this.canvas.height - yLineLength) / 2); do { this.drawLine(xOffset, i + yOffset, xLineLength + xOffset, i + yOffset, color); i = i + this.cellSize; rows++; } while (i <= this.canvas.height) i = 0.5; do { this.drawLine(i + xOffset, yOffset, i + xOffset, yLineLength + yOffset, color); i = i + this.cellSize; cols++; } while (i <= this.canvas.width) //rows and cols count is -1 from grid lines count rows--; cols--; this.grid = { rows, cols, xOffset, yOffset, xLineLength, yLineLength } } calcGridLineLength(cSize, cellSize) { return cSize % cellSize ? Math.floor(cSize / cellSize) * cellSize : cSize; } drawLine(x1, y1, x2, y2, color) { this.canvasCtx.beginPath(); this.canvasCtx.moveTo(x1, y1); this.canvasCtx.lineTo(x2, y2); this.canvasCtx.strokeStyle = color; this.canvasCtx.stroke(); } drawCell(i, j, color) { let x = this.cellSize * (j - CGrid.GRID_DEFAULT_LINE_WIDTH) + this.grid.xOffset + CGrid.GRID_DEFAULT_LINE_WIDTH; let y = this.cellSize * (i - CGrid.GRID_DEFAULT_LINE_WIDTH) + this.grid.yOffset + CGrid.GRID_DEFAULT_LINE_WIDTH; this.canvasCtx.fillStyle = color; this.canvasCtx.fillRect(x, y, this.cellSize - CGrid.GRID_DEFAULT_LINE_WIDTH, this.cellSize - CGrid.GRID_DEFAULT_LINE_WIDTH); } clearCell(i, j) { let x = this.cellSize * (j - CGrid.GRID_DEFAULT_LINE_WIDTH) + this.grid.xOffset + CGrid.GRID_DEFAULT_LINE_WIDTH; let y = this.cellSize * (i - CGrid.GRID_DEFAULT_LINE_WIDTH) + this.grid.yOffset + CGrid.GRID_DEFAULT_LINE_WIDTH; this.canvasCtx.clearRect(x, y, this.cellSize - CGrid.GRID_DEFAULT_LINE_WIDTH, this.cellSize - CGrid.GRID_DEFAULT_LINE_WIDTH); } getInstance = () => { return this.grid; } }