State Transition Design and Handling

Agenda
State for a simple application Some enhancements Non-deterministic case:
real example problem solving

Simple State Diagram

A ball appears Click/tap on the ball to make it flickering Click on the ball again to make it scattered

State Diagram

From Diagram to Real Code

From Diagram to Real Code

.pragma library var INIT_BALL = 0; var SELECT_BALL = 1; var ALIVE_BALL =2 ; var DEATH_BALL = 3; var RED_BALL = 0; var BLUE_BALL = 1; var GREEN_BALL = 2; var YELLOW_BALL =3; var PINK_BALL =4; var BROWN_BALL =5; var SKY_BALL =6;

From Diagram to Real Code

states: [ State{ name: "InitialState"; when: ballState == Constant.INIT_BALL PropertyChanges { target: img; opacity: 1; scale: 0.5} }, State{ name: "SelectedState"; when: ballState == Constant.SELECT_BALL PropertyChanges { target: img; opacity: 1; scale: 1} StateChangeScript { script: animation.start() } }, State { name: "DeathState"; when: ballState == Constant.DEATH_BALL StateChangeScript { script: particles.burst(50); } PropertyChanges { target: img; opacity: 0 } StateChangeScript { script: block.destroy(1000); } }

From Diagram to Real Code

MouseArea{ id: clickArea anchors.fill: parent onClicked:{ noClick++; if(noClick>=2) { noClick=0; ball.ballState=Constant.DEATH_BALL; } if(noClick==1){ ball.ballState = Constant.SELECT_BALL; } }

Counting Game For Children

Press the ball 3 times to make it scattered

Counting Game For Children

Press the ball 3 times to make it flickering, then press a button to scatter it

Fun Game for Children

Press the ball to make it flickering, continue pressing on the ball if liking doing this When having enough, press a button to scatter it

Fun Game for Children

The ball will be flickering at the first place. Continue pressing on the ball if interested When having enough, press a button to scatter it

Counting game for elementary

Click the ball as long as you want Can only finish by pressing the button if clicking at even times

Confusing game
Click the ball as long as you want Can only finish by pressing the button if clicking at n times, where n is dividable by 2 or 3

Compositional Game
Interface: One Ball Three buttons: Red, Blue and Yellow Mode 1 [Ball appears slowly, few points] only blue button allowed (force playing by left hand) Mode 2 [Ball appears fast, large points] only red button allowed (force playing by right hand) Switch from Mode 1 to Mode 2 by pressing Yellow

Compositional Game
Interface: One Ball Three Two buttons: Red, Blue and Yellow Mode 1 [Ball appears slowly, few points] only blue button allowed (force playing by left hand) Mode 2 [Ball appears fast, large points] only red button allowed (force playing by right hand) Switch from Mode 1 to Mode 2 by pressing nothing

 Interface: A ball and two buttons [Ctrn-Exit] [Waiting Mode]: Ball immobilized initially Action: Press Ctrn or click the ball to make it fly [Flying Mode]: Ball flying Action:
When the ball is clicked, if the click is right-positioned, the ball changes to Flickering Mode, otherwise it returns to Waiting Mode When Ctrn is pressed, the ball changes direction, still in Flying Mode When Exit is pressed, the ball stops

[Flickering Mode]: Ball flickers Action:

Press Ctrn button to stop flickering, the ball returns to [Flying Mode] When the ball is clicked, it changes the colors

Timer

function handleClick(){ type++; if(type >6) type=0; noClick++; if(noClick>=2) { noClick=0; ball.ballState=Constant.DEATH_ BALL; ballTimer.start(); } if(noClick==1){ ball.ballState = Constant.SELECT_BALL; } }

Timer

Timer

function createBall(inState) { if(component.status == Component.Ready){ ball = component.createObject(clickArea, {"type": type, "width": 40, "height": 40}); if(ball == null){ console.debug("error creating block"); console.log(component.errorString()); return false; } ball.ballState = inState; ball.anchors.centerIn = clickArea; }else{ console.debug("error loading block component"); console.log(component.errorString()); return false; } return true; }

Timer

function handleClick(){ if there is no ball start the timer to create new ball else select the ball } }

Timer

function createBall(inState) { create a new ball with new color }