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
Web Programming - Lesson 4
Search
Ryan Chung
April 10, 2020
Technology
0
640
Web Programming - Lesson 4
Ryan Chung
April 10, 2020
Tweet
Share
More Decks by Ryan Chung
See All by Ryan Chung
MovieBot Development
ryan403
0
300
Design Voice-First Games for Alexa
ryan403
0
59
AI Teaching Talk
ryan403
0
120
Cognitive Service
ryan403
0
100
jQuery & API Practices
ryan403
0
130
CSS Practices
ryan403
1
160
JavaScript Practices
ryan403
0
100
Web Programming - Lesson 6
ryan403
1
620
Web Programming - Lesson 7
ryan403
1
630
Other Decks in Technology
See All in Technology
生成AIでセキュリティ運用を効率化する話
sakaitakeshi
0
580
実践!カスタムインストラクション&スラッシュコマンド
puku0x
0
350
共有と分離 - Compose Multiplatform "本番導入" の設計指針
error96num
1
370
サラリーマンの小遣いで作るtoCサービス - Cloudflare Workersでスケールする開発戦略
shinaps
2
410
Automating Web Accessibility Testing with AI Agents
maminami373
0
1.2k
Platform開発が先行する Platform Engineeringの違和感
kintotechdev
4
540
開発者を支える Internal Developer Portal のイマとコレカラ / To-day and To-morrow of Internal Developer Portals: Supporting Developers
aoto
PRO
1
440
Webアプリケーションにオブザーバビリティを実装するRust入門ガイド
nwiizo
6
770
オブザーバビリティが広げる AIOps の世界 / The World of AIOps Expanded by Observability
aoto
PRO
0
350
RSCの時代にReactとフレームワークの境界を探る
uhyo
10
3.4k
研究開発と製品開発、両利きのロボティクス
youtalk
1
520
なぜスクラムはこうなったのか?歴史が教えてくれたこと/Shall we explore the roots of Scrum
sanogemaru
5
1.6k
Featured
See All Featured
Embracing the Ebb and Flow
colly
87
4.8k
What's in a price? How to price your products and services
michaelherold
246
12k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
Side Projects
sachag
455
43k
GraphQLの誤解/rethinking-graphql
sonatard
72
11k
BBQ
matthewcrist
89
9.8k
Context Engineering - Making Every Token Count
addyosmani
1
33
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
18
1.1k
The Cost Of JavaScript in 2023
addyosmani
53
8.9k
Mobile First: as difficult as doing things right
swwweet
224
9.9k
Art, The Web, and Tiny UX
lynnandtonic
302
21k
Transcript
Web Programming –
[email protected]
行動開發學院 行動開發學院 JavaScript Lab RPG極簡雛形製作 Ryan
Chung 76
Web Programming –
[email protected]
行動開發學院 行動開發學院 需求 • 做一個九宮格可以移動的遊戲雛形 •
可以移動主角,但不會走出範圍 • 可以判斷遇到人、障礙物 • 可以判斷走到終點 • 主角的圖案跟方向一致 77
Web Programming –
[email protected]
行動開發學院 行動開發學院 檔案 • index.html:主要顯示頁面 •
main.js:主要程式運作 • style.css:網頁樣式檔 • images:存放圖片的資料夾 (https://ppt.cc/fN2Eox) 78
Web Programming –
[email protected]
行動開發學院 行動開發學院 index.html • 標題、canvas、div、p 79
Web Programming –
[email protected]
行動開發學院 行動開發學院 style.css 80
Web Programming –
[email protected]
行動開發學院 行動開發學院 main.js • 全域變數宣告、事件觸發 81
Web Programming –
[email protected]
行動開發學院 行動開發學院 main.js • 設定地形、擺上主角 82
Web Programming –
[email protected]
行動開發學院 行動開發學院 main.js • 擺上障礙物、敵人 83
Web Programming –
[email protected]
行動開發學院 行動開發學院 編號與座標的對應 0 1 2
3 4 5 6 7 8 (0,0) (200,0) (400,0) (0,200) (0,400) (200,200) (200,400) (400,200) (400,400) 84
Web Programming –
[email protected]
行動開發學院 行動開發學院 main.js 85 • 按鍵判斷
• 座標設定 • 排除其他狀況
Web Programming –
[email protected]
行動開發學院 行動開發學院 main.js • 判斷目標位置是否在邊界內 •
判斷目標位置是否有障礙物/敵人 86
Web Programming –
[email protected]
行動開發學院 行動開發學院 main.js • 依據目標位置內容,顯示提示訊息於下方 87
Web Programming –
[email protected]
行動開發學院 行動開發學院 總算完成!進行測試 • 主角是否會走出邊界? •
是否遇到障礙物、敵人會無法走,並出現訊息 • 是否有判斷抵達終點? • 是否有依方向轉頭? 88
Web Programming –
[email protected]
行動開發學院 行動開發學院 Recap • HTML –canvas、div、id
• JavaScript –image load、canvas draw image、cut image –for ... in、array、switch –keydown、preventDefault • 資料檔案 –圖片 89
Web Programming –
[email protected]
行動開發學院 行動開發學院 Lab • 可以16 x
16嗎? • 一個物品可以跨越多格嗎? • 如何寫出小精靈? • 如何寫出OOXX遊戲? • 加一顆按鈕攻擊敵人 90