Web Application Practice

Tizen v2.3

2015. 11

Creating New Project

2

Creating New Project

Enter a project name

3

Creating New Project

4

Creating New Project

Select your icon image

5

Creating New Project

Changed to your icon image

6

Functions of Application

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

Basic UI

Create a Base UI

Index.html

Header

Content

footer

10

Create a Base UI

Index.html

Id = target

Id = ball

Id = time Id = score

Id =background

11

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

Create a Base UI

Execution Result

It is empty because words didn’t write

anything to id=time, scroe in index.html.

13

Main Operation of Application

Application Modeling

main.js

ball.js target.js

game.js

Create a object

Create and

start a object

15

Create a object

Accelerometer

Gravity

16

+X -X

+Y

-Y

-Z

+Z

Acceleration

Gravity

Acceleration

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;

}

Move a ball with Sensor feature

Add ball.js, game.js

Enter a file name

18

Move a ball with Sensor feature

ball.js

19

Move a ball with Sensor feature

game.js main.js

20

Move a ball with Sensor feature

Index.html

Add ball.js and game.js in index.html

file

21

Move a ball with Sensor feature

Execution Result

You can move ball

with gravity sensor.

but, it is over the

edge.

22

Check boundaries of a ball

Add checkBoundaries function

Now, you can move the ball

in background boundary. 23

Create a random target

Add target.js

24

Create a random target

target.js

25

Create a random target

game.js

Create a target and update

images on screen

main.js

26

Create a random target

index.html

Add target.js in index.html file

27

Create a random target

Execution Result

Check whether the target is changed or not.

28

Check a collision

between the ball and the target on screen

game.js

29

Additional Operation of Application

Increase a score

game.js

31

Increase a score

Execution Result

Update the score when the ball collide

with the target.

32

Set a countdown timer

game.js

33

Set a countdown timer

Execution Result

34

GitHub Repository

https://github.com/mmme705/SensorGame.git

35