Person in the Lottery Machine でロト6を当てよう！

こんにちは:D

:DaVです。

夏も後半戦になりましたね。

皆さんはお盆をどのようにお過ごしでしたか？？

私は相変わらず家に引きこもってました:)

コロナの影響で祭りなんかも自粛しているところが多く、ちょっと残念ですよね。。。

私の地元では例年「だるま祭り」という達磨をわっしょいするお祭りがあるのですが、例にもれず中止とのこと。

小規模な祭りですが、なんだかんだ楽しみにしていたのでコロナが落ち着いたら見に行きたいと思った今日この頃です。

…それはさておき、今回はwebコンテンツを創作したので紹介をしたいと思います！

宝くじ好きの方々必見です:D

Person in the LOTTERY MACHINE
おわりに

Person in the LOTTERY MACHINE

宝くじ購入の際、数字選びって結構難しいですよね。

そんな時に活用できるのが「Person in the LOTTERY MACHINE」です！

Person in the LOTTERY MACHINEって？

「宝くじ+遊び」をテーマにした、ロト6の数字をいい感じに選ぶためのWebコンテンツです。

タイトルの通り「抽選機の中の人(?)」を操作していい感じにピックアップします。

宝くじの数字選びをエキサイティングにしたい！

そんなあなたにオススメです:D

工夫したとこ

機械的にランダム抽出するのではなくあえて「マニュアル操作」の要素を加えました！

既存の数字予想サイトやアプリでは、過去のデータをもとにした抽選やクイックピックなんかができたりしますよね。

それはそれでとても魅力的ではありますが、個人的に無機質な感じがしたので「ライブ感」を持たせてゲーム感覚で楽しめるようにしてみました:)

ちょっとアナログな要素があると自分で選んでる感が出て良いと思いませんか？？

のほほ～んとやりましょう:D

開発について

WebGLのライブラリである「Three.js」を用いて作成しました:D

Three.jsの公式ページはこちらです！

物理エンジンは「Cannon.js」を使用しています。

特に何も特殊なことはしておらず突貫工事で作りました。。。

背景はトゥーンな感じにしたかったので背景用の箱を作って裏側に自作テクスチャを張る感じで作ってみました。

こんな感じにだいぶごり押してます。

function createBackgroundBox() {
  var backgroundMat = [
    new THREE.MeshLambertMaterial({ map: textureLoader.load('assets/texture/background.png'), side: THREE.BackSide }),
    new THREE.MeshLambertMaterial({ map: textureLoader.load('assets/texture/background.png'), side: THREE.BackSide }),
    new THREE.MeshLambertMaterial({ map: textureLoader.load('assets/texture/background.png'), side: THREE.BackSide }),
    new THREE.MeshLambertMaterial({ map: textureLoader.load('assets/texture/background_bottom.png'), side: THREE.BackSide }), // bottom
    new THREE.MeshLambertMaterial({ map: textureLoader.load('assets/texture/background.png'), side: THREE.BackSide }),
    new THREE.MeshLambertMaterial({ map: textureLoader.load('assets/texture/background.png'), side: THREE.BackSide })
  ];

  var backgroundBox = new THREE.Mesh(new THREE.BoxGeometry(150, 150, 150), backgroundMat);
  backgroundBox.doubleSided = true;

  scene.add(backgroundBox);
}

boxの裏面だけ使用しているのでdoubleSidedじゃなくてbackSidedで良かったですね…

本コンテンツのソースコードはめちゃくちゃ汚いですが、もし気になる方は開発者ツールで覗いてみてください:D

遊び方

遊び方はいたってシンプル！

ボールを穴に落とすだけです！

PCの場合は

「WASD」 or 「↑←→↓」キーで移動

「ドラッグ」「ホイール」で視点操作

モバイルの場合は

「joy stick」で移動

「ドラッグ」「ピンチ」で視点操作

となります。

先に落とした6個のボールに書かれている数字があなたの選んだ数字になります。

※PC版のほうが安定してます。。。

※safariを使用するとjoyStickのドラッグ時に画面もズレちゃうバグがあります。。。

実際にプレイしてみよう！

ということで実際のページがコチラです↓

Person in the Lottery Machine

エキサイティングなロト6数字抽選機「Person in the LOTTERY MACHINE」です。キャラクターを操作してボールを穴に落としましょう。普通のランダムな数字ピックに飽きたあなたにオススメです。webglライブラリのthree.jsを使用しています。ナンバーズやロト7、ミニロト等の他の宝くじも対応予定です...

是非プレイしてみてください:D

開発の所感

今回初めてThree.jsに触れてみたのですが、簡単に3D表現ができるって凄いことですね！

公式ページのexampleや、先駆者の方々の記事を見てるだけでもワクワクしました:D

とりあえず形にできたので良かったです:)

ただ、私レベルの技術力ではまだまだ苦戦する箇所が多く妥協したところも多々あるので、コツコツ勉強して拡張していけたらなあという感じです。

…本当はマップやキャラクターにBlenderで作成したGLTFファイル(.glb/gltf)を使用したかったのですが、物理エンジンの取り扱いがよく分からず衝突判定の実装ができなかったので、時間を空けてまた挑戦したいと思います:(

ちなみによくThree.jsと比較されている3Dゲームエンジンの「Babylon.js」も利用してみましたが、所感としてはドキュメントも整理されていてサンプルも見やすいのですが、Three.jsよりカメラ制御や処理の高速化も難しかった感じがしました。

今度気が向いたら記事にしたいと思います:D

おわりに

いかがでしたでしょうか！

宝くじ、皆さんも買いたくなりました？？

今はロト6だけですが、ナンバーズやミニロト、ロト7等、ほかの宝くじの数字選びもできるようにしていこうかなぁと思ってます。

「Person in the LOTTERY MACHINE」

ぜひプレイしてみてください:D

それでは、また！

【ロト6を当てよう】Three.js製の宝くじ番号抽選機