VUE.

JS FRAMEWORK
DEVELOP SIMPLE GAME IN VUE FRAMEWORK
SWDVF301
Competence
RQF Level: 3 Learning Hours
120

Credits: 12

Sector: ICT & MULTIMEDIA

Trade: SOFTWARE DEVELOPMENT

Module Type: Specific

Curriculum: ICTSWD3002 - TVET Certificate 3 in Software Development

Copyright: © Rwanda TVET Board, 2022

Issue Date: June 2022

1200
 Upon completion of this specific module, trainees will be able to: Set
Purpose up environment, apply Vue framework and develop simple game in
statement Vue JS.

Training delivery 100% Assessment Total 100%

Theoretical content 30% 30%

Practical work:
Delivery Group project Formative
and 20% 50%
modality 70% assessment 70%
presentation
Individual project
50%
/Work
Summative Assessment 50%

Elements of Competency and Performance Criteria

Elements of
Performance criteria
competency
1.1.Tools are appropriately configured according to the Vue
framework

1.2. Packages are properly installed based on Vue framework

1: Set Up
Environment 1.3. Bootstrap is properly setup based on styling needs

1.4. Folders are precisely created based on the best practices

of the Vue framework

2.1. Routes are correctly created in line with project pages

2: Apply Vue 2.2. Reusable components are correctly developed in

Framework accordance with most reusable HTML elements

2.3 Form data are properly handled based on user story

 2.4. Form data are correctly validated based on user stories

2.5. Features are correctly developed in accordance with user

stories

2.6. API requests are correctly made in accordance with user

stories

2.7. State of data is appropriately managed in accordance with

user stories

3.1. Storyline is methodically created based on game objectives

3: Plan game 3.2. Game control is properly determined based on the storyline

3.3. Game interface is properly determined based on storyline

4.1. Game characters are properly designed based on the

storyline

4.2. Game environment is properly designed based on storyline

4: Develop Game
4.3. Game is correctly developed based on Vue framework

4.4. Game is correctly deployed based on static hosting

platform steps
 Course content
At the end of the module the learner will be able to:

1. Set up environment
Learning outcomes
2. Apply Vue framework
3. Plan game
4. Develop game

Learning outcome 1: Set Up Environment Learning hours: 20

Indicative content
● Description of key concepts

✔ CLI

✔ IDE

✔ Frontend

✔ Backend

✔ Single Page Application

✔ NodeJs & NPM

✔ Dependencies

✔ Environments

● Development

● Testing

● Production
✔ Introduce Vue JS Framework
●Vue project installation

✔ Install NodeJs
● Verify NodeJs installation

● Configure NPM
 ● Test javascript file using Nodejs

● Install Vue CLI with npm

● Initiate Vue Project using terminal

● Run Vue project

● Description of Vue project folder & files
✔ Node _modules
✔ Public folder
✔ src
✔ Asset
✔ Components
✔ helloWorld.vue
✔ app.vue
✔ main.js
✔ App.vue
✔ Package.json
✔ Vue.config.js
✔ .git ignore
✔ babel.config.js

Resources required for the learning outcome

Computer
Equipment
Projector

notebook
internet
Materials
pencil
pen
Text Editor (vscode)
Tools nodejs
vue framework
Demonstration and simulation
Facilitation Individual and group work
techniques Practical exercise
Individualized
 Group discussion
Written assessment
Presentation
Formative Performance assessment
assessment
methods /(CAT) Product based assessment
Project based assessment
Etc

Learning outcome 2: Apply Vue Learning hours: 30

framework
Indicative content
● Definition of key concepts

✔ Components

✔ Routes

✔ Vue lifecycle

✔ State management

✔ API Endpoint

✔ .env file
● Create folder structure

✔ Assets folder

✔ Source code folder

✔ Components

✔ Router folder

✔ Store folder

✔ Views folder
 ✔ Mixins folder
● Apply Vue component structure

✔ Create View components in views folder

✔ Create Reusable components in component folder

✔ Apply Bootstrap to Vue components
✔ Reuse components in multiple places
● Apply navigation in Vue project using router

✔ Install Router package (vue-router)

✔ Create javascript file in router folder

✔ Define routes array in router instantiation

✔ Create view components (pages)

✔ Declarative navigation

✔ Use nested routes

✔ Use parameters inside the router

✔ 404 Page
● Data manipulation in Vue

✔ Import necessary packages & components

✔ Apply Vue lifecycle methods

✔ Use Vue layout components

✔ Display JSON data in a table

✔ Use form in Vue component

● Create form inputs

● Input binding
● Validate form inputs

● Submit form data

● API requests

✔ Install axios package

✔ Configure axios in API helper file

✔ Use environment variable

✔ Fetch all CRUD APIs and display data to component

● Manage data using state management

✔ Definition of Key concepts

● Getter

● Action

● Mutation

● Dispatch

✔ Benefits of State management

✔ State managements

● Vuex

● Redux

● Pinia

✔ Install Vue DevTool in a browser

✔ Install state management(Vuex)

✔ Configure Vuex

✔ Define state modules

● State data
 ● Action
● Mutation
● Getters

✔ Store and retrieve data in state management

● Get data from state getters

● Commit mutations

● Dispatch actions

Resources required for the indicative content

Computer
Equipment
Projector

Notebook
internet
Materials
pencil
pen
Text Editor (vscode)
Tools nodejs
vue framework

Demonstration and simulation

Individual work
Facilitation Practical exercise
techniques Individualized
Trainer guided
Group discussion

Formative Written assessment

assessment
methods /(CAT) Oral presentation
 Performance assessment
Product based assessment
Project based assessment

Learning outcome 3: Plan game Learning hours:25

Indicative content
● Description of key concepts

✔ Game

✔ Game types

✔ Narrative

✔ Storyline

✔ Game controller

✔ Game Settings

✔ Game control

✔ Game HUD(heads-up display)

✔ Game characters

✔ Game environment

✔ Game interface

✔ Game consoles
● Description of the Game

✔ Definition of Game

● Game type

● Game objective

● Game target devices

 ● Game dimension

● Game perspective

● Creation of Narrative

✔ Storyline

✔ Sounds

✔ Background music

✔ Environment (scenery)

✔ Game level / reward level

✔ Mission: main and side

● . Game mechanics

✔ Key elements for defines game mechanics

● game hud (heads-up display)

● Steps of the game

● Scores

● Level

● Speed

● Time

● Target Device

✔ Determine game mechanics

● Identification of game controls/.

✔ Inputs/keys

✔ Hand accessibility
 ● Primary control: thumb and index

● Secondary control: Middle fingers

● Support: Ring & pinkie fingers

✔ Type of game controllers

● Identification of Game Interface

✔ Splashscreen

✔ Game characters

● Define playable characters

● Define Non-playable Characters

● Define characters relationship

● Characters Interactivity

● Elements of good characters

✔ Game environment

● Define Game Dimensions

● Define Game perspective

● Define Playing Zone / Game Boundaries

● Define Scenes of different levels

● Define design tools for environment

✔ Alert messages (success, failure, information, warning)
✔ Game Play Guide

Resources required for the indicative content

Computer
Equipment
projector
 - notebook
- internet
Materials
- pencil
- pen
- Illustrator

- Canvas HTML tag

Tools
- SVG HTML tag

- SASS

Lectures
Demonstration and simulation
Individual and group work
Facilitation
Practical exercise
techniques
Individualized
Trainer guided
Group discussion
Written assessment

Formative Oral presentation

assessment Performance assessment
methods /(CAT) Product based assessment
Project based assessment

Learning outcome 4: Develop Game Learning hours: 45

Indicative content

● Definition of key concepts

✔ Deployment
 ✔ Deployment/Hosting platforms

✔ Domain name

✔ SASS

✔ CANVAS

✔ SVG
● Design game interface

✔ Design game environment

● Setup Html Canvas

● Draw in canvas HTML tags using Js

● Style Environment using SASS

✔ Design environment components with SVG or Illustrator

✔ Design game HUD (heads-up display)

● Design Containers for game stats

● Design container for character stats

● Design container for character resources (armor, weapon, tools,...)

✔ Design game characters

● Design characters using Illustrator

● Design characters with SVG

● Develop game functionalities

✔ Develop Game Settings page/section

✔ Declare and Bind variables

✔ Setup animation speed

✔ Listen to Events
 ✔ Set up game conditions

✔ Setup random mechanisms to create diversity in the game

✔ Setup loops for repeatable actions including Non-playable character movements

✔ Develop SetIntervals for timed repeatable actions

✔ Setup incrementals for game scores and increase game difficulties

✔ Design and display Alert messages

✔ Store data in state management

● Deploy game project on Netlify

✔ Create deployment account

✔ Connect project with Git repository

✔ Configure deployment commands

✔ Create and merge PR on Github

✔ Success: Test Provided Netlify Domain

 Integrated/Summative assessment

Integrated situation

X Rwandan museum is a museum located in Musanze district, Muhoza sector, they have
a campaign directed toward educating children about historical figures and their
contribution to our history.

In the beginning this campaign was conducted via historians in the museum explaining
the children about those historical figures, but this method was ineffective since children
would get bored and stop paying attention.

X Rwandan Museum would like to hire a game developer, to build a game where children
would learn while having fun.

The game to develop will be a picture slider puzzle, where the user will get a picture with
pieces arranged randomly and will have to rearrange them by clicking on the piece to
move. the game must meet the following Instructions:

The puzzle will have 8 pieces and at the beginning the 9th slot will be empty
At the beginning the pieces will be arranged randomly and the sequence in which
will change every you reload or try again
The user can only move pieces next to the empty slot
the pieces will be numbered depending on their respective slot they belong to
The game will container 10 picture the player can unlock by completed the puzzle
The game ends when rearranged the piece to form a clear image accor
ding to the numbering order.

when the player wins the puzzle, they will get rewarded by scores and fun fact and
information about the historical figure
The pieces must be equal in size

The task must be done in 8 hours

All tools, materials and equipment are provided by the museum.

Resources

Tools

Equipment computer
Text Editor (vscode)
Tools nodejs
vue framework
notebook
internet
Materials/ Consumables
pencil
pen

Assessment Observation
Assessable criteria (Based on Marks
Indicator
outcomes performance Yes No allocation
criteria)

Set Up Tools are vscode is

appropriately 2
Environment configured
configured
(10%) nodejs
according to the 2
Vue framework is installed
 vuejs is
Packages are 2
configured
properly installed
based on Vue NPM is Configured 2
framework
SaSS is configured 2
folder structure
structure are
2
created
Routes are
Router package
correctly created
2
in line with project is Installed
pages
navigation in
Vue project using
2
router is used

Reusable
components in
Apply Vue 3
Framework component folder
Reusable properly created
(30%) components are
correctly Bootstrap
developed in
applied on those
accordance with 3
most reusable components
HTML elements
components are
used based to
3
multiple places

form inputs
Form data are 3
created
correctly validated
based on user Input binding
stories 3
implemented
 The form of
Inputs are 3
Validated

form data
3
submitted

Axios package is
3
installed

API requests are environment

correctly made in 3
variable is used
accordance with
user stories
CRUD APIs and
display data to
3
component are
fetched

state
management
4
State of data is (Vuex) is installed
appropriately
managed in state modules
accordance with 4
user stories defined

Data in state
management are 3
store and retrieve
Narrative is
Plan game Storyline is created 2
(20%) methodically
created based on Game mechanics
game objectives 3
is determined
 Inputs/keys
3
properly
Game control is
properly
Hand
determined based
on the storyline accessibility is 3
selected

Splash Screen is
selected 3

Game interface is
properly
characters is
determined based 3
on storyline selected
Game Play
Guide is created 3

Environments
are created using 4
Game environment HTML
is properly
Environments are
designed based on
storyline styled using 4
SASS
Develop
characters are
Game
(40) created using 4
HTML

Game characters characters are

are properly styled using 4
designed based
on the storyline SASS

characters are
interactive used 4
vue js
 deployment
account is 4
created

Project with Git

repository is 4
connected
Game is correctly
deployed based deployment
on static hosting
platform steps commands are 4
configured

PR on Github is
created and 4
merged

Link is shared 4

Total marks 100

Percentage Weightage 100%
Minimum Passing line % (Aggregate): 70%

References:

1. Smith, J. (Year). Setting Up the Development Environment for Game Development. Journal of
Game Development, volume(issue), page numbers. URL
2. Johnson, A. (Year). Integrating the Vue Framework in Game Development: Best Practices and
Case Studies. Game Development Quarterly, volume(issue), page numbers.
3. Williams, R. (Year). Game Planning and Design Strategies: A Comprehensive Guide.
International Journal of Game Design and Development, volume(issue), page numbers.
4. Brown, M. (Year). Game Development Techniques and Methodologies: A Comparative
Analysis. Journal of Interactive Entertainment, volume(issue), page numbers.
5. https://www.masterclass.com/articles/how-to-design-a-video-game-character#what-makes-a-
good-video-game-character
6. https://www.pluralsight.com/guides/getting-started-with-nodejs
7. https://fjolt.com/article/vue-lifecycle-hooks
8. https://tudip.com/blog-post/structure-a-large-scale-vue-js-application/
9. https://www.youtube.com/watch?v=sjYxRlwHvsM
10. https://www.youtube.com/watch?v=77rJ4g_aElU
11. https://www.youtube.com/watch?v=IxEg_Dr2utc(retrived on 26,June,2022)
12. https://WWW.openclassrooms.com/en/courses/5664336-create-a-web-application-with-vue-js
ACCRONYMS:

CLI: Command-Line Interface

IDE: Integrated development environment

NPM: Node Package Manager

CRUD: Create Read Delete

SASS: Syntactically awesome style sheets

SVG: Scalable Vector Graphics