Skip to content
Go to file

Latest commit


Git stats


Failed to load latest commit information.
Latest commit message
Commit time


This project is a simple Rock-Paper-Scissors game written in Angular 5.

The app uses the caching and offline functionality of Service Worker.

Start the application

First npm install to install all necessary dependencies.

Then npm start to launch the application. It will be available at http://localhost:4200.


The complete RPS game code is bundled in the RpsModule in src/app/rps-module.

All game-specific logic can be found at src/app/rps-module/shared. This includes the models, service and utility functions.

The UI components can be found at src/app/rps-module/components.

How it works

The whole application relies on the GameState:

export interface GameState {
    human: RockPaperScissors;
    computer: RockPaperScissors;
    result: Result;
    humanRoundsWon: number;
    computerRoundsWon: number;

where RockPaperScissors is

export enum RockPaperScissors {
    Rock = 'ROCK',
    Paper = 'PAPER',
    Scissors = 'SCISSORS'

and Result is

export enum Result {
    Won = 'WON',
    Lost = 'LOST',
    Draw = 'DRAW'

There are different functions that change the state based on the human's and the generated computer's choice of options.

The RpsService manages the current game state and provides an observable stream that the UI components subscribe to.

The RpsService provides a function to play the next turn that causes the game state to change and thus the observable to provide a new game state object.

playTurn(hand: RockPaperScissors) { ... }

Service Worker

To use the Service Worker you first have to build the application in production mode. For this run

npm run build

to build the application.

The generated files are located in the dist/ folder. From there start a local server with http-server or a program of your choice.


Angular 5 - Rock Paper Scissors



No releases published


No packages published
You can’t perform that action at this time.