The tasks are in English and German.
Feel free to provide a translation as pull-request.
You can not get Google Code-In credit for this.

When the bird hits an obstacle, it should collide with it and something should happen. But what? It should be enough for this of there is a method in the bird which is called like

flappy.collidedWith(obstacle)

This can be something like an alert.

Really good would be:
This implementation should run in O(1) and not O(n) where n is the number of obstacles. Do not check every obstacle every move. Only check the closest.

Create a game over screen. It have to be a layer in the svg file and contains a button to restart the game with functionality.

Instead of placing a static score label, tentatively the score can be calculated based on the number of obstacles being crossed . The complexity of the score can be increased based on various parameters like speed, distance etc.

This is a continuation from my previous issue #96 to why we could switch to Webgl.
Three.js has a property to create a Spotlight with a particular intensity, angle and location and we can then enable shadow property on required objects.

Since we have a sun in the game and a shift from day to night , the shadow casting and lighting effects can be easily manipulated with three.js.

Errors occur and must be caught. Some of them must be shown to the user.

• When the app could not download a new version of the game
• When there is no version of the game because it was never downloaded
• https://github.com/antoniomdk/flappy-svg/commit/a0615baab59734a2f679cdb5731a0a6049d9e9f3#commitcomment-15359600

What are your ideas, @antoniomdk ?

Currently, we have a collision detection that checks the rectangle of the obstacle. This leads to a lot of hits even if there are no. See #4 for suggestions.

The new collision detection reduces the number of wrong hits. Comment if you would like to do this.

• Add a title to the index.html file
• Add the favicon.ico to the credits.html page
• Add a favicon.ico to the links.html page
• The titles should have a similar structure in credits.html, links.html and flappy.html
• The most informing part of the title should be in the first 8 characters

Comment if you would like to work in this issue. We can do several pull-requests for this one.

Looking at

• http://fossasia.github.io/flappy-svg/links.html
• http://fossasia.github.io/flappy-svg/credits.html

Problem When you zoom in, the black background gets bigger and fills the screen so one must zoom out again.
Wish when zooming, the writing should still stay where it is but become bigger.
Possible Solution one could set the background color to black and remove the div elements that are black.

The Flappy Game should be playable without internet connection.

A possible implementation could look like:

• Download the zip file of the project if there is an internet connection. https://github.com/fossasia/flappy-svg/archive/gh-pages.zip
• open/unpack the zip file
• serve the contents via an HTTP-Server to the existing web viewer OR open the local files directly in the web viewer.

I expect it to be about 20-40 lines of code.

Comment if you would like to solve this issue.

The Android app uses the online version of the game for download.
The downloaded version should be used to play the game in order to reduce bandwidth usage and response time.

Short:

• Always serve the local copy of the game.

When I open Flappy SVG on an Android tablet in the browser, I get a 300ms delay from click to flap. This delay should be removed.

This is a research question so it is hard to estimate the time to invest to solve it. Could be, that it cannot be solved. It is important to share the knowledge about this here.

Comment if you want to solve this issue.

We have code in place that opens a alert window when a Flappy hits an obstacle #4.
The alert should be replaced with something useful.

1. Add Ideas on what should happen.
2. We discuss them.
3. Someone implements it.

Comment if you would like to work on this issue.

• Improve the Background, Images & Icons used

  They can be changing the shapes of sun and moon and camel . They can be made some what better. Improvements can also be made to Buildings that are shown in Gotham background etc.

• Work on Home/Welcome Screen

  Welcome screen can be enhanced by improving the images that appear and the header JoJo Let's Goo can be adjusted neatly and appropriate images can be changed to make it look good

• Enhance the GUI on a whole

You should comment if you like to solve the issue.

There are really cool SVG's for github that appear in the corner of the document. Add one of these to redirect to this repository.

• http://codepen.io/elrumordelaluz/pen/XmygWX

Context
The circles in links.html behave as if they should be clickable. When I go over them with the mouse or click them, they change color.

Problem
Currently, only the text inside the circles has a behavior although it is suggested that the circles have the same.

Solution
Make the circles clickable and do the same that the text inside does now.

While playing with background Gotham, there is no obstacle come in path, it is just going and going.
@niccokunzmann

Using links instead of onclick= should be able to achieve the same except that now we can choose where to open the link (new tab, same page) and copy it.

Discussion is open!

In my opinion the text JoJo Let's Goo could be aligned such that Goo is clearly visible. The overlapping with the sand dunes behind is not giving it a good look.

At the front page of http://fossasia.github.io/flappy-svg/ there was a blue image that linked to the links.html. It disappeared. It should be there again so we can reach the links.html.
Maybe, it was moved into the images folder and the reference was not updated in flappy.svg.

The front page only shows the camel and the desert.
One can randomize it and show randomly

• different backgrounds
• different characters at the start

Comment if you would like to do solve this issue.

We could use Webgl libraries like Cannon.js , Ammo.js or Three.js to make this Game. This will obviously require us to rewrite the existing gameplay code but this will make the game smoother and efficient.
We can create basic geometries and wrap them up with svgs. Cannon.js will handle the collisions.
(http://schteppe.github.io/cannon.js/) , (http://threejs.org/)

Dat.Gui can also be implemented to dynamically modify(user side) or display variables.

@PohSayKeong, we will discuss everything here instead of in the task.

Currently we have developed the main menu .
We need to add the controls for the game , the scoring schema etc
Design the howtoplay.html file in a user friendly way.

Context
When Google-Codein is over, we still want to go on writing the game and get new developers into open source. They may even never have programmed before.

Objective
Make it as easy for them as it is for Google Code-In students to start.

Ideas

• We can copy the English and German task descriptions into a folder
• We should give advice how to start with github, see the Google Code-In task
• People in schools may not have administrator rights - consider that.
• this can be a new repository with a website or a new folder with only md files or pdfs

Please share your thoughts!

Flappy and Background have hide and show methods. These should be used preferably before setting the layer's style

The links.html file four links in the middle.
If you look how it is implemented, these two if constructs do the switch between the different views the page can be in, in lines 3 and 21:

if(document.getElementById('x3').innerHTML.indexOf('i')!=1)
if(document.getElementById('x4').innerHTML.indexOf('i')!=1)

Better, if we use a variable for the if. We have two views of the page:

1. The initial view when we enter the page
2. The android view after we clicked on the android logo

To solve this issue:

• Add a variable for the view of the page
• use the variable in the if statements
• adjust the android() and contributors() functions - they could be renamed to "leftImageClick" or something like this.
• Add such a function to the back button so that we can get back from the Android view to the initial view.

Comment if you would like to solve this issue.

There from the links page one should be able to view the contributors of the project.
The are located in the master branch in the Contributors.md file. They should be shipped along with the code.

What should be added:

• Names with Links
• License with picture
• a notice where to add the name of contributors in the contributing file

threading.js uses several timers. This can be reduced to one timer per interval. The problem with many timers is that they tend to schedule differently when you use them for a long time. This can be seen as the obstacles move where they should not.

There is a continuous integration server travis.ci we can use to ensure some facts about the game.

• Add travis.ci to the github services
• add a travis file, in it:
  • install phantomjs
  • install node to write the tests
  • install modules
  • run tests
• implement tests
  • sites are reachable from eachother (index, links, credits, ...)
  • no resources are loaded from the internet

This issue has to be done step-wise. Comment if you would like to work on it.

Problem
Currently, the Main Menu has some fixed positions for elements. The buttons are not visible if the width of the page is thin.

Solution
Move the buttons with the size of the page so that they stay visible. e.g. center them.

Hints
In #104 you see who created the menu and you can ask for help here.

Comment if you would like to work on this issue.

Create a distance counter. It needs a label in the top of screen and update continuosly the score.

Can we have a website from there a user can download this game and play it offline instead of downloading from github.And we can add little information about the flappy-svg.

Create a 128x128 icon and place in the icons directory, make sure it's in .svg format.

At the start screen add the fossasia logo and when one clicks it, one should be redirected to the fossasia site.

At gci15.fossasia.org there is a section for student games.
We can add the Flappy SVG game to it.

TODO:

• review and merge #42
• use the SVG as the logo for index.html

The start page is really crowded. Create a layer/page named "about".
This layer/page includes:

• The Github link
• The Fossasia Link
• A Link to the Andriod App
• The Link to the rotoscopes, when you click the sun
• A Link back to the game.

Also, remove these links from the start page and add a link to the about page/layer.

Comment if you would like to do this issue.

Context:

There is almost no obstacle at the bottom in the Gotham backgound. This means that the player does not need to do anything to play this background.

Solution

Add more obstacles at the bottom of Gothams obstacles.

There are a lot of images now.
All, except the flappy.svg image should be put into one folder, like it is with javascript and style.

• add the images to the folder
• update all links to the images

Comment if you would like to work on this issue.

Problem
Currently, all layers are in flappy.svg.
This causes the following problems:

• Merge conflict when two people edit the flappy.svg at a time
• Not obvious what was changed, hard review
• A huge file, maybe too big to edit for tome people
• Always you edit all layers when saving -> Could be problematic if we add animations or custom SVG code

Solution
Split the flappy.svg file into several files. SVGs can be embedded in SVGs, so no problem there.

• for each layer create a svg file
• embed each layer into the flappy.svg e.g. using JavaScript

Comment if you want to do this and please outline a plan on what your solution looks like. Change is hard once coding began, so the plan should be good first.

In the context menu of the App-game, there can be a button to restart the game.
This will reload the site.

Comment if you would like to solve this issue.

Animate something: the Camel, the Bat, the sun, the moon. They can have glowing eyes, flap, walk, jump, look at the mouse, ... - as you please
You should use SVG animations for this. You can find one in the top right corner for example. But there are great tutorials in the internet.

You should comment if you like to solve the issue.

Each level has

• backgrounds
• obstacles

In a level.js file:

• each level should be an own object

Add methods:

• Level.show()
• Level.start()
• Level.stop()
• Level.hide()
• Level.getBackgrounds()
• Level.getObstacles()
• Level.getName()
• Level.score() - return the score that should be displayed.

Add functions:

• getAllLevels()
• newLevel(name, [backgrounds], [obstacles])
• createAlllevelObjects() - is called one at the start of the game, uses newLevel()
• setCurrentLevel(name)
• getCurrentLevel() - the currently selected level

The idea is to create good code. This is the draft and it may need to change once started.

Comment if you would like to work on this.

Once we have a score, we can create a leader board.
We need

• a server that hosts the leader board
• post scores and names to the boad
• show the list of people who have scores.

Please discuss how to do this and post your ideas here so we can make a better specification.

getBox function on Gotham_obstacles is not working

Context
Currently, everyone is able to check the working of the game as a website. There is no way to test a pull-request whether it works on the app.

Solution
Add the ability to change to where to download the game from.

Hints

• The default should be fossasia's flappy-svg
• One should be able to test pull-requests
• If someone forks it this person should also be able to play the own version from the own repository

Comment if you would like to work on this issue.

in the contributing.md:

• link to the tasks

In general:

• add headings to the tasks
• check links in tasks if they still work
• contributing.md moved to credits.html
• add a task about translation
• add links to github/git tutorials

When there are links clicked in the web viewer, they should be opened in the browser.

Assigning middle difficulty because I do not know how to do that.

Comment if you would like to solve this issue.

When I open the page http://fossasia.github.io/flappy-svg/

Then I get the error

Load denied by X-Frame-Options: http://fossasia.github.io/flappy-svg/flappy.svg does not permit framing.

This should not be! The game should be playable.

Hints to solve this:

• embed the SVG inside the html file using jekyll which is built into github pages OR
• use another embed method that allows interaction.