Samskrita-Bharati · chprince11 · Mar 20, 2024 · Mar 20, 2024 · Mar 20, 2024 · Mar 20, 2024
diff --git a/049-fs/README.md b/049-fs/README.md
@@ -0,0 +1,12 @@
+<p align="center">
+  <img src="./cover.jpg" width="800" height="500">
+</p>
+
+<div style="text-align: center;">
+  <h1> Flappy Bird Game</h1> <br>
+  <h1>Play Game</h1>
+  <a href="https://chprince11.github.io/zat.am/049-fs/">
+    <img src="https://img.icons8.com/color/96/000000/play--v1.png" alt="Play Game">
+  </a>
+</div>
+
diff --git a/049-fs/cover.jpg b/049-fs/cover.jpg
diff --git a/049-fs/images/Bird-2.png b/049-fs/images/Bird-2.png
diff --git a/049-fs/images/Bird.png b/049-fs/images/Bird.png
diff --git a/049-fs/images/background-img.png b/049-fs/images/background-img.png
diff --git a/049-fs/images/favicon.ico b/049-fs/images/favicon.ico
diff --git a/049-fs/index.html b/049-fs/index.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="icon" type="image/png" href="images/favicon.ico"/>
+    <title>Flabby Bird क्रीडा</title>
+    <link rel="stylesheet" href="style.css">
+    <script src="script.js" defer></script>
+</head>
+<body>
+    <div class="background"></div>
+    <img src="images/Bird.png" alt="bird-img" class="bird" id="bird-1">
+    <div class="message">
+        खेलं आरंभ करें (Hit Enter) <p><span style="color: red;">&uarr;</span> नियंत्रणं (Hit ArrowUp)</p>
+    </div>
+    <div class="score">
+        <span class="score_title"></span>
+        <span class="score_val"></span>
+    </div>
+</body>
+</html>
diff --git a/049-fs/script.js b/049-fs/script.js
@@ -0,0 +1,136 @@
+let move_speed = 3, grativy = 0.5;
+let bird = document.querySelector('.bird');
+let img = document.getElementById('bird-1');
+let sound_point = new Audio('sounds effect/point.mp3');
+let sound_die = new Audio('sounds effect/die.mp3');
+
+// getting bird element properties
+let bird_props = bird.getBoundingClientRect();
+
+// This method returns DOMReact -> top, right, bottom, left, x, y, width and height
+let background = document.querySelector('.background').getBoundingClientRect();
+
+let score_val = document.querySelector('.score_val');
+let message = document.querySelector('.message');
+let score_title = document.querySelector('.score_title');
+
+let game_state = 'Start';
+img.style.display = 'none';
+message.classList.add('messageStyle');
+
+document.addEventListener('keydown', (e) => {
+
+    if(e.key == 'Enter' && game_state != 'Play'){
+        document.querySelectorAll('.pipe_sprite').forEach((e) => {
+            e.remove();
+        });
+        img.style.display = 'block';
+        bird.style.top = '40vh';
+        game_state = 'Play';
+        message.innerHTML = '';
+        score_title.innerHTML = 'प्राप्ताङ्का : ';
+        score_val.innerHTML = '०';
+        message.classList.remove('messageStyle');
+        play();
+    }
+});
+
+
+function play(){
+
+    // Function to convert numbers to Sanskrit numerals
+    function toSanskritNumerals(number) {
+	  const sanskritNumerals = ['०', '१', '२', '३', '४', '५', '६', '७', '८', '९']; 
+       return number.toString().split('').map(digit => sanskritNumerals[digit]).join('');
+}
+    function move(){
+        if(game_state != 'Play') return;
+
+        let pipe_sprite = document.querySelectorAll('.pipe_sprite');
+        pipe_sprite.forEach((element) => {
+            let pipe_sprite_props = element.getBoundingClientRect();
+            bird_props = bird.getBoundingClientRect();
+
+            if(pipe_sprite_props.right <= 0){
+                element.remove();
+            }else{
+                if(bird_props.left < pipe_sprite_props.left + pipe_sprite_props.width && bird_props.left + bird_props.width > pipe_sprite_props.left && bird_props.top < pipe_sprite_props.top + pipe_sprite_props.height && bird_props.top + bird_props.height > pipe_sprite_props.top){
+                    game_state = 'End';
+                    message.innerHTML = 'समाप्तम्'.fontcolor('red') + '<br>पुनः प्रारंभ करने के लिए एंटर दबाएं।';
+                    message.classList.add('messageStyle');
+                    img.style.display = 'none';
+                    sound_die.play();
+                    return;
+                }else{
+                    if(pipe_sprite_props.right < bird_props.left && pipe_sprite_props.right + move_speed >= bird_props.left && element.increase_score == 1){
+                        score_val.innerHTML = toSanskritNumerals(Number(score_val.innerHTML)) + toSanskritNumerals(Number(1)); // Convert the score to Sanskrit numerals
+                        sound_point.play();
+                    }
+                    element.style.left = pipe_sprite_props.left - move_speed + 'px';
+                }   
+            }
+        });
+        requestAnimationFrame(move);
+    }
+    requestAnimationFrame(move);
+
+    let bird_dy = 0;
+    function apply_gravity(){
+        if(game_state != 'Play') return;
+        bird_dy = bird_dy + grativy;
+        document.addEventListener('keydown', (e) => {
+            if(e.key == 'ArrowUp' || e.key == ' '){
+                img.src = 'images/Bird-2.png';
+                bird_dy = -7.6;
+            }
+        });
+
+        document.addEventListener('keyup', (e) => {
+            if(e.key == 'ArrowUp' || e.key == ' '){
+                img.src = 'images/Bird.png';
+            }
+        });
+
+        if(bird_props.top <= 0 || bird_props.bottom >= background.bottom){
+            game_state = 'End';
+            message.style.left = '28vw';
+            window.location.reload();
+            message.classList.remove('messageStyle');
+            return;
+        }
+        bird.style.top = bird_props.top + bird_dy + 'px';
+        bird_props = bird.getBoundingClientRect();
+        requestAnimationFrame(apply_gravity);
+    }
+    requestAnimationFrame(apply_gravity);
+
+    let pipe_seperation = 0;
+
+    let pipe_gap = 35;
+
+    function create_pipe(){
+        if(game_state != 'Play') return;
+
+        if(pipe_seperation > 115){
+            pipe_seperation = 0;
+
+            let pipe_posi = Math.floor(Math.random() * 43) + 8;
+            let pipe_sprite_inv = document.createElement('div');
+            pipe_sprite_inv.className = 'pipe_sprite';
+            pipe_sprite_inv.style.top = pipe_posi - 70 + 'vh';
+            pipe_sprite_inv.style.left = '100vw';
+
+            document.body.appendChild(pipe_sprite_inv);
+            let pipe_sprite = document.createElement('div');
+            pipe_sprite.className = 'pipe_sprite';
+            pipe_sprite.style.top = pipe_posi + pipe_gap + 'vh';
+            pipe_sprite.style.left = '100vw';
+            pipe_sprite.increase_score = '1';
+
+            document.body.appendChild(pipe_sprite);
+        }
+        pipe_seperation++;
+        requestAnimationFrame(create_pipe);
+    }
+    requestAnimationFrame(create_pipe);
+}
diff --git a/049-fs/sounds effect/die.mp3 b/049-fs/sounds effect/die.mp3
diff --git a/049-fs/sounds effect/point.mp3 b/049-fs/sounds effect/point.mp3
diff --git a/049-fs/style.css b/049-fs/style.css
@@ -0,0 +1,83 @@
+* {
+	margin: 0;
+	padding: 0;
+	box-sizing: border-box;
+	font-family: Arial, Helvetica, sans-serif;
+}
+.background {
+	height: 100vh;
+	width: 100vw;
+	background: url('images/background-img.png') no-repeat center center fixed;
+    -webkit-baround-size: cover;
+    -o-backgrouckground-size: cover;
+    -moz-backgnd-size: cover;
+    background-size: cover;
+}
+.bird {
+	height: 100px;
+	width: 130px;
+	position: fixed;
+	top: 40vh;
+	left: 30vw;
+	z-index: 100;
+}
+.pipe_sprite {
+	position: fixed;
+	top: 40vh;
+	left: 100vw;
+	height: 70vh;
+	width: 6vw;
+	background:radial-gradient(lightgreen 50%, green);
+	border: 5px solid black;
+}
+.message {
+	position: absolute;
+	z-index: 10;
+	color: black;
+	top: 30%;
+	left: 50%;
+	font-size: 4em;
+	transform: translate(-50%, -50%);
+	text-align: center;
+}
+.messageStyle{
+	background: white;
+	padding: 30px;
+	box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
+	border-radius: 5%;
+}
+.score {
+	position: fixed;
+	z-index: 10;
+	height: 10vh;
+	font-size: 10vh;
+	font-weight: 100;
+	color: white;
+	-webkit-text-stroke-width: 2px;
+    -webkit-text-stroke-color: black;
+	top: 0;
+	left: 0;
+	margin: 10px;
+	font-family: Arial, Helvetica, sans-serif;
+}
+.score_val {
+	color: gold;
+	font-weight: bold;
+}
+@media only screen and (max-width: 1080px) {
+    .message{
+		font-size: 50px;
+		top: 50%;
+		white-space: nowrap;
+	}
+	.score{
+		font-size: 8vh;
+	}
+	.bird{
+		width: 120px;
+		height: 90px;
+	}
+	.pipe_sprite{
+		width: 14vw;
+	}
+}
diff --git a/app.js b/app.js
@@ -119,6 +119,9 @@ desc: `श्रीमद्भगवद्गीता  <pre>shriimad-bhagavad-
 				 },{
 					id:48,title : "Free Smash game ", category : "RG", dir:"048-fs",desc:
    `Free Smash game in संस्कृतम्: <pre>Prince Chauhan</pre> `
+					},{
+					id:49,title : "Flabby Bird Game ", category : "RG", dir:"049-fs",desc:
+   `Flabby Bird Game in संस्कृतम्: <pre>Prince Chauhan</pre> `
 					},
 
   { id: 28, title: "शीघ्रम् आगमिष्यति ...", category: "TA", dir: "999-cs",