Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
Help us understand the problem. What is going on with this article?

[JavaScript]2生物ライフゲーム/Two Camps Game of Life

本記事は、自分サイトのこの記事と同一内容です。

はじめに

以前なんとなく調べて出てきたのが、ライフゲームというものです。
その概要は下記"ライフゲームの説明"とwikipediaの当該記事を参照していただくとして、webフロントの実装練習として作成してみました。
実装したライフゲームの実行サイト

ライフゲームの説明

概要

ライフゲーム(wikipedia)
ライフゲームは、生命の誕生、生存、死亡をマス目でシミュレーションするゲームです。
ゲームと言ってもクリア、ゲームオーバー条件はなく、自由にマスに生命を配置し、その変化を楽しみむものです。

セルの生死ルール

※上記wikipedia記事より引用

  • 誕生…死んでいるセルに隣接する生きたセルがちょうど3つあれば、次の世代が誕生する。
  • 生存…生きているセルに隣接する生きたセルが2つか3つならば、次の世代でも生存する。
  • 過疎…生きているセルに隣接する生きたセルが1つ以下ならば、過疎により死滅する。
  • 過密…生きているセルに隣接する生きたセルが4つ以上ならば、過密により死滅する。

独自機能 "2生物"

ここで実装しているライフゲームは、2色(=2生物)のライフゲームです。
セルの生死追加ルール

  • 生存、過疎、過密…2種の生物それぞれで判定を行う。
  • 誕生…2種の生物それぞれで判定を行う。どちらの生物も誕生できるときは、ランダムにどちらかが誕生する。

※1色だけ使えば、普通のライフゲームとして遊べます。
なぜ2生物にしたのかは、単純な自分の興味と他の方がやっていないからです。
ライフゲームで2つの生物を戦わせてみたらどうなるのか、気になりますよね…

操作説明

image.png

  • クリアボタン…全生物を消す
  • 開始/停止ボタン…ライフゲーム開始/停止
  • 入力色(ラジオボタン)…入力色(生物)の選択
  • FPSレンジ操作…FPS・実行周期の変更 ※2021/2/26機能追加
  • グリッドのマスをクリック…入力色(ラジオボタン)で設定した色の生物を配置 配置しているマスをクリックした場合は生物を消す。
  • グリッド上でドラッグ…入力色(ラジオボタン)で設定した色の生物を一括配置

リンク

実装の参考

製作者関係

hagii-x
あるエンジニアの技術メモです。 仕事の分野は様々なので、.net,webなど書くネタは多様になるはず…
https://hagiayato.github.io/my-site/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away