diff --git a/049-fs/README.md b/049-fs/README.md new file mode 100644 index 0000000..8935397 --- /dev/null +++ b/049-fs/README.md @@ -0,0 +1,12 @@ +

+ +

+ +
+

Flappy Bird Game


+

Play Game

+ + Play Game + +
+ diff --git a/049-fs/cover.jpg b/049-fs/cover.jpg new file mode 100644 index 0000000..d2d74e1 Binary files /dev/null and b/049-fs/cover.jpg differ diff --git a/049-fs/images/Bird-2.png b/049-fs/images/Bird-2.png new file mode 100644 index 0000000..8ab8783 Binary files /dev/null and b/049-fs/images/Bird-2.png differ diff --git a/049-fs/images/Bird.png b/049-fs/images/Bird.png new file mode 100644 index 0000000..6b66500 Binary files /dev/null and b/049-fs/images/Bird.png differ diff --git a/049-fs/images/background-img.png b/049-fs/images/background-img.png new file mode 100644 index 0000000..d3d6f57 Binary files /dev/null and b/049-fs/images/background-img.png differ diff --git a/049-fs/images/favicon.ico b/049-fs/images/favicon.ico new file mode 100644 index 0000000..90ecd45 Binary files /dev/null and b/049-fs/images/favicon.ico differ diff --git a/049-fs/index.html b/049-fs/index.html new file mode 100644 index 0000000..e1717bf --- /dev/null +++ b/049-fs/index.html @@ -0,0 +1,23 @@ + + + + + + + + Flabby Bird क्रीडा + + + + +
+ bird-img +
+ खेलं आरंभ करें (Hit Enter)

नियंत्रणं (Hit ArrowUp)

+
+
+ + +
+ + \ No newline at end of file diff --git a/049-fs/script.js b/049-fs/script.js new file mode 100644 index 0000000..63869c8 --- /dev/null +++ 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') + '
पुनः प्रारंभ करने के लिए एंटर दबाएं।'; + 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); +} \ No newline at end of file diff --git a/049-fs/sounds effect/die.mp3 b/049-fs/sounds effect/die.mp3 new file mode 100644 index 0000000..398c281 Binary files /dev/null and b/049-fs/sounds effect/die.mp3 differ diff --git a/049-fs/sounds effect/point.mp3 b/049-fs/sounds effect/point.mp3 new file mode 100644 index 0000000..462f96e Binary files /dev/null and b/049-fs/sounds effect/point.mp3 differ diff --git a/049-fs/style.css b/049-fs/style.css new file mode 100644 index 0000000..f114b3b --- /dev/null +++ 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; + } +} \ No newline at end of file diff --git a/app.js b/app.js index 8c085cd..194563a 100644 --- a/app.js +++ b/app.js @@ -119,6 +119,9 @@ desc: `श्रीमद्भगवद्गीता
shriimad-bhagavad-
 				 },{
 					id:48,title : "Free Smash game ", category : "RG", dir:"048-fs",desc:
    `Free Smash game in संस्कृतम्: 
Prince Chauhan
` + },{ + id:49,title : "Flabby Bird Game ", category : "RG", dir:"049-fs",desc: + `Flabby Bird Game in संस्कृतम्:
Prince Chauhan
` }, { id: 28, title: "शीघ्रम् आगमिष्यति ...", category: "TA", dir: "999-cs",