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
63
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
Copilot Studio ハンズオン - 生成オーケストレーションモード
tomoyasasakimskk
0
100
Node.js 2025: What's new and what's next
ruyadorno
0
510
dbtとBigQuery MLで実現する リクルートの営業支援基盤のモデル開発と保守運用
recruitengineers
PRO
3
120
「れきちず」のこれまでとこれから - 誰にでもわかりやすい歴史地図を目指して / FOSS4G 2025 Japan
hjmkth
1
320
事業開発におけるDify活用事例
kentarofujii
2
310
LLMプロダクトの信頼性を上げるには?LLM Observabilityによる、対話型音声AIアプリケーションの安定運用
ivry_presentationmaterials
0
550
ガバメントクラウド(AWS)へのデータ移行戦略の立て方【虎の巻】 / 20251011 Mitsutosi Matsuo
shift_evolve
PRO
2
200
生成AI時代のセキュアコーディングとDevSecOps
yuriemori
0
130
「最速」で Gemini CLI を使いこなそう! 〜Cloud Shell/Cloud Run の活用〜 / The Fastest Way to Master the Gemini CLI — with Cloud Shell and Cloud Run
aoto
PRO
0
100
Wasmの気になる最新情報
askua
0
130
HR Force における DWH の併用事例 ~ サービス基盤としての BigQuery / 分析基盤としての Snowflake ~@Cross Data Platforms Meetup #2「BigQueryと愉快な仲間たち」
ryo_suzuki
0
230
プロダクトのコードから見るGoによるデザインパターンの実践 #go_night_talk
bengo4com
1
2.6k
Featured
See All Featured
Mobile First: as difficult as doing things right
swwweet
225
10k
Visualization
eitanlees
149
16k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
27k
Designing Experiences People Love
moore
142
24k
The Art of Programming - Codeland 2020
erikaheidi
56
14k
Navigating Team Friction
lara
190
15k
Optimising Largest Contentful Paint
csswizardry
37
3.5k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
49
3.1k
RailsConf 2023
tenderlove
30
1.3k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
Context Engineering - Making Every Token Count
addyosmani
7
260
Automating Front-end Workflow
addyosmani
1371
200k
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