Web Application Practice Tizen v2 · Functions of Application ... Set a countdown timer 8 . Basic...
-
Upload
dangkhuong -
Category
Documents
-
view
238 -
download
4
Transcript of Web Application Practice Tizen v2 · Functions of Application ... Set a countdown timer 8 . Basic...
![Page 1: Web Application Practice Tizen v2 · Functions of Application ... Set a countdown timer 8 . Basic UI . Create a Base UI ... Add an event listener](https://reader034.fdocuments.net/reader034/viewer/2022051321/5adc74ac7f8b9a9d4d8bcfde/html5/thumbnails/1.jpg)
Web Application Practice
Tizen v2.3
2015. 11
![Page 2: Web Application Practice Tizen v2 · Functions of Application ... Set a countdown timer 8 . Basic UI . Create a Base UI ... Add an event listener](https://reader034.fdocuments.net/reader034/viewer/2022051321/5adc74ac7f8b9a9d4d8bcfde/html5/thumbnails/2.jpg)
Creating New Project
2
![Page 3: Web Application Practice Tizen v2 · Functions of Application ... Set a countdown timer 8 . Basic UI . Create a Base UI ... Add an event listener](https://reader034.fdocuments.net/reader034/viewer/2022051321/5adc74ac7f8b9a9d4d8bcfde/html5/thumbnails/3.jpg)
Creating New Project
Enter a project name
3
![Page 4: Web Application Practice Tizen v2 · Functions of Application ... Set a countdown timer 8 . Basic UI . Create a Base UI ... Add an event listener](https://reader034.fdocuments.net/reader034/viewer/2022051321/5adc74ac7f8b9a9d4d8bcfde/html5/thumbnails/4.jpg)
Creating New Project
4
![Page 5: Web Application Practice Tizen v2 · Functions of Application ... Set a countdown timer 8 . Basic UI . Create a Base UI ... Add an event listener](https://reader034.fdocuments.net/reader034/viewer/2022051321/5adc74ac7f8b9a9d4d8bcfde/html5/thumbnails/5.jpg)
Creating New Project
Select your icon image
5
![Page 6: Web Application Practice Tizen v2 · Functions of Application ... Set a countdown timer 8 . Basic UI . Create a Base UI ... Add an event listener](https://reader034.fdocuments.net/reader034/viewer/2022051321/5adc74ac7f8b9a9d4d8bcfde/html5/thumbnails/6.jpg)
Creating New Project
Changed to your icon image
6
![Page 7: Web Application Practice Tizen v2 · Functions of Application ... Set a countdown timer 8 . Basic UI . Create a Base UI ... Add an event listener](https://reader034.fdocuments.net/reader034/viewer/2022051321/5adc74ac7f8b9a9d4d8bcfde/html5/thumbnails/7.jpg)
Functions of Application
![Page 8: Web Application Practice Tizen v2 · Functions of Application ... Set a countdown timer 8 . Basic UI . Create a Base UI ... Add an event listener](https://reader034.fdocuments.net/reader034/viewer/2022051321/5adc74ac7f8b9a9d4d8bcfde/html5/thumbnails/8.jpg)
Functions of Application
Move a ball with Sensor feature
Check boundaries of a ball
Create a random target
Check a collision between the
ball and the target on screen
Increase a score
Set a countdown timer
8
![Page 9: Web Application Practice Tizen v2 · Functions of Application ... Set a countdown timer 8 . Basic UI . Create a Base UI ... Add an event listener](https://reader034.fdocuments.net/reader034/viewer/2022051321/5adc74ac7f8b9a9d4d8bcfde/html5/thumbnails/9.jpg)
Basic UI
![Page 10: Web Application Practice Tizen v2 · Functions of Application ... Set a countdown timer 8 . Basic UI . Create a Base UI ... Add an event listener](https://reader034.fdocuments.net/reader034/viewer/2022051321/5adc74ac7f8b9a9d4d8bcfde/html5/thumbnails/10.jpg)
Create a Base UI
Index.html
Header
Content
footer
10
![Page 11: Web Application Practice Tizen v2 · Functions of Application ... Set a countdown timer 8 . Basic UI . Create a Base UI ... Add an event listener](https://reader034.fdocuments.net/reader034/viewer/2022051321/5adc74ac7f8b9a9d4d8bcfde/html5/thumbnails/11.jpg)
Create a Base UI
Index.html
Id = target
Id = ball
Id = time Id = score
Id =background
11
![Page 12: Web Application Practice Tizen v2 · Functions of Application ... Set a countdown timer 8 . Basic UI . Create a Base UI ... Add an event listener](https://reader034.fdocuments.net/reader034/viewer/2022051321/5adc74ac7f8b9a9d4d8bcfde/html5/thumbnails/12.jpg)
Create a Base UI
style.css
ID Selector : To select a specific element by given ID. ( #background, #ball, #target)
Element Selector : To select all elements on a page. (html, body, ul, li )
Create images folder and
copy images into the folder.
12
![Page 13: Web Application Practice Tizen v2 · Functions of Application ... Set a countdown timer 8 . Basic UI . Create a Base UI ... Add an event listener](https://reader034.fdocuments.net/reader034/viewer/2022051321/5adc74ac7f8b9a9d4d8bcfde/html5/thumbnails/13.jpg)
Create a Base UI
Execution Result
It is empty because words didn’t write
anything to id=time, scroe in index.html.
13
![Page 14: Web Application Practice Tizen v2 · Functions of Application ... Set a countdown timer 8 . Basic UI . Create a Base UI ... Add an event listener](https://reader034.fdocuments.net/reader034/viewer/2022051321/5adc74ac7f8b9a9d4d8bcfde/html5/thumbnails/14.jpg)
Main Operation of Application
![Page 15: Web Application Practice Tizen v2 · Functions of Application ... Set a countdown timer 8 . Basic UI . Create a Base UI ... Add an event listener](https://reader034.fdocuments.net/reader034/viewer/2022051321/5adc74ac7f8b9a9d4d8bcfde/html5/thumbnails/15.jpg)
Application Modeling
main.js
ball.js target.js
game.js
Create a object
Create and
start a object
15
Create a object
![Page 16: Web Application Practice Tizen v2 · Functions of Application ... Set a countdown timer 8 . Basic UI . Create a Base UI ... Add an event listener](https://reader034.fdocuments.net/reader034/viewer/2022051321/5adc74ac7f8b9a9d4d8bcfde/html5/thumbnails/16.jpg)
Accelerometer
Gravity
16
+X -X
+Y
-Y
-Z
+Z
Acceleration
Gravity
Acceleration
![Page 17: Web Application Practice Tizen v2 · Functions of Application ... Set a countdown timer 8 . Basic UI . Create a Base UI ... Add an event listener](https://reader034.fdocuments.net/reader034/viewer/2022051321/5adc74ac7f8b9a9d4d8bcfde/html5/thumbnails/17.jpg)
Using Acceleration value
by DeviceMotion events
17
Add an event listener
Create an event handler
Window.addEventListener(‘devicemotion’, onDeviceMotion);
Function onDeviceMotion(event) {
var accelX = event.accelerationIncludingGravity.x;
var accelY = event.accelerationIncludingGravity.y;
var accelZ = event.accelerationIncludingGravity.z;
}
![Page 18: Web Application Practice Tizen v2 · Functions of Application ... Set a countdown timer 8 . Basic UI . Create a Base UI ... Add an event listener](https://reader034.fdocuments.net/reader034/viewer/2022051321/5adc74ac7f8b9a9d4d8bcfde/html5/thumbnails/18.jpg)
Move a ball with Sensor feature
Add ball.js, game.js
Enter a file name
18
![Page 19: Web Application Practice Tizen v2 · Functions of Application ... Set a countdown timer 8 . Basic UI . Create a Base UI ... Add an event listener](https://reader034.fdocuments.net/reader034/viewer/2022051321/5adc74ac7f8b9a9d4d8bcfde/html5/thumbnails/19.jpg)
Move a ball with Sensor feature
ball.js
19
![Page 20: Web Application Practice Tizen v2 · Functions of Application ... Set a countdown timer 8 . Basic UI . Create a Base UI ... Add an event listener](https://reader034.fdocuments.net/reader034/viewer/2022051321/5adc74ac7f8b9a9d4d8bcfde/html5/thumbnails/20.jpg)
Move a ball with Sensor feature
game.js main.js
20
![Page 21: Web Application Practice Tizen v2 · Functions of Application ... Set a countdown timer 8 . Basic UI . Create a Base UI ... Add an event listener](https://reader034.fdocuments.net/reader034/viewer/2022051321/5adc74ac7f8b9a9d4d8bcfde/html5/thumbnails/21.jpg)
Move a ball with Sensor feature
Index.html
Add ball.js and game.js in index.html
file
21
![Page 22: Web Application Practice Tizen v2 · Functions of Application ... Set a countdown timer 8 . Basic UI . Create a Base UI ... Add an event listener](https://reader034.fdocuments.net/reader034/viewer/2022051321/5adc74ac7f8b9a9d4d8bcfde/html5/thumbnails/22.jpg)
Move a ball with Sensor feature
Execution Result
You can move ball
with gravity sensor.
but, it is over the
edge.
22
![Page 23: Web Application Practice Tizen v2 · Functions of Application ... Set a countdown timer 8 . Basic UI . Create a Base UI ... Add an event listener](https://reader034.fdocuments.net/reader034/viewer/2022051321/5adc74ac7f8b9a9d4d8bcfde/html5/thumbnails/23.jpg)
Check boundaries of a ball
Add checkBoundaries function
Now, you can move the ball
in background boundary. 23
![Page 24: Web Application Practice Tizen v2 · Functions of Application ... Set a countdown timer 8 . Basic UI . Create a Base UI ... Add an event listener](https://reader034.fdocuments.net/reader034/viewer/2022051321/5adc74ac7f8b9a9d4d8bcfde/html5/thumbnails/24.jpg)
Create a random target
Add target.js
24
![Page 25: Web Application Practice Tizen v2 · Functions of Application ... Set a countdown timer 8 . Basic UI . Create a Base UI ... Add an event listener](https://reader034.fdocuments.net/reader034/viewer/2022051321/5adc74ac7f8b9a9d4d8bcfde/html5/thumbnails/25.jpg)
Create a random target
target.js
25
![Page 26: Web Application Practice Tizen v2 · Functions of Application ... Set a countdown timer 8 . Basic UI . Create a Base UI ... Add an event listener](https://reader034.fdocuments.net/reader034/viewer/2022051321/5adc74ac7f8b9a9d4d8bcfde/html5/thumbnails/26.jpg)
Create a random target
game.js
Create a target and update
images on screen
main.js
26
![Page 27: Web Application Practice Tizen v2 · Functions of Application ... Set a countdown timer 8 . Basic UI . Create a Base UI ... Add an event listener](https://reader034.fdocuments.net/reader034/viewer/2022051321/5adc74ac7f8b9a9d4d8bcfde/html5/thumbnails/27.jpg)
Create a random target
index.html
Add target.js in index.html file
27
![Page 28: Web Application Practice Tizen v2 · Functions of Application ... Set a countdown timer 8 . Basic UI . Create a Base UI ... Add an event listener](https://reader034.fdocuments.net/reader034/viewer/2022051321/5adc74ac7f8b9a9d4d8bcfde/html5/thumbnails/28.jpg)
Create a random target
Execution Result
Check whether the target is changed or not.
28
![Page 29: Web Application Practice Tizen v2 · Functions of Application ... Set a countdown timer 8 . Basic UI . Create a Base UI ... Add an event listener](https://reader034.fdocuments.net/reader034/viewer/2022051321/5adc74ac7f8b9a9d4d8bcfde/html5/thumbnails/29.jpg)
Check a collision
between the ball and the target on screen
game.js
29
![Page 30: Web Application Practice Tizen v2 · Functions of Application ... Set a countdown timer 8 . Basic UI . Create a Base UI ... Add an event listener](https://reader034.fdocuments.net/reader034/viewer/2022051321/5adc74ac7f8b9a9d4d8bcfde/html5/thumbnails/30.jpg)
Additional Operation of Application
![Page 31: Web Application Practice Tizen v2 · Functions of Application ... Set a countdown timer 8 . Basic UI . Create a Base UI ... Add an event listener](https://reader034.fdocuments.net/reader034/viewer/2022051321/5adc74ac7f8b9a9d4d8bcfde/html5/thumbnails/31.jpg)
Increase a score
game.js
31
![Page 32: Web Application Practice Tizen v2 · Functions of Application ... Set a countdown timer 8 . Basic UI . Create a Base UI ... Add an event listener](https://reader034.fdocuments.net/reader034/viewer/2022051321/5adc74ac7f8b9a9d4d8bcfde/html5/thumbnails/32.jpg)
Increase a score
Execution Result
Update the score when the ball collide
with the target.
32
![Page 33: Web Application Practice Tizen v2 · Functions of Application ... Set a countdown timer 8 . Basic UI . Create a Base UI ... Add an event listener](https://reader034.fdocuments.net/reader034/viewer/2022051321/5adc74ac7f8b9a9d4d8bcfde/html5/thumbnails/33.jpg)
Set a countdown timer
game.js
33
![Page 34: Web Application Practice Tizen v2 · Functions of Application ... Set a countdown timer 8 . Basic UI . Create a Base UI ... Add an event listener](https://reader034.fdocuments.net/reader034/viewer/2022051321/5adc74ac7f8b9a9d4d8bcfde/html5/thumbnails/34.jpg)
Set a countdown timer
Execution Result
34
![Page 35: Web Application Practice Tizen v2 · Functions of Application ... Set a countdown timer 8 . Basic UI . Create a Base UI ... Add an event listener](https://reader034.fdocuments.net/reader034/viewer/2022051321/5adc74ac7f8b9a9d4d8bcfde/html5/thumbnails/35.jpg)
GitHub Repository
https://github.com/mmme705/SensorGame.git
35