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
60
AI Teaching Talk
ryan403
0
120
Cognitive Service
ryan403
0
100
jQuery & API Practices
ryan403
0
140
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
共有と分離 - Compose Multiplatform "本番導入" の設計指針
error96num
2
630
La gouvernance territoriale des données grâce à la plateforme Terreze
bluehats
0
180
Platform開発が先行する Platform Engineeringの違和感
kintotechdev
4
570
Modern Linux
oracle4engineer
PRO
0
100
20250910_障害注入から効率的復旧へ_カオスエンジニアリング_生成AIで考えるAWS障害対応.pdf
sh_fk2
3
260
OCI Oracle Database Services新機能アップデート(2025/06-2025/08)
oracle4engineer
PRO
0
160
現場で効くClaude Code ─ 最新動向と企業導入
takaakikakei
1
250
JTCにおける内製×スクラム開発への挑戦〜内製化率95%達成の舞台裏/JTC's challenge of in-house development with Scrum
aeonpeople
0
230
AIエージェントで90秒の広告動画を制作!台本・音声・映像・編集をつなぐAWS最新アーキテクチャの実践
nasuvitz
0
160
Webブラウザ向け動画配信プレイヤーの 大規模リプレイスから得た知見と学び
yud0uhu
0
230
Django's GeneratedField by example - DjangoCon US 2025
pauloxnet
0
150
なぜスクラムはこうなったのか?歴史が教えてくれたこと/Shall we explore the roots of Scrum
sanogemaru
5
1.6k
Featured
See All Featured
Building Adaptive Systems
keathley
43
2.7k
Making the Leap to Tech Lead
cromwellryan
135
9.5k
The Art of Programming - Codeland 2020
erikaheidi
56
13k
Why Our Code Smells
bkeepers
PRO
339
57k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
The Power of CSS Pseudo Elements
geoffreycrofte
77
6k
A Tale of Four Properties
chriscoyier
160
23k
It's Worth the Effort
3n
187
28k
Context Engineering - Making Every Token Count
addyosmani
3
49
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
27k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
23
1.4k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
52
5.6k
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