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
630
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
54
AI Teaching Talk
ryan403
0
110
Cognitive Service
ryan403
0
96
jQuery & API Practices
ryan403
0
130
CSS Practices
ryan403
1
150
JavaScript Practices
ryan403
0
98
Web Programming - Lesson 6
ryan403
1
610
Web Programming - Lesson 7
ryan403
1
620
Other Decks in Technology
See All in Technology
AIの全社活用を推進するための安全なレールを敷いた話
shoheimitani
2
640
United airlines®️ USA Contact Numbers: Complete 2025 Support Guide
unitedflyhelp
0
340
Reach American Airlines®️ Instantly: 19 Calling Methods for Fast Support in the USA
flyamerican
1
180
SREのためのeBPF活用ステップアップガイド
egmc
2
900
敢えて生成AIを使わないマネジメント業務
kzkmaeda
2
510
20250708オープンエンドな探索と知識発見
sakana_ai
PRO
4
860
United™️ Airlines®️ Customer®️ USA Contact Numbers: Complete 2025 Support Guide
flyunitedguide
0
780
LLM時代の検索
shibuiwilliam
2
640
Operating Operator
shhnjk
1
650
助けて! XからWaylandに移行しないと新しいGNOMEが使えなくなっちゃう 2025-07-12
nobutomurata
2
140
オフィスビルを監視しよう:フィジカル×デジタルにまたがるSLI/SLO設計と運用の難しさ / Monitoring Office Buildings: The Challenge of Physical-Digital SLI/SLO Design & Operation
bitkey
1
350
SEQUENCE object comparison - db tech showcase 2025 LT2
nori_shinoda
0
280
Featured
See All Featured
A Modern Web Designer's Workflow
chriscoyier
695
190k
[RailsConf 2023] Rails as a piece of cake
palkan
55
5.7k
Measuring & Analyzing Core Web Vitals
bluesmoon
7
510
It's Worth the Effort
3n
185
28k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
34
5.9k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.7k
How GitHub (no longer) Works
holman
314
140k
Embracing the Ebb and Flow
colly
86
4.7k
RailsConf 2023
tenderlove
30
1.1k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
740
Large-scale JavaScript Application Architecture
addyosmani
512
110k
Visualization
eitanlees
146
16k
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