《游戏学习》| html5 飞翔的小鸟小游戏代码示例

游戏截图

开始界面

游戏界面

结束界面

项目代码结构

总共包含几张图片、index.html和brid.js文件。

index.html完整代码展示

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>BIRD飞飞飞</title><style>#contaner{width: 100%;height: 600px;margin: 0px auto;background: url(images/sky.png);position: relative;overflow: hidden;text-align: center;}#contaner #bird{background: url(images/bird1.png) no-repeat;position: absolute;top: 230px;width: 30px;height: 30px;left: 50%;}#contaner h2{font-weight: bold;color: #fff;cursor: pointer;top: 290px;position: absolute;left: 50%;margin-left: -30px;animation: bound 0.3s ease-in-out 0s infinite alternate;}@keyframes bound{0%{transform: scale(1);}25%{transform: scale(0.8);}50%{transform: scale(1.2);}100%{transform: scale(1.5);color: #09f;}}#contaner #success{width: 300px;height: 300px;font-weight: bold;margin: 60px -150px;position: absolute;z-index: 999;left: 50%;text-align: center;display: none;}#mask{position: fixed;top: 0;left: 0;right: 0;bottom: 0;background: #000;opacity: 0.8;z-index: 99;display: none;}#contaner #success h1{font-size: 35px;margin-top: 40px;color: #f00;}#contaner #success #results,span{margin-top: 20px;color: #ff0;font-size: 20px;font-weight: bold;}#contaner #co{color: #fff;font-weight: bold;font-size: 30px;position: fixed;top: 0;left: 50%;z-index: 99;}</style>
</head>
<body>
<div id="contaner"><p id="co"></p><div id="bird"></div><h2 id="new">点击开始</h2><div id="mask"></div><div id="success"><h1>Game Over</h1><span>You   Results:</span><p id="results"></p></div></div>
<script src="bird.js"></script>
</body>
</html>

bird.js完整代码展示

var start=document.getElementById('new');var flying=true;//用于判断小鸟的运动// 初始化小鸟var birds={stepx: 52,stepy: 0,x: bird.offsetLeft,y: bird.offsetTop}//背景var sky={x: 0}var count=0;//计数var bg=setInterval(function(){sky.x-=2;//控制背景移动contaner.style.backgroundPositionX=sky.x+'px';birds.stepy+=1;//小鸟下落birds.y+=birds.stepy;if(birds.stepy>=10){//小鸟运动birds.stepy=-10;//小鸟飞起birds.y+=birds.stepy;}bird.style.top=birds.y+'px';},30)start.onclick=function(){//开始游戏start.style.display='none';co.innerHTML=count;results.innerHTML=count;clearInterval(bg);//清除小鸟自动飞birds.stepy=0;//初始化setInterval(function(){if(flying){sky.x-=5;contaner.style.backgroundPositionX=sky.x+'px';//控制背景移动birds.y+=birds.stepy;birds.x=birds.stepx;birds.stepy+=1;//小鸟下落if(birds.y<=0){//判断小鸟是否撞到顶flying=false;mask.style.display="block";success.style.display="block";co.style.display="none";}if(birds.y+bird.offsetHeight>=600){//判断小鸟是否掉落到底flying=false;mask.style.display="block";success.style.display="block";co.style.display="none";}bird.style.top=birds.y+'px';bird.style.left=birds.x+'px';}},30)contaner.onclick=function(){//点击birds.stepy=-10;//点击一次小鸟飞起}function createzz(x){//初始化柱子属性var zz={};zz.x=x;zz.uheight=50+Math.ceil(Math.random()*200);//随机上柱子的高度zz.dheight=600-150-zz.uheight;//下柱子的高度//创建柱子var uzz=document.createElement('div');//创建上柱子uzz.style.height=zz.uheight+'px';uzz.style.width='52px';uzz.style.position='absolute';uzz.style.left=zz.x+'px';uzz.style.background='url(images/pipe2.png) no-repeat center bottom';uzz.style.top='0px';contaner.appendChild(uzz);var dzz=document.createElement('div');//创建下柱子dzz.style.width='52px';dzz.style.height=zz.dheight+'px';dzz.style.position='absolute';dzz.style.left=zz.x+'px';dzz.style.background='url(images/pipe1.png) no-repeat';dzz.style.top=zz.uheight+150+'px';contaner.appendChild(dzz);setInterval(function(){//控制柱子移动if(flying){zz.x-=5;uzz.style.left = zz.x + 'px';dzz.style.left = zz.x + 'px';if(zz.x<=-52){//柱子移动到左边后回到右边一直循环zz.x=1450;}if(zz.x>=0 && birds.x >= zz.x+52){//判断小鸟飞过柱子并计数count++;co.innerHTML=count;results.innerHTML=count;}//判断小鸟有没有撞到柱子var ucheck=birds.x + 30 > zz.x && birds.x < zz.x + 52 && birds.y <= zz.uheight;var dcheck=birds.x + 30 > zz.x && birds.x < zz.x + 52 && birds.y+30 >= zz.uheight + 150;if(ucheck || dcheck){flying=false;mask.style.display="block";success.style.display="block";co.style.display="none";}}},30)}
createzz(300);//第一对柱子
createzz(600);//第二对柱子
createzz(900);//第三对柱子
createzz(1200);//第四对柱子
createzz(1500);//第五对柱子
}

完整代码下载

html飞翔的小鸟(FlappyBird)小游戏-游戏开发文档类资源-CSDN下载代码有注释简单易懂更多下载资源、学习资料请访问CSDN下载频道.https://download.csdn.net/download/weixin_40986713/71896220

《游戏学习》| html5 飞翔的小鸟小游戏代码示例相关推荐

基于HTML5canvars的小游戏,利用HTML5实现Canvas激流勇进小游戏代码
特效描述:利用HTML5实现 Canvas 激流勇进小游戏代码.利用HTML5实现Canvas激流勇进小游戏代码代码结构 1. 引入JS 2. HTML代码进入游戏游戏玩法:使用左键.右键和上 ...
Java开发的飞翔的小鸟小游戏408 功能非常齐全完整源码
今天为大家继续分享飞翔的小鸟游戏的开发与制作 408,目前系统已经完成了初步功能,后续会进一步完善.整个系统界面漂亮,有完整得源码,希望大家可以喜欢.喜欢的帮忙点赞和关注.一起编程.一起进步开发环境 ...
飞翔的小鸟java_java 飞翔的小鸟小游戏源码
[实例简介]小鸟躲避障碍物,以及计分. 游戏规则:只要鼠标不断点击,小鸟就向上飞,不要小鸟碰到障碍物为赢 [实例截图] [核心代码] package day06; import java.awt. ...
C语言实现飞翔的小鸟小游戏
参考视频https://www.bilibili.com/video/BV1Xo4y1R7hs 缺陷:撞柱子功能暂未实现 //飞翔的小鸟 #include<stdio.h>//C语言标准头 ...
python小游戏源码-python 像素小鸟小游戏源码(flappybird)
[实例简介] 像素小鸟这个简单的游戏于2014年在网络上爆红,游戏上线一段时间内appleStore上的下载量一度达到5000万次,风靡一时 [实例截图] [核心代码] from Class impo ...
《游戏学习》Java版俄罗斯方块小游戏源码实战
[Java版俄罗斯方块] 增加保存配置信息到文件的功能,声音设置.显示设置.关卡选择等配置信息在修改后将会保存在jar包同级目录下(以jar相同的文件名+.cfg后缀保存) [菜单选项] ...
html5 射击小游戏demo,html5写的射击小游戏
通过设置小球的水平速度和竖直速度,让小球射击右侧在墙上的小球,当两个小球碰撞时,墙上的小球会有新的位置.游戏同时可以记录打中的球的个数. 以下是代码: var cwidth=600//画布宽 var ...
《游戏学习》经典打地鼠html小游戏whack-a-mole代码详解
源码下载地址:https://download.csdn.net/download/weixin_40986713/18549340 下载解压后,文件如下 index.html页面源码如下 <! ...
HTML小游戏20 —— html5版开心斗地主小游戏（附完整源码）
HTML小游戏19 —— html5版开心斗地主小游戏（附完整源码）

《游戏学习》| html5 飞翔的小鸟小游戏代码示例

《游戏学习》| html5 飞翔的小鸟小游戏代码示例相关推荐

最新文章

热门文章

《游戏学习》| html5 飞翔的小鸟 小游戏代码示例

《游戏学习》| html5 飞翔的小鸟 小游戏代码示例相关推荐

最新文章

热门文章

《游戏学习》| html5 飞翔的小鸟小游戏代码示例

《游戏学习》| html5 飞翔的小鸟小游戏代码示例相关推荐