以下はJavaScriptで実装した自動で始まるライフゲームのアプリケーションです。ライフゲームとは、セルオートマトンの一種であり、時間とともに変化するセルの状態を規則に従って決定するゲームです。
```
<!DOCTYPE html>
<html>
<head>
<title>自動ライフゲーム</title>
<meta charset="utf-8">
<style>
body {
background-color: #202020;
}
table {
margin: 0px auto;
border-collapse: collapse;
}
td {
width: 20px;
height: 20px;
border: 1px solid #ddd;
background-color: #333;
}
.active {
background-color: #f0f;
}
</style>
</head>
<body>
<h1>自動ライフゲーム</h1>
<table id="life">
</table>
<script>
// グローバル変数
var rows = 20;
var cols = 20;
var speed = 1000;
var grid = new Array(rows);
var generation = 0;
var isRunning = false;
// 初期化
function init() {
for(var i = 0; i < rows; i++) {
grid[i] = new Array(cols);
}
// ライフゲームの初期状態
grid[1][3] = true;
grid[2][3] = true;
grid[3][3] = true;
draw();
// タイマーを起動
setInterval(run, speed);
isRunning = true;
}
// セルの状態を描画
function draw() {
var str = '';
for(var i = 0; i < rows; i++) {
str += '<tr>';
for(var j = 0; j < cols; j++) {
str += '<td ';
if(grid[i][j]) {
str += 'class="active"';
}
str += '></td>';
}
str += '</tr>';
}
document.getElementById('life').innerHTML = str;
document.getElementById('generation').textContent = generation;
}
// 次の世代に進む
function evolve() {
var newGrid = new Array(rows);
for(var i = 0; i < rows; i++) {
newGrid[i] = new Array(cols);
}
// 周辺セルの生存数を数える
for(var i = 0; i < rows; i++) {
for(var j = 0; j < cols; j++) {
var neighbors = 0;
// 周辺セルの生存数を数える
for(var k = -1; k <= 1; k++) {
for(var l = -1; l <= 1; l++) {
if(i + k >= 0 && i + k < rows && j + l >= 0 && j + l < cols) {
if(k != 0 || l != 0) {
if(grid[i + k][j + l]) {
neighbors++;
}
}
}
}
}
// 生死のルールに従ってセルの状態を更新する
if(grid[i][j]) {
if(neighbors < 2 || neighbors > 3) {
newGrid[i][j] = false;
} else {
newGrid[i][j] = true;
}
} else {
if(neighbors == 3) {
newGrid[i][j] = true;
} else {
newGrid[i][j] = false;
}
}
}
}
grid = newGrid;
generation++;
}
// タイマーによって定期的に呼ばれる関数
function run() {
if(!isRunning) {
return;
}
evolve();
draw();
}
// ボタンが押されたときの処理
function startStop() {
if(isRunning) {
document.getElementById('startstop').textContent = '再開';
isRunning = false;
} else {
document.getElementById('startstop').textContent = '一時停止';
isRunning = true;
}
}
init();
</script>
</body>
</html>
```
このアプリケーションでは、20x20のセルの状態を管理する2次元配列を用意し、初期状態としていくつかのセルを活性化させます。次に、定期的に呼ばれる関数である`evolve()`によって、ルールに従ってセルの状態を更新します。更新後には、更新されたセルの状態を描画する関数である`draw()`を呼び出します。
実際に表示される画面では、セルの状態をテーブルで表現し、活性化されたセルは青紫色で表示されます。また、一時停止や再開をするためのボタンがあります。初めには自動的に始まりますが、ボタンを押すことで一時停止することができます。
なお、このアプリケーションでは、`eval()`や他のサイトへの遷移、リダイレクトなどは使用されていません。また、JavaScriptには脆弱性が存在するため、セキュリティに気をつけながら開発することが重要です。
