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
590
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
270
Design Voice-First Games for Alexa
ryan403
0
39
AI Teaching Talk
ryan403
0
95
Cognitive Service
ryan403
0
79
jQuery & API Practices
ryan403
0
98
CSS Practices
ryan403
1
130
JavaScript Practices
ryan403
0
84
Web Programming - Lesson 6
ryan403
1
560
Web Programming - Lesson 7
ryan403
1
590
Other Decks in Technology
See All in Technology
CData Virtuality 日本ローンチイベントのKeynote
cdataj
0
350
LeSSはスクラムではない!?LeSSにおけるスクラムマスターの振る舞い方とは / Scrum Master Behavior in LeSS
toma_sm
0
210
ゼロから実装まで!機械学習入門
natsuki0726
0
220
Applied NLP with LLMs: Beyond Black-Box Monoliths
inesmontani
PRO
0
100
受託開発でもアジャイル開発できました / Agile in Contract Development
takaking22
10
4.7k
入社半年(合計1年)でGoogle Cloud 認定を全冠した秘訣🤫
risatube
1
250
JAWS PANKRATION 2024 配信システムの紹介
yoshimi0227
0
110
Azure Verified Moduleを触って分かった注目ポイント/azure-verified-module-begin
mhrtech
1
520
Kubernetes Meetup Tokyo #67 - KEP-3619: Fine-grained SupplementalGroups Control / k8sjp67-kep-3619
everpeace
0
170
WSUSが非推奨に!? Windowsの更新管理を改めて勉強する!
ebibibi
0
370
地域DXにおけるGrafana活用事例
wacky
0
260
Develop to Survive - YAPC::Hakodate 2024 Keynote
moznion
8
3.1k
Featured
See All Featured
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
92
16k
Robots, Beer and Maslow
schacon
PRO
157
8.2k
How to train your dragon (web standard)
notwaldorf
87
5.6k
Building a Modern Day E-commerce SEO Strategy
aleyda
38
6.9k
The Mythical Team-Month
searls
218
43k
Building a Scalable Design System with Sketch
lauravandoore
459
33k
GitHub's CSS Performance
jonrohan
1030
450k
Mobile First: as difficult as doing things right
swwweet
222
8.8k
Web development in the modern age
philhawksworth
205
10k
Embracing the Ebb and Flow
colly
84
4.4k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
231
17k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
46
2k
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