代作Finite State Machines 程序、辅导js程序、辅导JS FSM Game Engine and Game
- 首页 >> OS编程Assignment 4
Finite State Machines
Due: June 20th, 2018 @ 21:00pm
Part 1: Create a FSM Diagram
Overview, Learning Goals and Grading
This assignment aims to give you experience with the language of finite-state machine
controllers. You will be creating a finite-state machine to describes the behavior of the "unlock
slide" interactor on the original iPhone (depicted below).
For this assignment, you will study the behavior of this cross-platform implementation of the
iPhone slider: http://demo.marcofolio.net/iphone_unlock/ (note that it does not function exactly
like the original iPhone slider, but does ensure that everyone is making a state machine for the
same interactor). Next, you will create a finite state machine diagram to represent the behavior
of this slider. This assignment aims to help you understand:
● The correct notation for representing finite state machines [15 pts]
○ Not required to use guards, but notation must be correct if they are used
○ Correctly using start and final state (i.e., no links out of final state)
○ Actions only specified on transitions
○ Good use of variable names, with accompanying descriptions of what the
variables represent
○ Correct use of higher and lower level events
● Complete in terms of the set of actions a user might take [15 pts]
○ Appropriate use of self transitions
○ Capturing all necessary events
○ Not capturing unnecessary events
What To Do
Create (or draw) the state diagram for the full dynamic behavior of the "unlock slide" interactor
on the iPhone. Note that this interactor has a number of subtle features where parts of the visual
appearance that change over time. In particular, the "slide to unlock" text has a highlighting
animation, the button returns to the start position when not dragged all the way to the right.
These need to be captured in your finite state controller. You can assume that you get an event
that marks the passage of time (at whatever interval is convenient). You can also assume
higher level events (such as entering a region). You can also make use of guards on your
transitions if you prefer. You can also assume the existence of an animate_text() method which
animates the text in parallel to any other input and a return_arrow() which animates the motion
of the button with the arrow on it back to its home position. We will revisit the implementation of
animation in a later assignment after learning more about it. In addition to your drawing, you
should also submit a description explaining each action in the the state machine and any
variables you used.
Part 2: Create a JS FSM Game Engine and Game
Overview, Learning Goals and Grading
In this part you will be implementing parts of a rudimentary game engine that uses a tablebased
finite state machine to describe the behavior of a canvas game. Similar to how you
created a drawing library and then used it to create a doodle in the last assignment, in this
assignment, you will be implementing the core functionality of a finite-state machine game
engine and then showing how it can be used to create a simple "game." After you implement the
game engine, it will accept a set of finite-state machines, which each describe the behavior of
different Actors in your game. The engine will then use these state machines to power a canvas
game. Thus, creating a game consists of building a set of finite state machine that describes the
behavior of the game's actors and then passing it to your game engine to run the game.
This assignment is meant to give you experience with using finite-state machines to manage
user interfaces. The rationale for using finite-state machines is that they simplify the task of
building complex interactive elements. They provide a concise language for how interactive
elements should respond to input over time. Also, this assignment is designed to give you
experience with input handling and event delivery and dispatch.
This assignment aims to help you understand the following:
● How to implement event dispatch [ 20 pts ]
○ How to implement events
○ How to implement multiple different dispatch policies (positional, focus, etc.)
○ How to pick dispatch policy
○ Reporting damage and redrawing
● How to implement a generic reusable finite-state machine engine [ 20 pts ]
○ Transitions
○ Mapping events to state transitions and actions
○ Guards
● Separation of concerns between application architecture output and the application
developer by creating your own game [ 20 pts ]
○ How to define interactive behavior using finite state machines
○ How to use higher-level events to have allow actors to communicate.
○ Animation
● Style [ 10 pts ]
Files Provided
Here is the starter code for A3 part 2. It contains the following files:
● game.js - JavaScript file that serves as the game engine, and is the root of the game.
● actor.js - JavaScript file that should hold an actor's information and its FSM
● actions.js - JavaScript file that has a list of predefined actions for use in the FSMs.
● statemachinetest.html - HTML file that goes with statemachine_test.js
● statemachine_test.js - Tester "game" for you to start from
● statemachinetest.css - CSS file that goes with statemachinetest.html
● statemachinetest.mov - a video of what the test game should look like.
● *.png - A set of icons to use as the actor images
Implement the Game Engine
Before creating your game, you must implement the core functionality of the game engine,
defined by the Game, Actor, and Action classes. A game is defined by a Game object, which
models a game using state machines on an HTML5 Canvas. A "game" is composed of several
actors, which each have their own state machine. The game object also handles input and
event dispatch (including focus and positional dispatch and dragging). In particular, when the
game (i.e., the canvas) receives input, it needs to deliver the events to the appropriate actors.
The Actor objects will be built on a generic state machine implementation. Each actor will
contain actor information (e.g., an image and x,y location) and will know how to draw itself
according to a simple absolute position layout. Additionally, each actor will have a state machine
that describes its behavior. When an event is delivered to an actor, it will use its state machine
to determine whether to take any actions and how to update its state. The actions specified by
the state machine are events that trigger behavior in the canvas (e.g., animating an object).
Finite-State Machine Specification
For this project, an actor's state machine will be described as a JavaScript object (in JavaScript
Object Notation, or JSON) indexed by state names and transitions, both of which must be
unique. Stored at each state and transition is another JSON object that contains actions (a list of
actions to execute on transition), endState (the state to transition to), and, optionally, predicate
(which specifies a test that must be met for the transition to occur). Each action in the action list
should take a parameter specifying the event that just happened, the runtime parameters, and
the actor this state machine is attached to (so that your functions can make modifications to the
elements themselves). Below is an example of part of a state machine specification for a
draggable actor. State machine descriptions are also provided for you in statemachinetest.js:
var sampleFSM = {
"start": {
//Event type names
"mousedown": {
//Actions to be called
actions: [{
func: record_down_location
}],
//Predicate to be called (halts if it returns false)
predicate: function(event) { return true },
//End state name
endState: "down"
},
"down": {
"mouseup": {
actions: [{
func: do_drop
}],
endState: "start"
},
"mousemove": {
actions: [{
func: move_icon,
params: { new_icon: 'test.png' }
}],
endState: "down"
}
}
};
Specifically, the object breaks down as such:
● Finite-state machine [Object indexed by state names]
○ States [Object indexed by transitions / event.type] :
■ predicate: [Function] A predicate function (returns true / false) that
indicates if the transition can proceed (optional).
■ actions: [Array] An array of actions objects that will happen during the
transition