Mentors

  • Chaitanya
  • Suresh
  • Kinshuk

Members

  • Mehul
  • Shifali
  • Shrinidhi
  • Tejas

Introduction

It is a simple clone of the famous game of Flappy Bird using p5.js. The players objective is to navigate the bird, avoiding the infinite procedurally generated environment and rack up as much point as possible to secure bragging rights. JavaScript will be the main learning goal to make the game. Fundamentals of HTML and CSS will be used for styling. P5.js library will be used in making this game. Link for online game - https://flappybird.io/

Overview

The Motivation

This is a very fun and addictive game yet very simple to make and a perfect project for someone to learn HTML/CSS/JavaScript and p5.js(a JavaScript Library).

The Opportunity

This project has no prerequisites and is aimed at familiarizing mentees with HTML, CSS, front-end JavaScript and Git that is essential to any future projects.

The Objective

  • Learning the basics of front-end JavaScript and bit of HTML5 and CSS3 to understand how it works .
  • Perfectly clone the classic Flappy bird game. If time remains, add extra features that the mentees can come up with for example, gravity changing, controlling 2 birds etc,.
  • Learning Version control systems such as Git to provide a smooth working experience.

Approach

  • During phase 1, we’ll provide the resources to get started and assign weekly todos. If the first years have any doubts, they can get those clarified.
  • During phase 2, it will be the experimentation period for all the first years. We’ll have a weekly meet to check the progress of the project. First years can anytime ping us for their doubts.
  • During phase 3, we’ll discuss the logic part with the first years in the beginning and let them work independently on it. If they are facing any problem, we’ll conduct a meet to help them else we’ll confirm their project status online itself.

Deliverables

  • Front End UI
  • Game Design
  • Caching
  • Extra Features

Brief Overview of Technologies Used

HTML5

  • HTML5 is a markup language used for structuring and presenting content on the World Wide Web. It is the fifth and last major HTML version that is a World Wide Web Consortium (W3C) recommendation. The current specification is known as the HTML Living Standard. It is maintained by a consortium of the major browser vendors (Apple, Google, Mozilla, and Microsoft), the Web Hypertext Application Technology Working Group (WHATWG).

CSS3

  • Cascading Style Sheets (CSS) is a style sheet language used for describing the presentation of a document written in a markup language such as HTML. CSS is a cornerstone technology of the World Wide Web, alongside HTML and JavaScript.

JS

  • JavaScript, often abbreviated as JS, is a programming language that conforms to the ECMAScript specification. JavaScript is high-level, often just-in-time compiled, and multi-paradigm. It has curly-bracket syntax, dynamic typing, prototype-based object-orientation, and first-class functions.

p5.js

  • p5.js is a JavaScript library for creative coding, with a focus on making coding accessible and inclusive for artists, designers, educators, beginners, and anyone else! p5.js is free and open-source because we believe software, and the tools to learn it, should be accessible to everyone.
  • Using the metaphor of a sketch, p5.js has a full set of drawing functionality. However, you’re not limited to your drawing canvas. You can think of your whole browser page as your sketch, including HTML5 objects for text, input, video, webcam, and sound.

Demo

Controls

  • Left mouse click to make the bird jump.