数字を使ったパズルやマインスイーパなどのシンプルなゲームを ブラウザ上で気軽に楽しめます。
ユーザー名: test パスワード: test
遊びたいゲームをクリックし、プレイして下さい。 ユーザー登録なしでも遊べる仕様にしております。
昨今のコンピュータやシステムの進化により、ゲームはとても魅力的に、そして複雑にもなりました。 その一方で、昔のシンプルなゲームに喜びを感じる方々も一定数いらっしゃいます。 そんな方々がちょっとした時間に気軽に、ストレスなく遊んだり、 秋の夜長にじっくり没頭したりできるような、 そんなゲームを目指し、現代にも輝くシンプルゲームサイトを作っていきます。
メインターゲットのペルソナを30〜40代男性に設定し、中でも、「シンプルなゲームを好み」、「電車の中など、ちょっとした空き時間に遊びたい方」を対象としております。 シンプルなゲームは多数ありますが、ユーザー登録やアプリのダウンロードなど、ゲームプレイ以外のプロセスが必要なゲームが多く、昔の気軽に遊びやすいブラウザゲームを楽しみたい方は多いと考えました。
洗い出した課題の中から、以下を実装しました。それぞれの仕様を紹介します。
- Ruby on Railsによるアプリ制作
- 最低限のユーザー管理機能
- レスポンシブデザイン
- まるばつゲーム
- 15 Puzzle（盤面サイズの設定機能、クリアタイム機能）
- どんぐり探し（盤面サイズの設定機能、どんぐりの数の設定機能、難易度ボタン機能、どんぐりの数の示唆機能、はじめの第一歩機能、クリアタイム機能）
アプリの開発コストを抑え、ゲーム画面デザインの統一化を図るためにRuby on Railsを使用してアプリ制作を行いました。 それぞれのゲームは1つのHTMLを共有し、元々非表示に設定をしている項目のうち、必要な項目をJavaScript表示させ、JavaScriptで動作をします。 各ゲームはデータベースの1レコードとして登録し、トップページに表示を行い、それぞれのURLを認識して該当のJavaScriptが動作する設計にしております。
（データベースのgameテーブルの内容）
気軽に遊べるシンプルなゲームサイトをコンセプトにしているため、ユーザー登録やログイン無しでも遊べるように作成をしております。 ですが、今後実装予定の自己ベストタイムを表示する機能の実装に向け、個人情報を使用しないユーザー管理機能を実装しております。
（左：新規登録画面 中：ログイン画面 右：ユーザー情報編集画面）
こちらのURL（ http://54.250.80.22/games/minesweeper ）よりご覧いただけます。 PCからでも、スマートフォンからでもストレスなくプレイできるよう、上図のようにレスポンシブデザインで作成をしております。
（左：PC画面 右：スマートフォン画面）
また、スマートフォン上で「設定を表示する」のチェックボックスのオン・オフを切り替えることで、ゲームプレイ中には必要のない設定ボタン*の表示・非表示を切り替えできる機能もCSSで実装しております。
（左：非表示 右：表示）
こちらのURL（ http://54.250.80.22/games/tictactoe ）からご覧いただけます。 JavaScriptで3マス四方の盤面を表示し、マスをクリックするとOとXを交互に表示して、どちらかが1列揃うと勝者の宣言をする機能です。 書籍を参考に、Canvasを使用せずに、HTMLのtable要素を活用することで盤面を表示して扱う方法を学びました。その後、交互にOとXを表示させる方法と勝者の判定をさせる方法は自分で工夫し、実装しました。 技術的な課題として、3マス四方でしか使えない勝者判定の方法をとっていることがあります。特に動作上の支障はありませんが、より良いコードにするために、今後改良を行いたいと思っております。
（まるばつゲームプレイ画像）
こちらのURL（ http://54.250.80.22/games/15puzzle ）からご覧いただけます。 STARTボタンをクリックすることで、まるばつゲームと同様の方法で盤面を生成し、1から15までの数字を表示後、一定回数マスを並び替えます。その後、空白マスと同じ列または行のマスをクリックすることで、数字のマスを移動させ、1から15までを順に並べるゲームです。クリア後画面の状態になると、クリアメッセージ「You’ve DONE IT!!」が表示され、タイマーが止まるようになっています。 現状、マス目の数を増やした際にマスが極端に小さくなり、「プレイがしづらいこと」および「マスの形が崩れてしまうこと」が解決したい課題と考えております。
（左：プレイ開始時画面 右：クリア後画面）
このゲームの基礎的なコードは書籍にあるものを参考にしましたが、ユーザーの遊びやすさを考慮し、以下の機能を自分で工夫して実装しております。
- 一度に複数のマスを動かす機能（例：上図プレイ開始時画面で12をクリックした場合、1、3、12の3マスが同時に動く機能）
- 盤面サイズの設定機能（例：数のように、盤面のサイズを自由に設定できる機能）
- ゲームクリアの判定機能
- クリアタイムの計測機能
（盤面サイズを10マス四方に設定した画面）
こちらのURL（ http://54.250.80.22/games/minesweeper ）からご覧いただけます。 マインスイーパー風のゲームで、STARTボタンをクリックすることで盤面を生成し、盤面をクリックすることで近くのどんぐり（地雷）の数を示した数字が現れ、どんぐりのある箇所に印を付けていくゲームです。地雷の負のイメージを除くため、リスが埋めたどんぐりを避けつつ畑を耕す、という設定にしています。
（左：ゲーム開始時画面 右：クリア後画面）
こちらは、以前からロジックが気になっていたために、完全に自力で制作したもので、以下のようなロジックです。
- まるばつゲームと同様の方法で盤面を生成 （各マスのHTML要素を配列で管理）
- どんぐりを生成する位置を乱数で決め、該当マスに非表示の文字AをHTMLに記述。
- 隣接するどんぐりの数を数え、それぞれのマスに非表示の数字を記述。
- A：クリックしたマスがどんぐり（A）ならゲームオーバー。 B：クリックしたマスが数字なら、そのマスのみ数字を表示。 C：クリックしたマスが空白（隣接マスにどんぐりがない）なら、数字マスに行き当たるまで全てのマスを表示。
- ：残りのどんぐりの数が０になり、全てのマスが表示されていればクリア。
その他には、以下の機能を実装しております。
- はじめの第一歩機能 （一手目からゲームオーバーになることを防ぐために、１回のみ空白マスを自動で開く機能）
- 盤面サイズの設定機能
- どんぐりの数の設定機能
- クリアタイムの計測機能
- 難易度ボタン機能
- どんぐりの数の示唆機能 （盤面サイズを変更した場合、どんぐりの数の設定目安の表示）
（左：一手目でゲームオーバーになる例 右：はじめの第一歩機能の例）
（どんぐりの数の示唆機能）
- クリアタイム保存機能（難易度別）
- ベストタイム表示機能（難易度別）
- ベストタイム表示機能（各種設定別）
- ベストタイム表示機能（マイページ）
- ベストタイム表示機能（非ログインユーザー）
- 遊び方表示機能
- （ゲーム）2048
- （ゲーム）テトリス
| Columns | Type | Options |
|---|---|---|
| username | string | null: false, uniqueness: true |
| string | ||
| password | string | null: false |
| Columns | Type | Options |
|---|---|---|
| display_name | string | null: false, uniqueness: true |
| game_name | string | null: false, uniqueness: true |
| description | text | |
| image_url | string |
ターミナルで以下の通りにコマンド入力してください。 （Ruby on Railsのバージョン6.0.0で作成しています。）
- 任意のディレクトリを開きます。 ※「~/repositories」の部分は任意のディレクトリを指定します。
- リポジトリをクローンします。
- llgamelandディレクトリに移動します。
- Gemをインストールします。
- JavaScriptのパッケージをインストール
- データベースを生成します。
- データベースにデータを登録します。
1. cd ~/repositories
2. git clone https://github.com/lynxlevin/llgameland.git
3. cd llgameland
4. bundle install
5. yarn install
6. rails db:migrate
7. rails db:seed