ぼくの初合コンのトラウマを世界一わかりやすく共有します

 

こんにちは、作っちゃうおじさんと申します。

皆さま、合コン してますか?

今回、私が非リアな大学生だった頃のお話しをいたします。合コンで私が抱えたトラウマを、ぜひとも皆さまに共有させていただきたく執筆いたしました。

どうぞ、お楽し・・・お苦しみください。

ウキウキ楽しい人生初合コン!

元気な男性のイラスト

ぼく「大学4年にして、初めて合コンに呼ばれたぞ!」

ぼく「童貞一直線だったこのぼくとも、今日でお別れ!やっほい!」

当時は理系の大学四年生、僕は童貞一直線でした。(童帝と自称していました。)

趣味はゲーム制作心霊スポット巡りエロ画像模写どう考えても女受けしないものでしたし、そもそも学部の男女比は9:1、同じ授業に女性は数人しかおりませんでした。

そんな、毎日童貞仲間と下ネタトークをすることが生き甲斐だった私に、なんと合コンのお誘いが入ってきたのです。

女性とまともに話すことさえ久しぶりだった私は、合コン当日までに早速準備を始めました。全身○○クロの服から脱皮するために、オシャレな店に足を運んで、店員に言われるがまま高そうなコーディネートを揃えたり、近所のブックオフで女性との話し方を勉強したり・・・。

そして当日、合コンがはじまりました。

そして、合コンが終わりました。

 

帰ってきた時、僕の中に湧き出る感情が止まりませんでした。

この気持ちをどのように発散すればよいのか・・・。

そうだ!

今回の合コンをゲームで表現しよう!

そしてこの気持ちを全世界の人と共有しよう!

 

・・・と、思い立ってから10時間位で完成したゲームがこちらとなります。

(ぜひ、音量有でお楽しみください。スマホでも音出ます。)

はじめての合コンゲームで遊ぶ。

ゲーム内容

タイトル画面をみると、楽しそうな合コンだったことがわかりますね

 

 

楽しそう?んなわけあるかいぃぃぃぃぃぃ!

・・・ゲーム内容ですが、藁人形に五寸釘を打ち込むゲームです。

5回叩くごとに合コンの苦い思い出が聞こえてきます。

【豪華なボイス(全33種類 目指せコンプリート!)】
「ねえ、君しゃべってる?」

「うわ~彼女いなそう~!」

「絶対アニメみてるでしょ~」

「キミただのイジラれキャラでしょ?!」

作っちゃうおじさん「あの時はやり場のない怒りをぶつける場所がほしかったのです。たとえどんだけ自分が悪いとわかっていたとしても。」

はじめての合コンゲーム

最後に

みなさん!死にたいですかー!

仕事、人間関係、劣等感etc・・・。

人間生きてりゃ死にたくなるような嫌なことはたくさんあります。

そんな負の感情を発散させる良い方法があります。

辛い時は自作のゲームを作りましょう!

やり場のない負の感情をゲーム制作という形で社会へShare・・・ブチかますのです!

 

 

以上です。

■お借りした素材(ゲーム使用素材含む)■
いらすとや
ぴぽや
びたちー素材館
ザ・マッチメイカアズ
AC写真素材フリー






(javascript)ローカルストレージを使ってセーブ・ロードを行う。

長編ゲームを制作するとなると、セーブ機能は必須といえます。

そこで、今回はjavascriptにおけるセーブ・ロードの実装方法を説明します。

なお、今回はローカルストレージ機能を使います。




以下、Coin変数とCount変数と書き込み・読み込みする処理を描きます。

コインクリックゲーム内で使用したコードです。

//////////////////////////////////////////////////
//ローカルストレージへデータ書き込み
//////////////////////////////////////////////////

if(window.localStorage){
window.localStorage.setItem("Coin" , Coin); //CoinというキーでCoin変数を記録
window.localStorage.setItem("Count" , Count);//CountというキーでCount変数を記録
}

//////////////////////////////////////////////////
//ローカルストレージからデータ読み込み
//////////////////////////////////////////////////
if(window.localStorage){  //ローカルストレージ機能が使用可能なら
Coin = parseInt(window.localStorage.getItem("Coin")); //Coinというキーに格納されているCoin変数を読み込み(文字列として読み込むため、parseIntで整数に変換している)
if(!Coin)Coin=0;
Count = parseInt(window.localStorage.getItem("Count"));//Countいうキーに格納されているCount変数を読み込み(文字列として読み込むため、parseIntで整数に変換している) 
if(!Count)Count=1;
 } 




こんな感じで実装します。

ちなみに、iOSだとプライベートブラウズが起動していると保存されません。

配列などを格納するときはJSONを使います。

enchant.jsの音関係のエラーを対処する。

enchant.jsのサウンド部分はエラーの温床になりやすい。

しかも特定のブラウザのみ発生することもあるので、発見が遅れることも多い。

そこで、今回は以前私が体験した音まわりのエラーを箇条書きで紹介します。



・iOSsafariだと音量調整のvolumeプロパティを持ってないとのことで、エラーを吐かれる。

対策:volumeを使わない。音の大きさはあらかじめ調整する。

・iOSsafariだと音再生してない状態でsound.stop()メゾットを実行するとエラーを吐かれる。

対策:面倒なときはtry{  sound.stop(); }catch(e){}

・データファイル読み込み時、大文字小文字を区別せずに読み込めるブラウザとそうでないブラウザがある。

対策:きちんとファイル名に大文字小文字を合わせる。

enchant.jsのループBGM再生がブラウザによって動作が異なる問題を解決する。

enchant.jsでブラウザゲームを作ると必ず詰まる部分がサウンドです。

PCの特定のブラウザでは問題なかったけど、別ブラウザや環境によってエラーをはかれ、動かなくなってしまうことがよくありました。

その中でも一番面倒だったループBGM再生を、どんな環境でも再生できる形でクラス化したのでお使いください。



実はブラウザによってループ再生方法が変わる

enchant.jsにおける音再生ですが、内部を見るとブラウザによって二通りの実装方法があるみたいです。

ちなみに、iOSで音を鳴らす際は以下のコードを上の方に貼ってください。


enchant.Sound.enabledInMobileSafari = true;  //iOSで音を鳴らせる

(ソース元見つからず。後で探すかコード読んでから書きます。)

(1)サウンドループフラグによりループ


Sound.play();
Sound.src.loop = true;

(2)enterframeによりループ

</pre>
<pre> game.onenterframe=function(){ //enterframeイベントのイベントリスナー
  Sound.play();
 };</pre>
<pre>

これのどちらかで再生ができます。ただ、

(1)が可能な状態で(2)を実行すると、音再生が毎フレームごとに実行されてしまいますし、

(2)が可能な状態で(1)を実行すると、エラーが出てしまいます。

そこで、Sound.srcが存在するか否かで(1)か(2)のどちらを使用するか分けられるようにするとよいということです。

その処理を加えたクラスが以下のコードです。



コード


//サウンドクラス
 SoundLoop = Class.create(Sprite, {
 Sound,
 SFlg:0,
 game,
 initialize:function(_game){ //クラスの初期化(コンストラクタ)
 game=_game;
 Sprite.call(this,0,0); //スプライトの初期化
 SFlg=0;
 game.onenterframe=function(){ //enterframeイベントのイベントリスナー
 if(SFlg==1){
 try{
 if(!Sound.src){ //もしSound.srcがないならenterframeによるループ再生
 Sound.play();
 }
 }catch(e){}
 } 
 };
 },
 Set:function(_Sound){
 Sound=_Sound;
 SFlg=0;
 try{
 Sound.stop();
 }catch(e){}
 Sound=game.assets[Sound];
 try{ 
 // もしSound.srcがあるなら、ループ再生フラグをtrueにする。
 if(Sound.src){
 Sound.play();
 Sound.src.loop = true;
 }
 }catch(e){}
 SFlg=1;
 },
 Stop:function(Sound){
 try{
 Sound.stop();
 SFlg=0;
 }catch(e){}
 }
 });

//サウンドクラスここまで

 

使い方


//音読み込み
 var M_Coin="sound/Coin.wav";
 game.preload([M_Coin]);

var M_Sound=new SoundLoop(game); //gameクラスを引数にして宣言
M_Sound.Set(M_Coin);//ループBGMのファイルパスを引数にするとループ再生</pre>
<pre>M_Sound.Set(M_Coin);//Set二回目以降は直前のBGMを停止した後ループ再生</pre>
<pre>Sound.Stop();//ループBGMの停止 




enchant.js用 ブラウザゲームテンプレート作りました。

ブラウザゲームの技術系ブログを目指して制作したブログなのですが、いかんせん自分のプログラムを整理できていないことに気が付きました。

そこで、プログラムを整理し、enchant.js製ブラウザゲームテンプレートを作成しました。今後はこのテンプレートを基にブラウザゲームを制作していきます。

かつて9leapに登録していた人が独立して自分のサーバーにゲームを設置するときなどに使えればなと思っています。




 

サンプルゲーム

http://hothukurou.firebird.jp/game/templete/index.html

 

ダウンロード

ここをクリックするとダウンロードできます。

主な機能

・ツイート機能

・データ保存機能

・ランキング機能

・サウンドループクラス付(http://hothukurou.firebird.jp/blog/loopsound に詳細を説明しています。)

・プレイ履歴保存機能

・セーブ・ロード機能(http://hothukurou.firebird.jp/blog/saveload に詳細を説明しています。)

・コメント機能(WebmasterTOOL ・jp よりお借りしました)

 



使い方

・index.html(ゲーム表示ページを設定する)

 

 

 

 

 

 

SEO対策にmetaタグにキーワードと要約をかいておきましょう。

パンくずリストとは、どのサイトから来たかを表すものです。

URLを自分のサイトのメインページにしましょう。

 

ページ末尾にはトップページにもどるようにURLを書いておきましょう。

他、目的や遊び方などは自分で書いてください。



Script.js(ゲーム部分)

ローカルストレージを用いたセーブ機能は上のプログラムを参考に組んでください。

ゲーム終了時はwarp変数にコメントを加えたのち、end.phpにvalue=(スコア値)を追加してください。(スコア値はランキングで利用します。)

プログラム構成

 





enchant.jsをページ内に拡大させないで表示させる方法【2017年最新版】

つまりこのようなenchant.jsをWebページ内に貼る方法についてお話しします。
公式や他サイトの方法だといくつか問題があるため、作っちゃうおじさんのサイトで採用している方法を書きます。




公式で使われている方法は、以下のコードをタグ内に挿入すると、その位置にゲーム画面が出てくるというものです。

<div id="enchant-stage"></div>

 

ただこの方法だと、以下の問題が発生します。

(1)画面をスクロール可能にすると、スクロール位置によってはクリック位置がずれる時がある。

(2)複数のenchant.jsを一度に表示できない。

 

そこで、作っちゃうおじさんのサイトでは、enchant.jsを読み込んだhtmlファイル(game.html)をiframe内に表示させています。

この方法だとクリック位置がずれることがなく、動作させることができます。




 

game.html(enchant.jsのゲームを表示させる部分。ただenchant.jsのゲームを表示させるだけのコードです。)

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="ja">
<head>
<meta charset="utf-8">
<script src="library/enchant.min.js"></script>  //enchant.jsライブラリ
<script src="myjs/Script.js"></script>  //プログラムコード
<script>
if(window==top.window) location.href="index.html"; //直接ここに飛んで来たらiframe元に飛ばす
</script>
</head>
<body></body>
</html>

index.html(ゲーム表示ページです。)

bodyタグ内の表示したい部分に以下のコードを貼ります。

<iframe name="ifr" src="game.html" width=" 400" height="500" scrolling="no" marginwidth="0" marginheight="0" frameborder="0" style="border:none;"onload="this.contentWindow.focus();"></iframe>
<form>
//キーボード操作時には、フォーカスがiframeから外れたときにために以下のボタンをつけるとよいです。
<input type="button" value="キーボード操作できない時に有効にするボタン" onclick="ifr.focus();">
</form>




javascriptで作る簡単ブラウザゲームの作り方!(環境準備編)

みなさんはじめまして、作っちゃうおじさんと申します。

普段作っちゃうおじさんの寝床にてブラウザゲームを公開しています。

今回は、普段作っているjavascriptで作るブラウザゲーム作り方について解説します。

このページの想定として、C言語か何かプログラムに一度は触れたことがある人を対象にしています。

(もしプログラミングの方法から知りたい方はコメントに記入ください。後日記事に書きたいと思います。)




今回は、javascriptという言語を使います。ブラウザで動くプログラミング言語です。

ただ、1からゲーム制作のプログラムを組むのも労力がかかるため、ゲーム制作に必要な機能をenchant.jsというライブラリをから利用することで簡単にゲーム制作を行います。

enchant.jsライブラリの使い方

このページから最新版をダウンロードしてください。

赤丸のところをクリックしていけばダウンロードができると思います。

 

ダウンロードしたデータにサンプルプログラムがあるので、これを参考にしましょう。

examplesフォルダにサンプルプログラムがあります。

これらのサンプルプログラムを見ながら、プログラムをいじることで、ゲーム制作に必要なプログラムの書き方は理解できると思います。

試しにbegineerフォルダ内のhellobearフォルダをクリックしましょう。

 

index.htmlをクリックすると、プログラムが起動します。すると、クマが右に動く画面を見ることができます。

これらのサンプルプログラムと

これで作業環境は整いました。次にプログラムを描くためのエディタについて話します。




エディタのインストール

javascriptはメモ帳などのテキストエディタがあれば作成可能です。

C言語などと違って、コンパイルがありません。ブラウザがプログラムを上から順に解読することで機能させることができます。

なので、この段階でもうプログラムを開始してもよいのですが、windows標準のメモ帳だと何かと不便なので以下の優秀なテキストエディタを紹介します。

・terapad

シンプルで使い勝手抜群です。

自動インデント機能や、タグごとに色付けされたり、エンコードをデフォルトのShift-Jisから国際標準のUTF-8に変更する際などに役立ちます。

・NotePad++

{ }内を省略して表示できる機能が便利。私は現在これを使ってjavascriptを書いています。

 




ブラウザゲーム制作に必要な最低限の構成

最後に、サンプルプログラムのhellobearを使ってenchantjsを用いたプログラムの構成についてお話します。

以下の四点を組み合わせることでブラウザゲームが完成します。

・ゲームを表示させるゲームページ(index.html)

・ゲームの動作を書くプログラムページ(main.js)

・各種プログラムをライブラリ(enchant.js)

・素材(chara1.pngなどの画像・音データ)

各データの関係についてですが、

index.htmlにて、プログラムであるmain.jsとライブラリのenchant.jsを読み込ませて、

main.jsにて必要な画像・音を読み込ませます。

以上で基本的な環境設定は終わりました。enchant.jsのプログラムの書き方はまた説明します。

(おまけ)index.htmlのコード内容