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
600
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
280
Design Voice-First Games for Alexa
ryan403
0
40
AI Teaching Talk
ryan403
0
100
Cognitive Service
ryan403
0
84
jQuery & API Practices
ryan403
0
110
CSS Practices
ryan403
1
130
JavaScript Practices
ryan403
0
85
Web Programming - Lesson 6
ryan403
1
570
Web Programming - Lesson 7
ryan403
1
590
Other Decks in Technology
See All in Technology
新機能VPCリソースエンドポイント機能検証から得られた考察
duelist2020jp
0
210
UI State設計とテスト方針
rmakiyama
2
290
アップデート紹介:AWS Data Transfer Terminal
stknohg
PRO
0
170
バクラクのドキュメント解析技術と実データにおける課題 / layerx-ccc-winter-2024
shimacos
2
1k
成果を出しながら成長する、アウトプット駆動のキャッチアップ術 / Output-driven catch-up techniques to grow while producing results
aiandrox
0
180
5分でわかるDuckDB
chanyou0311
10
3.2k
NilAway による静的解析で「10 億ドル」を節約する #kyotogo / Kyoto Go 56th
ytaka23
3
370
ゼロから創る横断SREチーム 挑戦と進化の軌跡
rvirus0817
2
260
社外コミュニティで学び社内に活かす共に学ぶプロジェクトの実践/backlogworld2024
nishiuma
0
250
AWS re:Invent 2024 ふりかえり
kongmingstrap
0
130
ブラックフライデーで購入したPixel9で、Gemini Nanoを動かしてみた
marchin1989
1
510
alecthomas/kong はいいぞ / kamakura.go#7
fujiwara3
1
300
Featured
See All Featured
Navigating Team Friction
lara
183
15k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
32
2.7k
Rails Girls Zürich Keynote
gr2m
94
13k
Music & Morning Musume
bryan
46
6.2k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
38
1.9k
Building Better People: How to give real-time feedback that sticks.
wjessup
365
19k
Designing on Purpose - Digital PM Summit 2013
jponch
116
7k
Building Applications with DynamoDB
mza
91
6.1k
StorybookのUI Testing Handbookを読んだ
zakiyama
27
5.3k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
127
18k
Agile that works and the tools we love
rasmusluckow
328
21k
Art, The Web, and Tiny UX
lynnandtonic
298
20k
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