SVGs are displayed way to big

User Story

As a developer
I need to implement friction that the player can move correctly

Description

• Player sould stop the movement on its own
• Player walks like he is sliding on ice without friction
• Player would slide of the plattforms on its own

Material

To do's:

• create a constant friction
• implement friction in movement / speed of the player (playerWalk-function)

User Story

As a developer
I need to implement grafity
that the player falls from plattforms and returns to the ground when jumping

Description

• Gravity-constant that reduces the yPlacement of the character constantly

Material

https://www.w3schools.com/graphics/game_gravity.asp

To do's:

• constant gravity
• implement gravity in jumping movement

User Story

As a developer
I want to deploy my site somewhere
to show the product to other people without

Description

https://dashboard.heroku.com/apps

To do's:

• create pipeline
• Add the app
• enable CI
• deploy project and activate

User Story

As a player
I want the ground to have a texture
to make clear where the player is

Description

• Rocky / asteroid
• scalable SVG of a planetlandscape in comic style

Material

To do's:

• create SVG in Photoshop

User Story

As a player
I want to have a nice backgroundmusik

Description

• background music

Material

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/audio

To do's:

• search background music
• implement audio element

User Story

As a player
I want to have a nice Player to play
because its more fun and adds to the story

Description

• Astronaut

Material

Inspo:

• https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcQ1fm3Wd-3pB_ab8DrBwxSJHE9BcC9kxtN_KA&usqp=CAU
• https://dribbble.com/UniqueScar/collections/3059354-Space

To do's:

• create a sketch for Astronaut
• create SVG in Photoshop - front
• create SVG in Photoshop - jump
• create SVG in Photoshop - right
• create SVG in Photoshop - left

User Story

As a player
I want move the character to play the game

Description

• Basic movement: right, left
• Movement with -> and <- keys

Material

• keypress event
• keycodes

To do's:

• keycodes for the two arrow keys
• setup a playerWalk function
• add keylistener events and decrease / increase xPlacement-value of the player

User Story

As a developer
I want easy way to "draw" all plattforms with one function

Description

• Function
• The function "gets" an array with the x & y-placement of the object and the width
• height should be the same for all plattforms
• Draw rectangle

Material

https://reactjs.org/docs/hooks-custom.html

To do's:

• set up an array with the numbers per object in the array
• create function

User Story

As a developer
I need to implement routes
to have different pages

Description

• react-router-dom
• Route 1: home / menu
• Route 2: game

Material

https://www.npmjs.com/package/react-router-dom

To do's:

• npm install react-router-dom
• setup Router / Switch / Routes to place the components into

User Story

As a player
I need to know whats the game is about and which keys I can use (another issue)

Description

• floating popup screen?
• little storytelling intro
• keys to use
• keys should look like, like they are pressed

Material

To do's:

• write intro-text
• new component
• add images of keys
• add "weiter"-key

User Story

As a player
I want to jump with the character to play the game

Description

• Basic movement: up
• Movement with up-key

Material

• keypress event
• keycodes

To do's:

• keycode for the arrow keys
• setup a playerWalk function
• add keylistener events and decrease / increase yPlacement-value of the player

User Story

As a player
I want to be welcomed before the game starts

Description

• Main Menu with stars in the background

Material

To do's:

• create new component
• Add Game-Name
• Add picture
• add button
• link buttons to page
• CSS

User Story

As a developer
I must implement a ground-level so my character can stand on something

Description

• Floor constant that contains the hight of the ground
• Player should be standing on the ground
• Player should land on the ground after jumping (preparation for jumping function)

Material

https://www.w3schools.com/graphics/game_gravity.asp

To do's:

• const floor
• function / if -> player hitting the ground

User Story

As a developer
I need to implement the graphic into the game for a user to see it

Description

• Graphic must be included / drawn on canvas
• .drawImage

Material

https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/drawImage

To do's:

• load image into project
• implement the .drawImage function

User Story

As a developer
I need to setup the basic game loop on a canvas
that I can implement the other features

Description

• <canvas> html element
• basic game loop
• Context API -> context 2D

Material

const createCanvas = () => {
const canvas = createElement("canvas", { className: "game" });
return canvas;
};

const context = canvas.getContext("2d");

const loop = () => {

 
requestAnimationFrame(loop);
 };
 loop();

To do's:

• create canvas
• set context
• setup basic loop

User Story

As a player
I want a nice background to make the game visually enjoyable

Description

• <canvas> html element
• background img in CSS
• Placement of the canvas on a larger screen

Material

To do's:

• add background image
• center the canvas on larger devices

User Story

As a developer
I want a clean setup without startercode and using storybook
because I can work freely and show the components seperatly

To do's:

• Install storybook npx sb init
• Delete starter-code

User Story

As a player
I want to be able to land on a plattform when jumped higher than the plattform
for that the developer must implement a collision detection between the player and the plattform and handle the event.

Description

• player sould be able to jump higher than the plattforms
• player sould land on the plattform after jumping higher than the plattform

To do's:

• add collision detection
• implement handling of the event

User Story

As a player
I want the game to end in some way
so I have to implement 2 endings (death and safety)

Description

• safety: astronaut is on his little rocket
• death: astronaut in his jumping pose

User Story

Level 2 of the game from the beginning to end incl. Endscreen, when failed

Description

Infinity scrolling background; astronaut on rocket trying to avoid the asteroids; ending animation - player flies away

Material

To do's:

• draw only a specific part of the canvas
• responsiveness of the canvas
• draw player
• infinity scrolling background
• add obstacles
• collision detection
• movement of the player
• restrict the movement at top and bottom of the screen
• ending animation

User Story

As a player
I want to only see the "important" things of the game

Description

• viewport to crop the game and make only a view plattforms visible
• if I don't do this the player would always see the whole game and the player would be way to tiny

Material

• tilemap camera / moving background
• scrolling camera

User Story

As a player
I want nice grafics when the player moves
because a static image looks like the astronaut is flowing above the ground

Description

• spreadsheet with charakter-sprites

Material

Inspo:

• https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcQ1fm3Wd-3pB_ab8DrBwxSJHE9BcC9kxtN_KA&usqp=CAU
• https://dribbble.com/UniqueScar/collections/3059354-Space

To do's:

• walkcycle right
• walkcycle left
• jumpcycle

User Story

As a player
I want the plattforms to match the space astetic of the game

Description

• scalable SVG of a asteroid in comic style

Material

First Design:

Design-Overview:

Design:

To do's:

• create SVG in Photoshop

User Story

As a player
I want see an entertaining loading screen to not get board

As a developer
I should implement a loading screen to give the component enough time to load completely

Description

• Astonaut flowing in space?
• Text: "XXX" (wip)

Material

To do's:

• Design the loading-screen SVG
• load the SVG in project
• new component loading screen
• implement image in loading screen
• CSS - center image and text

User Story

As a user
I want to have a nice branding of the page and not the react logo

To do's:

• Change Title
• Change Logo

User Story

As a developer
I need to implement the graphic into the game for a user to see it

Description

• Graphic must be included / drawn on canvas
• .drawImage

Material

https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/drawImage

To do's:

• load image into project
• .drawImage function
• implement .drawImage into hook