神戸ルル@VTuber ラボ

「ヤンデレル～記憶喪失からはじまる脱出ゲーム～」を公開しました。

f:id:CodeLelou:20200522001515p:plain

プログラミング不要でオリジナル脱出ゲームが作れちゃう、脱出ゲームのサンプルプログラムです。

カスタマイズ・改造方法はネタバレ・攻略法も含むので、サンプルプログラムの難易度や改善点などを客観的に評価できるように初見プレイ推奨です。

ソースコードの解説記事一覧

この記事はこのサンプルプログラムの総合案内となっており、カスタマイズ・改造方法などの記事を追加した時は、この記事も修正し新しい解説記事へのリンクを追加していく予定です。

解説記事はネタバレ・攻略法を含む場合があり、読む前の初見プレイを推奨しています。

カスタマイズ・改造方法

ソースコード一式はGitHubで公開

ヤンデレル～記憶喪失からはじまる脱出ゲーム～のGitHubページでサンプルプログラム一式を公開しています。

画像と効果音もこのサンプルプログラム用に新しくオリジナルで作成したものになります。

このサンプルプログラム一式ダウンロードリンクからダウンロードできないような場合は、GitHubページの［Clone or download］ボタンからメニューを開くと現れる、［Download ZIP］ボタンからダウンロードできます。
画像や効果音などをまとめてアーカイブ化したZIPファイル（圧縮ファイル）になっています。

［Clone or download］ボタンは、ソースコード（index.html）・画像フォルダ（img）・サウンドフォルダ（sound）がリストになっている右上付近に、緑色のボタンとして表示されているかと思います。

f:id:CodeLelou:20200522002927p:plain

ダウンロード後にそのファイルを解凍（展開）し、index.htmlファイルをテキストエディタ等で編集することでカスタマイズ・改造できます。

そのindex.htmlファイルをWebブラウザで開くことで動作確認・プレイもできます。

私が公開している脱出ゲームはツイッターへのリンクやフッターの著作権表示があるので、それらがないサンプルプログラム動作確認ページもあるのでチェックしてみてください。

初見プレイ推奨

このサンプルプログラムは脱出ゲームのギミック的要素がメインで、謎解き要素は比較的シンプルです。
オリジナル脱出ゲーム化のために文字（シナリオや謎要素など）や画像を差し替えた場合でも、ギミック的要素は他の人が作る脱出ゲームと共通です。

そこでギミック要素の難易度やシナリオ・謎解き要素の改善案（こうすればもっと面白くなるとか）を意識しながら初見プレイしてみて、オリジナル版の参考にしてもらえればと思います。
通常、開発者自身がユーザーの気持ちを体験できる初見プレイのチャンスはないので、サンプルコードの解説などを読まずに先に初見プレイをしてください。

このサンプルプログラムについて

プログラミングの入門者・初心者の参考になればと思い、このサンプルプログラムを設計・作成しました。
HTML/CSS/JavaScriptで作るHTML5アプリになります。

少し技術的な話になりますが、プログラム部分であるJavaScriptではReactというライブラリを使用しています（jQueryは使用していません）。
Reactでユーザー操作（ボタンのタップなど）・画面遷移（部屋の移動など）を制御しています。

完成したオリジナル脱出ゲームは、Web上にアップロードすることでインストール不要のHTML5アプリとしてプレイしてもらうことができますし、App StoreやGoogle Playなどにスマホアプリとして公開することも可能です。

はじめは簡単なカスタマイズ・改造からはじめて、興味があればプログラミングにも挑戦して機能追加や新しいアプリの開発へとステップアップのきっかけになれば嬉しいです。

登録・インストールなしで開発をはじめられる

このサンプルプログラムは、パソコンさえあればOS標準搭載のメモ帳などのテキストエディタで開発することもできます（ただしメモ帳は開発に向いているわけではないのでオススメはしません）。
さらにHTML5アプリのため、Webブラウザでファイルを開けばそのままWebブラウザ上で動作確認・プレイが可能です。

通常、プログラミングの開発を始める場合は、最初に色々とインストール作業など開発環境構築が必要になることが少なくありません。
そこでこのサンプルプログラムは、テキストエディタとWebブラウザさえあれば開発できるようにプログラミング言語やライブラリ・フレームワークを選びました。

スマホアプリ化も可能

ただ開発のはじめやすさを追求しただけでなく、HTML5アプリはスマホアプリ化もしやすいメリットもあります。

React NativeやCorodovaなどのフレームワークを使うことで、このサンプルプログラムで作ったアプリをスマホアプリ化することができるようになります。

サンプルプログラムの注意点

今回、サンプルプログラムとしてJavaScriptで開発したわけですが、私はJavaScriptの専門家ではありません。

WebサイトやHTML5アプリ（ハイブリッドアプリ）、Google Chrome 拡張機能などを作ることもあるのでJavaScriptは必然的に扱うことが少なくないプログラミング言語であります。

専門的な話になりますが、個人的には静的型言語が好きで動的型言語のJavaScriptである点、Webブラウザの種類・バージョンの影響を受けやすい（特にMicrosoft Internet Explorer）などの理由から極力避けていました。
JavaScript言語が嫌すぎて、わざわざマイナーなHaxe言語（TypeScriptなどのAltJSの1つ）を勉強してJavaScript開発をするくらいです。

ちなみにどのプログラミング言語も書き方やルールが違うだけで、基本的に条件分岐や繰り返し処理などができ、1つの言語をある程度理解できれば他のプログラミング言語の習得はあまり難しくないことが多いです。

ですが今回はプログラミングの入門者・初心者の参考にしてもらうことを目的にサンプルコードを書くということで、最新のJavaScriptもチェックして、できる限り手本になるように心掛けたつもりです（エンジニア同士でもコードの書き方などに主義・主張があり一概に何が正しいかは難しいけれど）。

ただし使用しているJavaScriptライブラリのReactは私自身が完全な初心者で調べながら・勉強しながらだったため、サンプルプログラムがベストな実装方法とは限りません。

もしかしたらベターですらもなく、悪い実装方法になっているかもしれません。

もし大幅な機能を追加しようとしたり、ゼロからアプリを作ろうとした時にReactについて調べたらサンプルプログラムでは変な実装をしているなと感じたら、それはサンプルプログラムの方が間違っている可能性があります。
その点はあらかじめご了承と注意をお願いします。

私は今までJavaScriptライブラリはjQueryばかり使っていました。

しかしjQueryだと特に画面遷移を標準でサポートしておらず、今回はjQueryは使用せず、画面遷移などを標準でサポートしているJavaScriptのライブラリ・フレームワークを探しました。

そこで選んだのがReactです。

Reactは画面遷移などを標準でサポートしているだけでなく、さらにこれを発展させたReact Nativeというフレームワークもあります。
このReact Nativeはスマホアプリも作れるので、ステップアップのしやすさを感じました。