flappybird网页版源码资源-CSDN文库

共3个文件

js：1个

html：1个

gif：1个

需积分: 31 2 浏览量 2015-10-17 04:19:32 上传评论收藏 36KB ZIP 举报

《Flappy Bird网页版源码解析》 Flappy Bird是一款风靡全球的手机游戏，以其简单易上手却又难以精通的特性吸引了大量玩家。而在这个专题中，我们将深入探讨如何利用JavaScript来实现这款经典游戏的网页版。JavaScript是一种广泛应用于网页开发的脚本语言，它在网页动态交互、游戏开发等领域有着重要作用。下面，我们就来逐步剖析Flappy Bird的源码，揭示其背后的编程逻辑。我们来看游戏的核心机制。Flappy Bird的游戏循环基于JavaScript的事件驱动模型，主要由用户的输入（点击屏幕使鸟飞行）和物理模拟两部分构成。游戏循环通常会包含一个更新函数，负责处理游戏状态的改变，以及一个渲染函数，用于在屏幕上显示游戏画面。在Flappy Bird中，这两个函数会被定期调用，形成一个流畅的游戏流程。接下来，我们关注游戏对象的创建与管理。在JavaScript中，可以使用对象字面量或者构造函数来创建游戏中的角色，如鸟、管道等。每个对象都会包含自身的属性（如位置、速度等）和方法（如移动、碰撞检测）。例如，鸟的飞行动作可以通过改变其y轴速度来实现，管道的生成和移动则需要设置合理的坐标和速度。然后，我们要讨论的是碰撞检测。在Flappy Bird中，游戏的挑战性很大程度上来自于对鸟与管道之间碰撞的判断。这通常通过比较鸟的位置与管道的边界来实现。JavaScript提供了各种数学运算和比较操作，使得我们可以精确地检测到碰撞并据此触发相应的游戏事件，如游戏结束。再者，物理模拟是游戏中的关键元素。Flappy Bird的物理效果主要是重力，鸟在没有用户输入时会因重力下落。这个效果可以通过不断累加鸟的y轴速度来实现。同时，当鸟向上飞行时，需要设定一个反向的初速度，模拟鸟的上升动作。我们不能忽视用户交互。在JavaScript中，我们可以监听鼠标的点击事件或触摸屏的触摸事件，以此作为控制鸟飞行的信号。当用户点击屏幕时，鸟的速度会在短时间内大幅提升，模拟飞行的效果。通过JavaScript实现Flappy Bird网页版，需要理解并运用到游戏循环、对象创建、碰撞检测、物理模拟以及用户交互等多个方面的知识。这不仅是对JavaScript技能的考验，也是对游戏设计原理的深入学习。通过对源码的分析，我们可以更好地理解游戏开发过程，为自己的项目提供宝贵的参考。

资源推荐

资源详情

资源评论

收起资源包目录

Game_Code.zip （3个子文件）

Game_Code

Index.html 5KB

jquery-1.9.1.min.js 90KB

aaa.gif 2KB

<!doctype html> <html> <head> <title>游戏编程</title> <script type="text/javascript" src='jquery-1.9.1.min.js'></script> <style type="text/css"> body{background:#cccccc;} .cont{width:800px;height: 600px;border: 5px solid #8552a1;background:#78a355;position: absolute;left: 50%;top: 50%;margin-left: -400px;margin-top: -300px;overflow: hidden;} .bird{position: absolute;width: 40px;height: 40px;background:rgba(120,163,85, 0);border-radius: 50%;top: 200px;left: 425px;z-index: 11;background-image:url("aaa.gif");} .top{width: 50px;position: absolute;top: 0;background: green;right: -10px;} .bottom{width: 50px;position: absolute;bottom: 0;background:green;right: -10px;} .number{width: 100px;height: 30px;border: 2px solid black;position: absolute;left: 50%;top: 10px;margin-left: -50px;background:#bed742;z-index: 10;line-height: 30px;text-align: center;font-size:14pt;font-weight:bolder; } .letStart{width: 200px;height: 40px;border: 1px solid black;position: absolute;left: 50%;top: 50%;margin-left: -70px;background: #eeee00;color:red;font-weight:bolder;z-index: 10;line-height: 40px;text-align: center;margin-top: -20px; } </style> </head> <body onload="hello()"> <script type="text/javascript"> function hello(){ alert("欢迎进入！"); } var _html = [ "<div class='cont'>", "<div class='bird' id='div1'></div>", "<div class='number'>0</div>", "<div class='letStart'>Tips:按空格键开始</div>", "</div>" ].join(""),first = 0,nodeStop = true; function addStart(){ var speedY=1,_index =0,oDiv=document.getElementById('div1'), l1,r1,t1,b1,l2,r2,t2,b2,add=pan =num = move= null,number = 0;//鸟（l1,r1,t1,b1）柱（l2,r2,t2,b2）用于判断鸟与柱间位置关系来确定是否撞了 move = setInterval(function (){ speedY+=1.3;//鸟下落速度 var t=oDiv.offsetTop+speedY; if(t>=$('.cont').height()-oDiv.offsetHeight){ speedY=0; t=$('.cont').height()-oDiv.offsetHeight; } //落地了 if(oDiv.offsetTop == $('.cont').height()-$(oDiv).height()){ speedY=0; if(nodeStop) stop(); } oDiv.style.top=t+'px'; }, 30); $('body').bind({ keydown:function(e){ if(e.which == 32){ speedY= -15; } } }); add =setInterval(function(){ var m = b(30,400),s = (600 - m )-180;//160为上下宽度 $('<div class="top'+_index+' top node" style="height:'+m+'px"></div>').appendTo('.cont'),//将上柱添加到cont的div $('<div class="bottom'+_index+' bottom node" style="height:'+s+'px"></div>').appendTo('.cont'),//将下柱添加到cont的div $('.top'+_index).animate({'right':750},3500,'linear',function(){$(this).detach()}),//用3500ms将上柱缓慢移动距离右边750像素时移除这个上柱 $('.bottom'+_index).animate({'right':750},3500,'linear',function(){$(this).detach()});//下柱同上，与上柱保持一致 num = setTimeout(function(){ number++, $('.number').html(number); },2000); setTimeout(function(){ if(oDiv.offsetTop<0)stop(); },880); },1600);//此处的1500为每1.5秒产生一对 pan = setInterval(function(){ if(('.node').length){ for(var i = 0; i <$('.node').length;i++){ if(jc($(oDiv),$('.node:eq('+i+')'))){} else{ if(nodeStop)stop(); } } } },30); function b(n,m){ return parseInt(Math.random()*(m-n))+n }; function stop(){ nodeStop = false, clearInterval(add), $('body').unbind(),//撞到后不再绑定空格按键，避免撞到后继续跳动 speedY = 3, clearInterval(pan), clearTimeout(num), setTimeout(function(){ $('.node').stop(); },150), setTimeout(function(){ $('.node').stop(); },200), setTimeout(function(){ clearInterval(move); $('.letStart').fadeIn().html('按空格键重新开始'), $('body').keydown(function(e){ if(e.which == 32){ nodeClier(); } }) },1500) } function jc(node,node2){ l1 = node.offset().left; r1 = node.offset().left+parseInt(node.width()); t1 = node.offset().top; b1 = node.offset().top+parseInt(node.height()); l2 = node2.offset().left; r2 = node2.offset().left+parseInt(node2.width()); t2 = node2.offset().top; b2 = node2.offset().top+parseInt(node2.height()); return l2>r1||r2<l1||t2>b1||b2<t1?true:false; }; } function nodeClier(){ nodeStop = true; first?nodeNotQuit():nodeQuit(); }; function nodeQuit(){ first = 1; $('body').unbind().html(_html).bind({ keydown:function(e){ if(e.which == 32){ $('body').unbind(), $('.letStart').stop().fadeOut(), addStart(); } } }); }; function nodeNotQuit(){ $('body').unbind().html(_html), $('.letStart').html('按空格键从新开始').stop().fadeOut(),addStart(); } nodeClier(); </script> </body> </html>

评论收藏

内容反馈