小游戏---html飞翔的小鸟

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>飞翔的小鸟</title><style type="text/css">@keyframes move{0% {top: 100px;}50%{top: 120px;}100%{top: 100px;}}@keyframes sliderMove{0%{left:0;}100%{left: -343px;}}@keyframes birdMove{0%{background: url(img/bird0.png);}100%{background: url(img/bird1.png);}}*{margin: 0; padding: 0; list-style: none;}#fbWrap{width: 343px; height: 480px; background: url(img/bg.jpg); margin: 0 auto; position: relative; overflow: hidden;}#sliderWrap{position: absolute; top: 422px; width: 99999px; animation: sliderMove 4s linear infinite;}#sliderWrap img{float: left;}#head{position: absolute; top: 100px; left: 55px; animation: move 2s ease-in infinite;}#head span{position: absolute; left: 200px; background: url(img/bird0.png); height: 26px; width: 40px; top: 20px; animation: birdMove 0.5s linear infinite;}#scoring{position: absolute; top: 50px; text-align: center; width: 100%; z-index: 2;}#pipeWrap{height: 100%;}.pipe{width: 62px; height: 88%; position: absolute;}.top_pipe{position: absolute; top: 0; background: url(img/up_mod.png); width: 62px;}.top_pipe div{background: url(img/up_pipe.png) 0 bottom no-repeat;}.bottom_pipe{background: url(img/down_mod.png); width: 62px; position: absolute; bottom: 0;}.bottom_pipe div{background: url(img/down_pipe.png) 0 top no-repeat;}#flappyBird{position: absolute; left: 50px; top: 200px; display: none;}#menu{position: absolute; left: 59px; top: 300px; text-align: center;}#start{height: 29px; width: 85px; float: left; background: url(img/start.jpg);}#submit{height: 29px; width: 85px; float: left; margin-left: 30px; background: url(img/submit.jpg);}#message{width: 269px; height: 135px; background: url(img/message.jpg); position: absolute; left: 34px; top: 500px; font-size: 30px; font-weight: bold; -webkit-transition:all 1s cubic-bezier(0.2,-0.5,0.8,1.5);}#endScoring{position: absolute; right: 25px; top: 30px;}#oldScoring{position: absolute; right: 25px; top: 80px;}#gameover{position: absolute; top: -50px; left: 65px; -webkit-transition:all 1s cubic-bezier(0.2,-0.5,0.8,1.5);}#ok{position: absolute; top: 320px; left:-120px; -webkit-transition:all 1s cubic-bezier(0.2,-0.5,0.8,1.5);}</style></head><body><div id="fbWrap"><div id="sliderWrap"><img src="img/slider.jpg" alt=""><img src="img/slider.jpg" alt=""></div><div id="head"><img src="img/head.jpg" alt=""><span></span></div><div id="scoring"><img src="img/0.jpg" alt=""></div><ul id="pipeWrap"><!-- <li class="pipe" style="left:200px;"><div class="top_pipe"><div style="height:120px;"></div></div><div class="bottom_pipe"><div style="height:180px;"></div></div></li> --></ul><div id="flappyBird" class="up"><img src="img/bird0.png" alt=""></div><div id="menu"><div id="start"></div><div id="submit"></div></div><div id="message"><div id="endScoring">121</div><div id="oldScoring">12</div></div><div id="ok"><img src="img/ok.jpg" alt=""></div><div id="gameover"><img src="img/game_over.jpg" alt=""></div><audio id="gameMusic" loop src="音频/game_music.mp3"></audio><audio id="bullet" src="音频/bullet.mp3"></audio><audio id="gameOverMusic" src="音频/game_over.mp3"></audio></div></body>
</html>
<script type="text/javascript">var fbWrap=document.getElementById("fbWrap");var oHead=document.getElementById("head");var scoring=document.getElementById("scoring");var pipeWrap=document.getElementById("pipeWrap");var flappyBird=document.getElementById("flappyBird");var flappyBirdImg=flappyBird.children[0];var menu=document.getElementById("menu");var start=document.getElementById("start");var message=document.getElementById("message");var endScoring=document.getElementById("endScoring");var oldScoring=document.getElementById("oldScoring");var gameover=document.getElementById("gameover");var gameMusic=document.getElementById("gameMusic");var bullet=document.getElementById("bullet");var gameOverMusic=document.getElementById("gameOverMusic");var aScoringImg=["img/0.jpg","img/1.jpg","img/2.jpg","img/3.jpg","img/4.jpg","img/5.jpg","img/6.jpg","img/7.jpg","img/8.jpg","img/9.jpg"];    var downTimer=null;//小鸟下落定时器var upTimer=null;//小鸟飞起定时器var crashTestTimer=null;//碰撞检测定时器var speedupTimer=null;//切换小鸟图片定时器var createPipeTimer = null;//创建管道var speed=0;//初始速度var maxSpeed=8;//最大速度var gameIsOver=false;//假设游戏结束为假var scoringNumber=0;//分数var arrImg = [];//分数图片数组// 进入游戏就把图片预加载一下loadImg();// 重置ok.onclick = function () {// 点击ok重新加载当前文档location.reload(); //重新加载当前文件的方法}// 点击开始按钮，游戏开始start.onclick = function (ev) {// 将开始菜单上没用的部分隐藏掉oHead.style.display = 'none';menu.style.display = 'none';// 打开游戏音乐gameMusic.play();// 阻止冒泡事件// 不同版本下的事件对象不同，先做下兼容var oEvent = ev || window.event;oEvent.cancelBubble = true;// 显示小鸟flappyBird.style.display = 'block';// 如果不点击屏幕，那小鸟下落摔到地上downTimer = setInterval(down,30);// 如果点击屏幕，调用fnTouchdocument.addEventListener('click', fnTouch, false);// 进行碰撞检测crashTestTimer = setInterval(function () {// 先获取屏幕上所有的管道var aLi = pipeWrap.getElementsByTagName('li');// 遍历所有的lifor (var i=0; i<aLi.length; i++) {// 每个li中有两根管道，需要分别检测两根管道crashTest(aLi[i].children[0]);crashTest(aLi[i].children[1]);}// 边缘检测rangeTest();},30);//生成管道createPipeTimer = setInterval(createPipe,3000);// 阻止默认行为return false;}// 碰撞检测函数function crashTest(obj){var l1=flappyBird.offsetLeft;var r1=l1+flappyBird.offsetWidth;var t1=flappyBird.offsetTop;var b1=t1+flappyBird.offsetHeight;console.log('offsetLeft'+obj.offsetLeft);console.log('offsetParent'+obj.offsetParent.offsetLeft);//obj.offsetLeft//obj是上管道或者下管道//obj.offsetLeft代表的上下管道距离oLi的left值，所以为0//得不到我们想要获取的值，所以我们写成obj.offsetParent.offsetLeft//obj.offsetParent表示//找到var l2=obj.offsetParent.offsetLeft;var r2=l2+obj.offsetWidth;var t2=obj.offsetTop;var b2=t2+obj.offsetHeight;if (r1>l2&&l1<r2&&b1>t2&&t1<b2){fnGameOver();}}//边缘检测function rangeTest() {var t1 = flappyBird.offsetTop;var b1 = t1 + flappyBird.offsetHeight;if(t1 <= 0 || t1 >= 392){ //如果小鸟掉在地上或者超出天花板fnGameOver();}}
//游戏结束function fnGameOver(){//游戏结束关闭所以定时器clearInterval(upTimer);clearInterval(downTimer);clearInterval(crashTestTimer);clearInterval(speedupTimer);clearInterval(createPipeTimer);//停止游戏音乐gameMusic.pause();//打开游戏结束音乐if(!gameIsOver){gameOverMusic.play();}//gameover中的各种菜单和按钮出现gameover.style.top = '120px';message.style.top = '180px';ok.style.left = '118px';//小鸟落下gameoverDown();//显示分数endScoring.innerHTML = scoringNumber;//记录最佳成绩//本地存储，我们选择localstorage存储//首先先从本地读出历史最好成绩//将best跟本次分数比较，如果本次分数高，更新localstorage存储中的最好成绩；如果本次分数低，不做更新if(window.localStorage.getItem('scoring') < scoringNumber){//将新的最好成绩存入window.localStorage.setItem('scoring',scoringNumber);//在bset的地方显示最好的成绩oldScoring.innerHTML = window.localStorage.getItem('scoring');}//将gameisover置为truegameIsOver = true;}//生成管道：隔一定时间间隔生成管道，生成的管道移动function createPipe(){//生成管道，创建元素var oLi = document.createElement('li');oLi.className = 'pipe';var bAddScoring = true;//记录这根管道是否被计算过//管道生成后默认在屏幕的最左侧//我们让管道向右移动一个屏幕的宽度，也就是maxWigth//然后让maxWidth递减，并将maxWidth的值赋给管道的.left,实现移动var maxWidth = fbWrap.offsetWidth;oLi.style.left = maxWidth + 'px';//管道的长度随机生成var topHeight = rand(52,250);var bottomHeight = 300-topHeight;//向oli添加代码oLi.innerHTML = "<div class='top_pipe'>"+"<div style='height:"+topHeight+"px;'></div>"+"</div>"+"<div class='bottom_pipe'>"+"<div style='height:"+bottomHeight+"px;'></div>"+"</div>"//将生成的管道追加到父级pipeWrap.appendChild(oLi);//管道移动oLi.leftTimer = setInterval(function(){maxWidth -= 2;//管道移动过程中，gameover，需要清除.leftTimer定时器if(gameIsOver){clearInterval(oLi.leftTimer);return;}//管道移动出屏幕，需要把管道移除if(maxWidth < -oLi.offsetWidth){clearInterval(oLi.leftTimer);pipeWrap.removeChild(oLi);}//小鸟顺利的从管道通过，也就是管道顺利的移动到了屏幕左侧附近//小鸟顺利通过管道后需要计算分数，加分//如果不用bAddScoring记录这根管子是否计算过//那么当管道的maxWidth<25之后，每次走到这个判断条件都会进行加分if(bAddScoring && maxWidth<=25){scoringNumber++;//计算分数fnScoring();bAddScoring = false;}oLi.style.left = maxWidth + 'px';},30);}//计算分数的函数function fnScoring(){//先把原来图片清除掉scoring.innerHTML = '';//scoringNumber是一个数，比如13，我们要是想取出1和3，把scoringNumber//转化成一个字符串更容易操作，只需遍历字符串，取出每个字符即可//数字和字符串先加，得到字符串，+空字符串，就把ScoringNumber转化成了字符串var sScoring = scoringNumber+'';for(var i = 0;i < sScoring.length; i++){var oImg = document.createElement('img');oImg.src = arrImg[sScoring.charAt(i)].src;scoring.appendChild(oImg);}}//生成随机function rand(min,max){return parseInt(min+Math.random()*(max-min));}// 小鸟的行为// 上升，下落，屏幕被点击时加速，gameover时挂掉下落// 小鸟上升过程function up() {// 向上是一个减速过程speed -= 0.7;// 当速度减小到0的时候开始下落// 对speed进行取整的方法:parseInt()if (parseInt(speed) <= 0) {// 下落首先要换图片flappyBirdImg.src = 'img/down_bird1.png';speed = 0;clearInterval(upTimer);// 开始下落downTimer = setInterval(down,30);}flappyBird.style.top = flappyBird.offsetTop- speed +'px';}// 封装下落的过程function down() {// 下落是越落越快的过程speed += 0.4;// 速度不允许一直变大，当speed>=maxSpeed时，就让速度一直为maxSpeed，也就是一直以最大速度下落if (speed >= maxSpeed) {speed = maxSpeed;}flappyBird.style.top = flappyBird.offsetTop + speed + 'px';}// 屏幕被点击时function fnTouch() {// gameIsOver:通过一个bool值gameIsOver，来记录游戏是否结束// 判断，当游戏的状态为没有结束时，点击屏幕才有作用if (!gameIsOver) {// 播放小鸟被点击的音乐bullet.play();// 清除一下定时器clearInterval(speedupTimer);clearInterval(upTimer);clearInterval(downTimer);// 点击屏幕小鸟飞行的速度变快speed = 8;// 小鸟飞行的过程// 点击屏幕的时候小鸟飞行的速度变快变为8，然后就开始减速向上飞// 速度从8开始慢慢递减// 当速度减到0的时候小鸟开始下落// 下落的过程是越落越快的，也就是说速度递增// 点击屏幕，让小鸟以8的速度飞两次(飞两个时间间隔)，然后开始减速上升// index用来记录飞行次数var index = 0;speedupTimer = setInterval(function () {// 小鸟由静止到飞行，先更换图片flappyBirdImg.src = 'img/up_bird1.png';index++;if (index>1) {clearInterval(speedupTimer);// 开始减速上飞upTimer = setInterval(up, 30);}// 小鸟向上飞实际上是更改top值flappyBird.style.top = flappyBird.offsetTop - speed + 'px';},30);}}// 小鸟挂掉function gameoverDown() {flappyBird.style.transition = 'all 0.5s linear';flappyBirdImg.src = 'img/down_bird1.png';flappyBird.style.top = '392px';}// 图片预加载function loadImg() {// aScoringImg:分数图片存放在这个数组中// 循环遍历aScoringImg数组for (var i=0; i<aScoringImg.length; i++) {// 创建图片的对象var newImg = new Image();// 将aScoringImg数组中的图片路径赋给newImg对象newImg.src = aScoringImg[i];// 图片对象自带onload方法，这个方法会在图片加载完成后立即调用// 也就是保证图片能够提前被预加载出来newImg.onload  = function () {// arrImg中的图片已经预加载完成arrImg.push(this);}}}
</script>

转载于:https://www.cnblogs.com/Aledebaran/p/6033593.html

小游戏---html飞翔的小鸟相关推荐

【源码+教程】Java课设项目_12款最热最新Java游戏项目_Java游戏开发_Java小游戏_飞翔的小鸟_王者荣耀_超级玛丽_推箱子_黄金矿工_贪吃蛇
马上就要期末了,同学们课设做的如何了呢?本篇为大家带来了12款热门Java小游戏项目的源码和教程,助力大家顺利迎接暑假![源码+教程]Java课设项目_12款最热最新Java游戏项目_Java游戏开发 ...
C语言跳过障碍物小游戏,html5飞翔的小鸟越过障碍物小游戏代码
一款简单好玩的html5 canvas飞翔的小鸟越过障碍物小游戏代码,玩法:点击鼠标控制小鸟飞行. 查看演示下载资源: 11 次下载资源下载积分: 30 积分 js代码 var cvs = do ...
C语言小游戏：飞翔的小鸟（完整版）
每天一个C语言小项目,提升你的编程能力! <Flappy Bird>是曾经一款流行的一款手机游戏,你只要让小鸟保持飞行,不要碰到绿色的管道就可以啦.操作虽然简单,但是非常具有挑战!本次我 ...
【Java实现小游戏】飞翔的小鸟（源码）
游戏玩法:通过鼠标点击使小鸟上下移动穿过柱子并完成得分,小鸟碰到柱子或掉落到地面上都会结束游戏. (游戏内图片) 下面是实现这个游戏的代码: Brid类: package bird;import or ...
学着做的第一个小游戏 flappyBrid 飞翔的小鸟有图片资源
<!DOCTYPE html> <html> <head><title>飞鸟</title><style type="tex ...
js小游戏（飞行的小鸟--canvas）
js小游戏 (飞行的小鸟) 这个里面用到的主要是 canvas 绘图 <!DOCTYPE html> <html><head><meta charset=&q ...
纪念自己编写的第一个java小游戏，飞翔小鸟
我是一名Java初学者这是我写的第一个小游戏,特此纪念下 -------------------------------------------------------- 效果图: -------- ...
疯狂小鸟游戏 html,飞翔的小鸟游戏一（ html和导图）
导图: image.png html内容: flappy_bird canvas { border:1px solid red; } img { display: none; } var cvs = ...
原生JS写《像素鸟》的小游戏（下落的小鸟）
相信大家都玩过<像素鸟>(又名<下落的小鸟>),今天就教大家用原生JaveScript 实现像素鸟的游戏.还在为得不到高分而苦恼吗?今天学会了,游戏难易自己控制!!! 首先明白 ...
python带你成功复刻热门手机游戏——飞翔的小鸟
前言大家早好.午好.晚好吖 ❤ ~欢迎光临本文章飞翔的小鸟(游戏英文名:Flappy Bird) 一款由越南独立开发者开发的手机游戏,是之前非常流行的一款手机游戏小游戏目标:让小鸟穿过管子,不要 ...

小游戏---html飞翔的小鸟

小游戏---html飞翔的小鸟相关推荐

最新文章

热门文章