へたれエンジニアが結婚式に向けてIPPON GP風な遊びが出来る「KEKKON GP」を作ってみた (html5 + js)

icon-calendar 2018/12/20 エンジニアリング

どーもへたれエンジニアです。
先日結婚式があったんですが、大好きなIPPON GPっぽいことを主役の自分たち主導でやるという一歩間違えればとんでもないことになりかねない事をやってみたのでそのコードを公開します(ややウケくらいで終わったので公開です

作ったものに関して

こんな感じでIPPON GP風の画面にWebカメラの映像が重なります

スクリーンショット 2018-12-09 17.41.18

ちゃんとIPPONパラメータが動きます

スクリーンショット 2018-12-09 17.41.59

止めたり動かしたりして、最終的に全てのパラメータが超えると IPPONもとい「KEKKON」となります

スクリーンショット 2018-12-09 17.36.49

作り方に関して

html5 + js って感じで作りました

IPPON GP風の動画演出部分は AdterEffect で動画編集したものを webm形式に変換して出力してます
図のような感じでcanvasにvideoタグを描画させ、それをcssで重ね合わせて描画しました

スクリーンショット 2018-12-12 12.03.45

そんな感じなのでポイント計算機能とかありません、演出のみ作り込んでます

デモ

こちらにアップしてます。 aキーで実行され、sキーで停止、0キーで初期化されます

※こちらローカルではないためカメラ実行が出来ません。その場合はgithubでcloneして実行してください

けっこーんの声、僕の声をいじってます・・・・笑

githubにも公開しました

https://github.com/maruty/kekkonGP

コメント

コメントを書く

メールアドレスが公開されることはありません。

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

post date*

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)