Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
phina.jsで弾幕シューティングを作る / Creating a bullet-hell ...
Search
Hiroya-W
November 23, 2023
Technology
0
92
phina.jsで弾幕シューティングを作る / Creating a bullet-hell shooter with phina.js
Hiroya-W
November 23, 2023
Tweet
Share
More Decks by Hiroya-W
See All by Hiroya-W
PSRにのっかってバックエンドサーバを書く / Write a backend server using PSR
hyuyukun
0
22
ピアノ経験ゼロからピアノを練習して弾いてみた / I practiced and played the piano from zero piano experience.
hyuyukun
1
68
Blenderに入門しました / I started to use Blender
hyuyukun
0
100
気軽にパソコンを吹き飛ばせるようにするために / To initialize your computer easily
hyuyukun
0
42
僕っぽいことを喋るBotをマストドンで育てています / I'm growing a bot on mastodon that talks like me.
hyuyukun
0
70
4年と半年かけてようやくフロントエンドを書けるようになった / It took me 4 years and 6 months to be able to write the frontend
hyuyukun
0
270
Neofetchライクな自己紹介ツールyuyufetchを作った / Created yuyufetch, a Neofetch-like self-introduction tool
hyuyukun
1
210
世界観を考察するのが好き?Sound Horizonはいいぞ / Introduction to Sound Horizon
hyuyukun
0
950
夏インターンと趣味開発 / Summer Internships and Hobby Development
hyuyukun
0
60
Other Decks in Technology
See All in Technology
不動産売買取引におけるAIの可能性とプロダクトでのAI活用
zabio3
0
270
AI活用したくてもできなかった不動産SaaSの今とこれから
nealle
0
330
OR学会2024秋_短期収益と将来のオフ方策評価性能を考慮したクーポン割当方策混合比の決定
recruitengineers
PRO
4
460
watsonx.ai Dojo 環境準備について
oniak3ibm
PRO
0
300
アプリをリリースできる状態に保ったまま 段階的にリファクタリングするための 戦略と戦術 / Strategies and tactics for incremental refactoring
yanzm
6
1.4k
サーバレスでモバイルアプリ開発! NTTコム「ビジネスdアプリ」のアーキテクチャ / The architecture of business d app
nttcom
12
240
Road to Single Activity
yurihondo
2
240
Envoy External AuthZとgRPC Extensionを利用した「頑張らない」Microservices認証認可基盤
andoshin11
0
250
可視化により内部品質をあげるAIドキュメントリバース/20240910 Hiromitsu Akiba
shift_evolve
0
220
ナレッジグラフとLLMの相互利用
koujikozaki
0
420
「自動テストのプラクティスを効果的に学ぶためのカードゲーム」 ( #sqip2024 )
teyamagu
PRO
2
180
Oracle Autonomous Database:サービス概要のご紹介
oracle4engineer
PRO
1
7.1k
Featured
See All Featured
Building a Modern Day E-commerce SEO Strategy
aleyda
36
6.8k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
23
1.7k
jQuery: Nuts, Bolts and Bling
dougneiner
61
7.4k
A Philosophy of Restraint
colly
202
16k
The Mythical Team-Month
searls
218
43k
Designing on Purpose - Digital PM Summit 2013
jponch
114
6.8k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
43
2k
Automating Front-end Workflow
addyosmani
1365
200k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
502
140k
How to Ace a Technical Interview
jacobian
274
23k
StorybookのUI Testing Handbookを読んだ
zakiyama
26
5.1k
The Art of Programming - Codeland 2020
erikaheidi
48
13k
Transcript
QIJOBKTͰ ນγϡʔςΟϯάΛ ࡞Δʂ ゆゆ君(@Hyuyu_kun) in あくあたん工房 2023/11/23
2 phina.js: JavaScript で作られたゲームライブラリ https://phinajs.com
サンプル 3 https://phinajs.com
4 Runstant: ブラウザ上で動作するエディタ&プレビュー https://runstant.com
phina.jsでサクッと作って動かしてシェア! 5
6 弾幕シューティング 怒首領蜂 東方Project https://store-jp.nintendo.com/list/software/70010000046176.html https://www.youtube.com/watch?v=VL5VZuUcX74
7 弾幕シューティング 怒首領蜂 東方Project 自機 https://store-jp.nintendo.com/list/software/70010000046176.html https://www.youtube.com/watch?v=VL5VZuUcX74
8 弾幕シューティング 怒首領蜂 東方Project 敵 https://store-jp.nintendo.com/list/software/70010000046176.html https://www.youtube.com/watch?v=VL5VZuUcX74
9 弾幕シューティング 怒首領蜂 東方Project 弾幕 https://store-jp.nintendo.com/list/software/70010000046176.html https://www.youtube.com/watch?v=VL5VZuUcX74
弾幕を避けながら敵を倒していくゲーム 10 中には美しい弾幕もあって綺麗
phina.jsで弾幕シューティングを作ってみる 11
12 参考書 https://www.amazon.co.jp/dp/4797352299
phina.jsで弾幕を作ってみる n 今回作ってみた弾幕 • 方向弾 • 渦巻弾 • 多方向渦巻弾 •
両回転渦巻弾 • 旋回加速渦巻弾 • 両回転渦巻弾 + 旋回加速渦巻弾 • 洗濯機渦巻弾 13
14 弾の実装 // 初期位置 // 発射角度(0.0~1.0) // 弾の進行方向の変化量 // 弾の初速
// 弾の加速度 // 移動方向 // 弾の進行方向を変化 // 弾の速さを変化
方向弾 15 // 下方向 速さ20
16 渦巻弾(方向弾を回転させればOK) // 発射方向を変化させる
17 多方向渦巻弾 // 発射数を指定できるように
18 多方向渦巻弾 // 発射数分の弾を生成 // それぞれ方向を変えて this.shotCount == 4の時、 i
/ this.shotCountは0.0, 0.25, 0.5, 0.75と変化する 右, 下, 左, 上
19 多方向渦巻弾 弾の密度を変えられるようにしたい
20 多方向渦巻弾 // 増やした
21 多方向渦巻弾 // this.timeはthis.interval回に1回0になる == 間引く
22 両回転渦巻弾 回転方向を2つ取るようにする - 時計回り - 反時計回り
23 両回転渦巻弾 // 両回転 // それぞれ発射回数分 // それぞれの回転方向
24 両回転渦巻弾 ちなみに、両回転の変化量を揃えてしまうと 簡単な弾幕になってしまう
25 旋回加速渦巻弾 ←旋回 加速→
26 旋回加速渦巻弾
27 両回転渦巻弾 + 旋回加速渦巻弾 2種類の弾幕を発射してくる敵(CombinedSpiralShooter)として実装
28 洗濯機渦巻弾 右巻き 右巻き→左巻き 左巻き 左巻き→右巻き
29 洗濯機渦巻弾 -maxShotAngleRate ~ maxShotAngleRate // 発射角度 -maxBulletAngleRate ~ maxBulletAngleRate
// 旋回角度 の範囲で変化させて右巻きになったり、左巻きになったりする
30 洗濯機渦巻弾 // 右巻き→左巻き // の値の変化は // 250: 1 //
275: 0 // 300: -1
31 Runstantで公開しているので遊んでみてね https://runstant.com/Hiroya-W/projects/caa17791
おしまい 32