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
37
AI Teaching Talk
ryan403
0
92
Cognitive Service
ryan403
0
76
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
手軽に始める? おうちサーバーのすゝめ
nyagasan
0
180
LLMに日本語テキストを学習させる意義
ksaito
13
3.4k
Estrategias de escalabilidade para projetos web
jessilyneh
1
160
バックログを導入し やっぱやめた話
ota42y
0
170
歴史と背景から改めて振り返るVPC
shotashiratori
2
220
日経電子版から始まった内製開発の現在地と向き合っている課題/inhouse
nishiuma
0
230
脆弱星に導かれて
nishimunea
1
1.5k
目標設定と習慣化で今よりも一歩生産性を上げる
sansantech
PRO
7
2.3k
CRTO/CRTL/OSEPの比較・勉強法とAV/EDRの検知実験
chayakonanaika
0
140
Oracle Database Backup Service:サービス概要のご紹介
oracle4engineer
PRO
0
4k
株式会社M2X エンジニアチーム紹介資料
m2xsoftware
0
320
夏休みの(最後の)宿題 for JuliaTokyo #12
antimon2
0
130
Featured
See All Featured
Optimising Largest Contentful Paint
csswizardry
28
2.7k
BBQ
matthewcrist
83
9.1k
Done Done
chrislema
180
16k
The Straight Up "How To Draw Better" Workshop
denniskardys
230
130k
Happy Clients
brianwarren
96
6.6k
Web Components: a chance to create the future
zenorocha
308
41k
Visualization
eitanlees
142
15k
Building Flexible Design Systems
yeseniaperezcruz
324
37k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
24
2k
Designing for humans not robots
tammielis
248
25k
How GitHub (no longer) Works
holman
309
140k
Teambox: Starting and Learning
jrom
131
8.7k
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