Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Don’t just buy a new video game,
 make one! in JS!

Sponsored · Ship Features Fearlessly Turn features on and off without deploys. Used by thousands of Ruby developers. →
Avatar for yomotsu yomotsu
November 21, 2014
Programming
0
230

Don’t just buy a new video game,
 make one! in JS!

at JSONC Asia 2014

Avatar for yomotsu

yomotsu

November 21, 2014
Tweet

More Decks by yomotsu

See All by yomotsu
three.jsとRapierでレースゲームが3日でできた話
Avatar for yomotsu yomotsu
0
790
PBR in three.js
Avatar for yomotsu yomotsu
1
1k
dialog要素でつくるモーダルダイアログ
Avatar for yomotsu yomotsu
0
1k
IE to Edge
Avatar for yomotsu yomotsu
1
380
A Camera Control Library for three.js
Avatar for yomotsu yomotsu
1
1.4k
Let’s try AR
 on mobile Web with <model-viewer>
Avatar for yomotsu yomotsu
0
580
WebXR: Beyond
 WebGL
Avatar for yomotsu yomotsu
2
1.9k
Non-DOM components with WebGL in Vue.js
Avatar for yomotsu yomotsu
5
13k
WebGL Libs for
 WebApp Frameworks
Avatar for yomotsu yomotsu
4
7.9k

Other Decks in Programming

See All in Programming
The Ralph Wiggum Loop: First Principles of Autonomous Development
Avatar for Ryuichiro Semba sembayui
0
3.7k
Event Storming
Avatar for Henning Schwentner hschwentner
3
1.3k
コーディングルールの鮮度を保ちたい / keep-fresh-go-internal-conventions
Avatar for NAGATA Hiroaki handlename
0
110
AWS Infrastructure as Code の新機能 2025 総まとめ 〜SA 4人による怒涛のデモ祭り〜
Avatar for Kenji Kono konokenj
10
2.9k
AI活用のコスパを最大化する方法
Avatar for Ochtum ochtum
0
120
メタプログラミングで実現する「コードを仕様にする」仕組み/nikkei-tech-talk43
Avatar for 日本経済新聞社 エンジニア採用事務局 nikkei_engineer_recruiting
0
130
ご飯食べながらエージェントが開発できる。そう、Agentic Engineeringならね。
Avatar for yoko / Naoki Yokomachi yokomachi
1
270
朝日新聞のデジタル版を支えるGoバックエンド ー価値ある情報をいち早く確実にお届けするために
Avatar for JunkiIshida junkiishida
1
290
Amazon Bedrockを活用したRAGの品質管理パイプライン構築
Avatar for とすり tosuri13
5
900
CSC307 Lecture 13
Avatar for Javier Gonzalez-Sanchez javiergs
PRO
0
310
go directiveを最新にしすぎないで欲しい話──あるいは、Go 1.26からgo mod initで作られるgo directiveの値が変わる話 / Go 1.26 リリースパーティ
Avatar for Arthur arthur1
2
410
Claude Code、ちょっとした工夫で開発体験が変わる
Avatar for Toranosuke Minamikawa tigertora7571
0
190

Featured

See All Featured
The AI Search Optimization Roadmap by Aleyda Solis
Avatar for Aleyda Solis aleyda
1
5.3k
How Software Deployment tools have changed in the past 20 years
Avatar for Geshan Manandhar geshan
0
32k
Technical Leadership for Architectural Decision Making
Avatar for Kenny Baas-Schwegler baasie
2
270
Future Trends and Review - Lecture 12 - Web Technologies (1019888BNR)
Avatar for Beat Signer signer
PRO
0
3.2k
Six Lessons from altMBA
Avatar for Skipper Chong Warson skipperchong
29
4.2k
Navigating Team Friction
Avatar for Lara Hogan lara
192
16k
Accessibility Awareness
Avatar for Sarah Abderemane sabderemane
0
71
RailsConf 2023
Avatar for Aaron Patterson tenderlove
30
1.4k
Ecommerce SEO: The Keys for Success Now & Beyond - #SERPConf2024
Avatar for Aleyda Solis aleyda
1
1.8k
ラッコキーワード サービス紹介資料
Avatar for ラッコ株式会社 rakko
1
2.5M
Build The Right Thing And Hit Your Dates
Avatar for Maggie C. maggiecrowley
39
3.1k
Organizational Design Perspectives: An Ontology of Organizational Design Elements
Avatar for Dr. Kim W Petersen kimpetersen
PRO
1
620

Transcript

  1. 1 Don’t just buy a new video game,
 make one!

    in JS! Presented by Akihiro Oyamada (@yomotsu) Frontend Engineer at PixelGrid, Inc. Nov 21, 2014

  2. 2 Don’t just buy a new video game,
 make one!

    in JS! Presented by Akihiro Oyamada (@yomotsu) Frontend Engineer at PixelGrid, Inc. Nov 21, 2014

  3. 3 Hello!
 from Japan Frontend Engineer at PixelGrid, Inc. @yomotsu

  4. 4

  5. 5

  6. How dose it work? Why do glitches appear? 6

  7. I wanna make it! 7

  8. 8 https://yomotsu.github.io/walkthrough

  9. 9 https://www.youtube.com/watch?v=ABPyWx8puzs in IE 11 with touch

  10. 10 https://www.youtube.com/watch?v=xn8k0lEmKoU in Mobile Firefox on Android

  11. 11 iPhone6 or iPhone5s /w iOS8

  12. 12 https://www.youtube.com/watch?v=8qRwpHhD_hY

  13. http://goo.gl/xXOJNV 13

  14. 14

  15. 15 plus… a game collision lib I made

  16. 16 while moving on a slope…

  17. 17 Actual

  18. 18 Expect

  19. 19 http://0.0.0.0:8888/example/5_terrain.html

  20. 20 https://github.com/yomotsu/threefield.js • Collision detection /w Octree • Height field

    via THREE.js mesh • Camera vs walls collistion

  21. video games are 
 not just for fun 21

  22. 22 https://www.youtube.com/watch?v=6XvmhE1J9PY “Don’t just buy a new video game,
 make

    one” ʔ President Obama asks America to learn computer science

  23. Wanna make a game,
 in JS ? 23

  24. 24 Thank you! @yomotsu