はじめに
JavaScriptでプログラミングを始めようと思ったとき、環境構築の壁に直面することがあります。
しかし、Codepenを使えば、そんな悩みとはおさらばです！
今回は、Codepenの魅力と、その活用例としてライフゲームの実装を紹介します。
Codepenとは？
Codepenは、ウェブ開発者のための強力なオンラインツールです。HTML、CSS、JavaScriptのコードをブラウザ上で書いて、即座に結果を確認できます。
Codepenの主な特徴
- 環境構築不要: ブラウザさえあれば、すぐにコーディングを始められます。
- リアルタイムプレビュー: コードを書きながら、即座に結果を確認できます。
- 簡単な共有: URLを共有するだけで、他の人とコードを共有できます。
- 豊富なライブラリ: 多数のJavaScriptライブラリやCSSフレームワークが利用可能です。
ライフゲームとは？
ライフゲームは、1970年にジョン・ホートン・コンウェイによって考案された「セル・オートマトン」の一種です。
ライフゲームの基本ルール
- 生きているセルに隣接する生きたセルが2つか3つならば、次の世代でも生存する。
- 死んでいるセルに隣接する生きたセルがちょうど3つあれば、次の世代で誕生する。
- 上記以外の場合、セルは死滅する（過疎または過密により）。
これらのシンプルなルールから、複雑で興味深いパターンが生まれます。
CodepenでライフゲームをCreatePlaces作る
では、実際にCodepenを使ってライフゲームを実装してみましょう。
const GRID_SIZE = 50;
const CELL_SIZE = 10;
const canvas = document.getElementById('gameCanvas');
const ctx = canvas.getContext('2d');
canvas.width = GRID_SIZE * CELL_SIZE;
canvas.height = GRID_SIZE * CELL_SIZE;
let grid = createGrid();
function createGrid() {
return new Array(GRID_SIZE).fill(null)
.map(() => new Array(GRID_SIZE).fill(false));
}
function drawGrid() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
for (let x = 0; x < GRID_SIZE; x++) {
for (let y = 0; y < GRID_SIZE; y++) {
if (grid[x][y]) {
ctx.fillStyle = 'black';
ctx.fillRect(x * CELL_SIZE, y * CELL_SIZE, CELL_SIZE, CELL_SIZE);
}
}
}
}
function countNeighbors(x, y) {
let count = 0;
for (let i = -1; i <= 1; i++) {
for (let j = -1; j <= 1; j++) {
if (i === 0 && j === 0) continue;
const newX = (x + i + GRID_SIZE) % GRID_SIZE;
const newY = (y + j + GRID_SIZE) % GRID_SIZE;
if (grid[newX][newY]) count++;
}
}
return count;
}
function updateGrid() {
const newGrid = createGrid();
for (let x = 0; x < GRID_SIZE; x++) {
for (let y = 0; y < GRID_SIZE; y++) {
const neighbors = countNeighbors(x, y);
if (grid[x][y]) {
newGrid[x][y] = neighbors === 2 || neighbors === 3;
} else {
newGrid[x][y] = neighbors === 3;
}
}
}
grid = newGrid;
}
function gameLoop() {
updateGrid();
drawGrid();
requestAnimationFrame(gameLoop);
}
canvas.addEventListener('click', (event) => {
const rect = canvas.getBoundingClientRect();
const x = Math.floor((event.clientX - rect.left) / CELL_SIZE);
const y = Math.floor((event.clientY - rect.top) / CELL_SIZE);
grid[x][y] = !grid[x][y];
drawGrid();
});
// ランダムな初期状態を設定
for (let x = 0; x < GRID_SIZE; x++) {
for (let y = 0; y < GRID_SIZE; y++) {
grid[x][y] = Math.random() > 0.7;
}
}
gameLoop();
このコードをCodepenのJavaScriptパネルに貼り付け、HTMLパネルに以下を追加します：
<canvas id="gameCanvas"></canvas>
そして、CSSパネルに以下を追加します：
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background-color: #f0f0f0;
}
canvas {
border: 1px solid #000;
}
コードの解説
キャンバスの設定: HTMLのcanvas要素を使用して、ゲームの描画領域を作成します。
グリッドの生成:
createGrid()関数で、セルの状態を保持する2次元配列を作成します。描画:
drawGrid()関数で、現在のグリッドの状態をキャンバスに描画します。近隣セルのカウント:
countNeighbors()関数で、各セルの周囲8マスの生きたセルをカウントします。グリッドの更新:
updateGrid()関数で、ライフゲームのルールに基づいて次の世代のグリッドを計算します。ゲームループ:
gameLoop()関数で、グリッドの更新と描画を繰り返します。クリックイベント: キャンバス上のクリックで、セルの状態を切り替えられるようにしています。
Codepenの利点
即時フィードバック: コードを書くと同時に結果が見られるため、デバッグが容易です。
共有の簡単さ: URLを共有するだけで、他の人と作品を共有できます。
バージョン管理: 作品の変更履歴を保存できるため、実験的な変更も安心して行えます。
コミュニティ: 他の開発者の作品を参考にしたり、フィードバックをもらえたりします。
まとめ
Codepenを使用することで、JavaScriptプログラミングの環境構築の手間を省き、すぐにコーディングを始められます。ライフゲームのような複雑なアルゴリズムも、ブラウザ上で簡単に実装・共有できるのです。
プログラミング学習やプロトタイピングに、ぜひCodepenを活用してみてください。環境構築の壁を越え、アイデアを素早く形にする楽しさを体験できるはずです！
参考リンク
デモ
以下の埋め込みデモを確認できます：
Comments
塗り潰す色が毎回同じであるなら、
ctx.fillStyleへの値設定はループの外へ出したほうが良いかと思います。Let's comment your feelings that are more than good