Top Digital Marketing Agency in Dhrangadhra | Website Development & Designing – Netbyzz
<!-- CODE = #A074 --> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>NETBYZZ A074</title> <link href='https://fonts.googleapis.com/css?family=Pacifico' rel='stylesheet'> <link rel="stylesheet" href="style.css"> </head> <body> <canvas id="myCanvas" width=320 height=480 style="background:url('http://s2js.com/img/etc/flappyback.png'); background-size: 100%; height: 95% " > <script src="script.js"></script> </body> </html>
body { font-family: 'Pacifico'; display: flex; justify-content: center; } canvas { border: 1x solid #0a3cda; margin: 10px; }
var ctx = myCanvas.getContext("2d"); var FPS = 40; var jump_amount = -10; var max_fall_speed = +10; var acceleration = 1; var pipe_speed = -2; var game_mode = "prestart"; var time_game_last_running; var bottom_bar_offset = 0; var pipes = []; function MySprite(img_url) { this.x = 0; this.y = 0; this.visible = true; this.velocity_x = 0; this.velocity_y = 0; this.MyImg = new Image(); this.MyImg.src = img_url || ""; this.angle = 0; this.flipV = false; this.flipH = false; } MySprite.prototype.Do_Frame_Things = function () { ctx.save(); ctx.translate(this.x + this.MyImg.width / 2, this.y + this.MyImg.height / 2); ctx.rotate((this.angle * Math.PI) / 180); if (this.flipV) ctx.scale(1, -1); if (this.flipH) ctx.scale(-1, 1); if (this.visible) ctx.drawImage(this.MyImg, -this.MyImg.width / 2, -this.MyImg.height / 2); this.x = this.x + this.velocity_x; this.y = this.y + this.velocity_y; ctx.restore(); }; function ImagesTouching(thing1, thing2) { if (!thing1.visible || !thing2.visible) return false; if ( thing1.x >= thing2.x + thing2.MyImg.width || thing1.x + thing1.MyImg.width <= thing2.x ) return false; if ( thing1.y >= thing2.y + thing2.MyImg.height || thing1.y + thing1.MyImg.height <= thing2.y ) return false; return true; } function Got_Player_Input(MyEvent) { switch (game_mode) { case "prestart": { game_mode = "running"; break; } case "running": { bird.velocity_y = jump_amount; break; } case "over": if (new Date() - time_game_last_running > 1000) { reset_game(); game_mode = "running"; break; } } MyEvent.preventDefault(); } addEventListener("touchstart", Got_Player_Input); addEventListener("mousedown", Got_Player_Input); addEventListener("keydown", Got_Player_Input); function make_bird_slow_and_fall() { if (bird.velocity_y < max_fall_speed) { bird.velocity_y = bird.velocity_y + acceleration; } if (bird.y > myCanvas.height - bird.MyImg.height) { bird.velocity_y = 0; game_mode = "over"; } if (bird.y < 0 - bird.MyImg.height) { bird.velocity_y = 0; game_mode = "over"; } } function add_pipe(x_pos, top_of_gap, gap_width) { var top_pipe = new MySprite(); top_pipe.MyImg = pipe_piece; top_pipe.x = x_pos; top_pipe.y = top_of_gap - pipe_piece.height; top_pipe.velocity_x = pipe_speed; pipes.push(top_pipe); var bottom_pipe = new MySprite(); bottom_pipe.MyImg = pipe_piece; bottom_pipe.flipV = true; bottom_pipe.x = x_pos; bottom_pipe.y = top_of_gap + gap_width; bottom_pipe.velocity_x = pipe_speed; pipes.push(bottom_pipe); } function make_bird_tilt_appropriately() { if (bird.velocity_y < 0) { bird.angle = -15; } else if (bird.angle < 70) { bird.angle = bird.angle + 4; } } function show_the_pipes() { for (var i = 0; i < pipes.length; i++) { pipes[i].Do_Frame_Things(); } } function check_for_end_game() { for (var i = 0; i < pipes.length; i++) if (ImagesTouching(bird, pipes[i])) game_mode = "over"; } function display_intro_instructions() { ctx.font = "25px Arial"; ctx.fillStyle = "red"; ctx.textAlign = "center"; ctx.fillText( "Press, touch or click to start", myCanvas.width / 2, myCanvas.height / 4 ); } function display_game_over() { var score = 0; for (var i = 0; i < pipes.length; i++) if (pipes[i].x < bird.x) score = score + 0.5; ctx.font = "30px Arial"; ctx.fillStyle = "red"; ctx.textAlign = "center"; ctx.fillText("Game Over", myCanvas.width / 2, 100); ctx.fillText("Score: " + score, myCanvas.width / 2, 150); ctx.font = "20px Arial"; ctx.fillText("Click, touch, or press to play again", myCanvas.width / 2, 300); } function display_bar_running_along_bottom() { if (bottom_bar_offset < -23) bottom_bar_offset = 0; ctx.drawImage( bottom_bar, bottom_bar_offset, myCanvas.height - bottom_bar.height ); } function reset_game() { bird.y = myCanvas.height / 2; bird.angle = 0; pipes = []; // erase all the pipes from the array add_all_my_pipes(); // and load them back in their starting positions } function add_all_my_pipes() { add_pipe(500, 100, 140); add_pipe(800, 50, 140); add_pipe(1000, 250, 140); add_pipe(1200, 150, 120); add_pipe(1600, 100, 120); add_pipe(1800, 150, 120); add_pipe(2000, 200, 120); add_pipe(2200, 250, 120); add_pipe(2400, 30, 100); add_pipe(2700, 300, 100); add_pipe(3000, 100, 80); add_pipe(3300, 250, 80); add_pipe(3600, 50, 60); var finish_line = new MySprite("http://s2js.com/img/etc/flappyend.png"); finish_line.x = 3900; finish_line.velocity_x = pipe_speed; pipes.push(finish_line); } var pipe_piece = new Image(); pipe_piece.onload = add_all_my_pipes; pipe_piece.src = "http://s2js.com/img/etc/flappypipe.png"; function Do_a_Frame() { ctx.clearRect(0, 0, myCanvas.width, myCanvas.height); bird.Do_Frame_Things(); display_bar_running_along_bottom(); switch (game_mode) { case "prestart": { display_intro_instructions(); break; } case "running": { time_game_last_running = new Date(); bottom_bar_offset = bottom_bar_offset + pipe_speed; show_the_pipes(); make_bird_tilt_appropriately(); make_bird_slow_and_fall(); check_for_end_game(); break; } case "over": { make_bird_slow_and_fall(); display_game_over(); break; } } } var bottom_bar = new Image(); bottom_bar.src = "http://s2js.com/img/etc/flappybottom.png"; var bird = new MySprite("http://s2js.com/img/etc/flappybird.png"); bird.x = myCanvas.width / 3; bird.y = myCanvas.height / 2; setInterval(Do_a_Frame, 1000 / FPS);