Merge pull request #1069 from kanishkasah20/flappy-bubble-sofa

added flappy bubble sofa game

src/Games/Flappy_Bubble_sofa/README.md

@@ -0,0 +1,21 @@
+# Flappy-bubble-sofa
+
+An animated and fun version of the popular fibannaco 2048 game. Built with HTML, CSS and Javascript.
+
+
+## How to play 
+
+Move the bubbles with your mouse and add up the same numbers. After adding up two bubbles, two more drop and will not return if they fall over the sofa. 
+
+You can turn off the music and sound effects from the home page and also choose the quality of game.
+
+
+# Tech stack
+HTML , Css, Javascript
+
+## Play here:- https://64cdf4cd2039341b0ca4a62e--inquisitive-starlight-4c9f15.netlify.app/
+
+Demo Screenshot:-
+
+![Alt text](assets/readme/image.png)
+![Alt text](assets/readme/image-1.png)

src/Games/Flappy_Bubble_sofa/assets/css/styles.css

@@ -0,0 +1,228 @@
+#container,
+#menu {
+  position: absolute;
+}
+
+#menu-controls {
+  display: none;
+  position: absolute;
+  width: 100vw;
+  height: 100vh;
+  background-color: rgba(0, 0, 0, 0.5);
+}
+
+#menu-controls #menu {
+  font-family: "Segoe UI", "Helvetica Neue", sans-serif;
+  width: 200px;
+  top: 50%;
+  right: 50%;
+  transform: translateY(-50%) translateX(50%);
+  padding: 15px;
+  border: 1px solid white;
+  border-radius: 15px;
+  background-color: rgba(0, 0, 0, 0.65);
+}
+
+#menu-controls #menu .opt::before {
+  height: 24px;
+}
+
+#menu-controls #menu .opt::after {
+  height: 20px;
+  top: 2px;
+  left: 3px;
+  width: 20px;
+}
+
+#menu-controls #menu .opt:checked::after {
+  left: 54px;
+}
+
+#close-menu-controls {
+  background-color: red;
+  float: right;
+  padding: 2.5px 7px;
+  cursor: pointer;
+}
+
+#end,
+#home,
+#load,
+.opt,
+.opt::after,
+.opt::before {
+  box-sizing: border-box;
+}
+
+body,
+html {
+  background: #263238;
+  height: 100%;
+  margin: 0;
+  overflow: hidden;
+  -ms-text-size-adjust: 100%;
+  -webkit-text-size-adjust: 100%;
+}
+
+#container > *,
+label {
+  -moz-user-select: none;
+  -moz-user-select: -moz-none;
+  -ms-user-select: none;
+  -webkit-touch-callout: none;
+  -webkit-user-select: none;
+  user-select: none;
+}
+
+#backcanvas,
+#canvas,
+#end,
+#home,
+#load {
+  display: block;
+  height: 100%;
+  left: 0;
+  position: absolute;
+  top: 0;
+  -webkit-transform: translate3d(0, 0, 0);
+  transform: translate3d(0, 0, 0);
+  width: 100%;
+}
+
+#backcanvas {
+  background:  #455a64;
+}
+
+#end,
+#home,
+#load {
+  background: rgba(0, 0, 0, 0.5);
+  color: #fff; 
+  cursor: default;
+  font: 300 64px/96px "Segoe UI", "Helvetica Neue", sans-serif;
+  height: 1080px;
+  padding: 0 100px;
+  transform-origin: 0 0;
+  width: 1920px;
+}
+
+#load + #home {
+  display: none;
+}
+
+#end > *,
+#home > *,
+#load > * {
+  margin: 40px 0;
+}
+
+h1 {
+  font: 300 96px/1 "Segoe UI", "Helvetica Neue", sans-serif;
+  margin-top: 80px;
+  text-shadow: 2px 0 0 red, -2px 0 0 #0ff;
+}
+
+p {
+  text-shadow: 1px 0 0 red, -1px 0 0 #0ff;
+}
+
+#reset,
+#start {
+  -webkit-animation: blink 0.7s steps(2, start) infinite;
+  animation: blink 0.7s steps(2, start) infinite;
+  background: #e1ff5f;
+  border-radius: 2px;
+  color: #202020;
+  cursor: pointer;
+  display: inline-block;
+  font-size: 48px;
+  font-weight: 700;
+  outline: 4px;
+  outline-offset: 4px;
+  padding: 40px 120px;
+}
+
+#reset:hover,
+#start:hover,
+.opt::after {
+  background: #fff;
+}
+
+@-webkit-keyframes blink {
+  to {
+    outline: #e1ff5f solid 4px;
+  }
+}
+
+@keyframes blink {
+  to {
+    outline: #e1ff5f solid 4px;
+  }
+}
+
+#menu {
+  right: 0;
+  top: 0;
+  transform: translate3d(0, 0, 0);
+  width: 550px;
+}
+
+.opt {
+  -webkit-appearance: none;
+  height: 48px;
+  margin: 0 10px;
+  outline: 0;
+  position: relative;
+  width: 80px;
+}
+
+.opt::after,
+.opt::before {
+  border-radius: 100px;
+  content: "";
+  display: inline-block;
+  transition: all 0.2s;
+}
+
+.opt::after {
+  border: 2px solid #607d8b;
+  height: 40px;
+  left: 4px;
+  position: absolute;
+  top: 4px;
+  width: 40px;
+}
+
+.opt::before {
+  background: #b0bec5;
+  height: 48px;
+  width: 80px;
+}
+
+.opt:checked::after {
+  left: 36px;
+}
+
+.opt:checked::before {
+  background: #c6ff00;
+}
+
+label {
+  color: #eeff32;
+}
+
+body.mobile #menu > * {
+  display: none;
+}
+
+#q {
+  display: inline-block !important;
+}
+
+#q + label {
+  display: inline !important;
+}
+
+body.white {
+  background-color: rgb(211, 209, 209);
+}