以下は、JavaScriptで実装されたプログラム例です。このプログラムは、HTMLファイル内に記述されることを想定しています。

```javascript
// ライフゲームの盤面サイズ
const BOARD_SIZE = 30;

// ライフゲームの初期状態をランダムに生成
function generateInitialBoard() {
  const board = [];
  for (let i = 0; i < BOARD_SIZE; i++) {
    const row = [];
    for (let j = 0; j < BOARD_SIZE; j++) {
      const randomValue = Math.round(Math.random());
      row.push(randomValue);
    }
    board.push(row);
  }
  return board;
}

// ライフゲームの次の状態を計算
function calculateNextState(currentState) {
  const nextState = [];
  for (let i = 0; i < BOARD_SIZE; i++) {
    const row = [];
    for (let j = 0; j < BOARD_SIZE; j++) {
      const neighborValues = [];
      // 上下左右のセルの値を取得
      if (i > 0) {
        neighborValues.push(currentState[i - 1][j]);
      }
      if (i < BOARD_SIZE - 1) {
        neighborValues.push(currentState[i + 1][j]);
      }
      if (j > 0) {
        neighborValues.push(currentState[i][j - 1]);
      }
      if (j < BOARD_SIZE - 1) {
        neighborValues.push(currentState[i][j + 1]);
      }
      // 斜めのセルの値を取得
      if (i > 0 && j > 0) {
        neighborValues.push(currentState[i - 1][j - 1]);
      }
      if (i > 0 && j < BOARD_SIZE - 1) {
        neighborValues.push(currentState[i - 1][j + 1]);
      }
      if (i < BOARD_SIZE - 1 && j > 0) {
        neighborValues.push(currentState[i + 1][j - 1]);
      }
      if (i < BOARD_SIZE - 1 && j < BOARD_SIZE - 1) {
        neighborValues.push(currentState[i + 1][j + 1]);
      }
      // 生きているセルの数を数える
      const livingNeighborCount = neighborValues.filter(value => value === 1).length;
      // 現在のセルの状態に応じて次のセルの状態を決める
      if (currentState[i][j] === 1) {
        // 生きているセル
        if (livingNeighborCount < 2 || livingNeighborCount > 3) {
          row.push(0); // 過疎または過密により死滅
        } else {
          row.push(1); // 2つか3つの生きているセルと隣接しているので生存
        }
      } else {
        // 死んでいるセル
        if (livingNeighborCount === 3) {
          row.push(1); // 3つの生きているセルと隣接しているので誕生
        } else {
          row.push(0); // それ以外は死滅
        }
      }
    }
    nextState.push(row);
  }
  return nextState;
}

// ライフゲームの盤面を表示する関数
function displayBoard(board) {
  const boardElement = document.getElementById("board");
  boardElement.innerHTML = "";
  for (let i = 0; i < BOARD_SIZE; i++) {
    const rowElement = document.createElement("div");
    rowElement.classList.add("row");
    for (let j = 0; j < BOARD_SIZE; j++) {
      const cellElement = document.createElement("div");
      cellElement.classList.add("cell");
      if (board[i][j] === 1) {
        cellElement.classList.add("alive");
      }
      rowElement.appendChild(cellElement);
    }
    boardElement.appendChild(rowElement);
  }
}

// 初期状態のライフゲームの盤面を表示
let currentState = generateInitialBoard();
displayBoard(currentState);

// 次の状態に遷移するボタンをクリックした時の処理
const nextButton = document.getElementById("next-button");
nextButton.addEventListener("click", () => {
  currentState = calculateNextState(currentState);
  displayBoard(currentState);
});
```

このプログラムでは、まず`generateInitialBoard`関数で、ランダムな初期状態のライフゲームの盤面を生成しています。次に、`calculateNextState`関数で、現在の盤面の状態から次の盤面の状態を計算しています。具体的には、各セルの周囲8つのセルの状態を取得し、その中の生きているセルの数に応じて、次の状態を決めています。最後に、`displayBoard`関数で、盤面の状態に応じて、HTMLの要素を作成して表示しています。

このプログラムを実行するには、HTMLファイルに以下のような要素を追加してください。

```html
<div id="board"></div>
<button id="next-button">Next</button>
```

`<div>`要素は、盤面を表示するためのものです。`<button>`要素は、次の状態に遷移するボタンを表示するためのものです。また、CSSを適用して以下のような見た目にしておくと、よりライフゲームらしい雰囲気になります。

```css
#board {
  display: grid;
  grid-template-columns: repeat(30, 20px);
  grid-template-rows: repeat(30, 20px);
  border: 1px solid #ccc;
}

.cell {
  width: 20px;
  height: 20px;
  border: 1px solid #ccc;
}

.alive {
  background-color: #000;
}
```

これで、初期状態のライフゲームの盤面が表示されます。次に、`<button>`要素をクリックすると、次の状態に遷移します。ライフゲームの面白さは、初期状態によって異なる盤面が生成されることにあります。なので、何度か`<button>`要素をクリックして、様々な盤面を楽しんでみてください。