1.整体项目框架

2.css样式

*{padding: 0px;margin: 0px;}#game{width: 800px;height: 600px;background-image: url(img/bg.png);position: relative;overflow: hidden;/*溢出隐藏*/}#bird{width: 34px;height: 25px;background: url(img/bird.png) -8px -10px no-repeat;position: absolute;top: 100px;left: 100px;}#score{color: red;position: absolute;top: 15px;left: 25px;z-index: 100;}#start{position: absolute;top: 190px;left: 300px;z-index: 150;}

3. 游戏初始化：

1.获取背景和小鸟的对象
           2.初始化天空和小鸟的位置
           3.移动背景图片，将背景图的横坐标X连续减少5px,使它往左移动；
           4.背景图片移动的同时设置小鸟持续下落，鸟的纵坐标Y连续增加1px,
           5.小鸟下落做碰撞判断：
   5.1判断小鸟落到地上，gameover
           5.2判断小鸟飞出天际，gameover
           6.键盘向上键UP控制小鸟向上飞，每次飞10px;
           7.创建管道：
           7.1创建管道对象
           7.2初始化管道位置
           7.3初始化上下管道的长度
           7.4创建管道容器div，分别设置容器的属性：宽度、高度、背景图、绝对位置
              7.5将管道节点添加到天空背景节点中
           8.让管道向左移动setInterval()
           8.1设置管道初始位置
           8.2设置管道的随机高度
              8.3创建管道容器div
           8.4设置容器样式
  8.5添加容器到背景中
           9.让管道动起来
           9.1管道的横坐标依次减少
  9.2管道超出屏幕再设置从头开始进入
           9.3累计分数：通过一根管道加一分
           9.4判断小鸟的碰撞

<div id="game"><span id="score">得分是：0</span><div id="bird"></div></div><script type="text/javascript">var count=0;var score=document.getElementById("score");var game=document.getElementById("game");var birdEl=document.getElementById("bird");//初始化天空的位置var sky={x:0}//初始化小鸟的位置bird={speedX: 5,speedY: 0,x:birdEl.offsetLeft,y:birdEl.offsetTop}var running=true;//默认游戏开始/** 水平移动背景*/setInterval(function(){if (running) {//播放音乐//playSound("sound/赵传 - 我是一只小小鸟.mp3");//屏幕连续水平移动5像素sky.x-=5;game.style.backgroundPositionX=sky.x+"px";//小鸟持续下降bird.speedY+=1;bird.y+=bird.speedY;if(bird.y<0){//小鸟飞出天际running=false;bird.y=0;console.log(birdEl.offsetHeight);gameover();}if(bird.y+birdEl.offsetHeight>600){running=false;bird.y=600-birdEl.offsetHeight;gameover();}//固定在死亡的位置birdEl.style.top = bird.y+"px";}},30);/** 键盘操作小鸟向上飞*/document.onkeydown=function(){var key=event.keyCode;if(key==38){bird.speedY =-10;}}function createPipe(positionX){//7.1创建管道对象var pipe={};//7.2初始化管道位置pipe.x=positionX;//7.3初始化上下管道的长度pipe.uHeight=200+parseInt(Math.random()*100);pipe.dHeight=600-pipe.uHeight-200;pipe.uTop=pipe.uHeight+200;//7.4创建管道容器div，分别设置容器的属性：宽度、高度、背景图、绝对位置var uPipe=document.createElement("div");uPipe.style.width="52px";uPipe.style.height=pipe.uHeight+"px";uPipe.style.background="url('img/down.png') no-repeat center bottom";uPipe.style.position="absolute";uPipe.style.top="0px";uPipe.style.left=pipe.x+"px";//7.5将管道节点添加到天空背景节点中game.appendChild(uPipe);var dPipe=document.createElement("div");dPipe.style.width="52px";dPipe.style.height=pipe.dHeight+"px";dPipe.style.background="url(img/up.png) no-repeat center top";dPipe.style.position="absolute";dPipe.style.top=pipe.uTop+"px";dPipe.style.left=pipe.x+"px";game.appendChild(dPipe);//9.让管道动起来setInterval(function(){if(running){pipe.x-=3;//移动位置uPipe.style.left=pipe.x+"px";dPipe.style.left=pipe.x+"px";//管道超出屏幕再设置从头开始进入if (pipe.x<-52) {pipe.x=800;}//累计分数：通过一根管道加分if(bird.x>pipe.x+52){count+=1;score.innerHTML="<h3>得分："+count+"</h3>"}//判断小鸟的碰撞var uCrash=bird.x+34>pipe.x && bird.x<pipe.x+52 && bird.y<pipe.uHeight;var dCrash=bird.x+34>pipe.x && bird.x<pipe.x+52 && bird.y>pipe.uHeight+180;if(uCrash || dCrash){running=false;gameover();}}},30);}

4.游戏结束提示

function gameover(){var over=document.createElement("img");over.src="img/gameover.png";over.style.position="absolute";over.style.top="190px";over.style.left="330px";over.style.zIndex="150";game.appendChild(over);}createPipe(400);createPipe(600);createPipe(800);createPipe(1000);</script>

5.效果图

注：使用键盘上下键控制小鸟。

使用HTML5制作的网页游戏-管道小鸟（附源码）相关推荐

20220517 Python 制作一个儿童学习软件（附源码和软件下载）包含语音合成视频播放 pyqt pptsx3 Qmovie request pygame 音频播放
20220517 Python 制作一个儿童学习软件 (附源码和软件下载) 包含语音合成视频播放 pyqt pptsx3 Qmovie request pygame 音频播放文章目录 202205 ...
html直播动画,HTML5 直播疯狂点赞动画实现代码附源码
直播有一个很重要的互动: 为了烘托直播间的氛围,直播相对于普通视频或者文本内容,点赞通常有两个特殊需求: 点赞动作无限次,引导用户疯狂点赞直播间的所有疯狂点赞,都需要在所有用户界面都我们先来看效果 ...
疯狂html附源码,科技常识：HTML5 直播疯狂点赞动画实现代码附源码
今天小编跟大家讲解下有关HTML5 直播疯狂点赞动画实现代码附源码 ,相信小伙伴们对这个话题应该有所关注吧,小编也收集到了有关HTML5 直播疯狂点赞动画实现代码附源码的相关资料,希望小伙伴们看 ...
html5直播源码,HTML5 直播疯狂点赞动画实现代码附源码
直播有一个很重要的互动:点赞. 为了烘托直播间的氛围,直播相对于普通视频或者文本内容,点赞通常有两个特殊需求: 点赞动作无限次,引导用户疯狂点赞直播间的所有疯狂点赞,都需要在所有用户界面都动画展现出 ...
天天酷跑php源码_Java实现天天酷跑小游戏完整代码(附源码)
首先,写一个需求文档: 一.项目名称:<天天酷跑>(RunDay) 二.功能介绍: 闯关类游戏,玩家登录后,选择进入游戏,通过键盘控制玩家的上下左右移动,来躲避障碍物和吃金币,玩家躲避的 ...
零基础教你Unity制作像素鸟游戏【文末源码】
爆肝三天终于写完了,一文教你从零开启Unity制作像素鸟游戏前言一,新建目录二,制作材质三,场景搭建四,创建地图五,制作管道六,创建主角七,小鸟动起来八,游戏状态控制九,摄像机跟随 ...
贪吃蛇游戏实践（附源码），链表的应用！
本文由"壹伴编辑器"提供技术支前言今天我们介绍的项目,是各位大多数人都有玩过,就算没玩过也不可能没听过的一款经典游戏,那就是贪吃蛇 . 制作一个贪吃蛇游戏也有许多不同的方 ...
这下终于可以方便地发表测试型网页代码了（附源码下载）
前言色彩斑斓的"马" 虽然利用插入代码功能可以很华丽的插入色彩斑斓的代码,但是就html(Xhtml)代码.js代码.css代码而言,我更喜欢想蓝色理想论坛中的那种:有个文本框, ...
HTML/JSP/CSS网页编写实例，附源码
最近在刚接触web前端,学习网页编写,虽然网上案例很多但是实战起来还是问题很多,经过不懈努力终于完成了一个简单的web页面,在此记录一下,分享源码大家共同学习. 最终效果如下: 如上图所示整个页面有5 ...

使用HTML5制作的网页游戏-管道小鸟（附源码）

1.整体项目框架

2.css样式

3. 游戏初始化：

4.游戏结束提示

5.效果图

使用HTML5制作的网页游戏-管道小鸟（附源码）相关推荐

最新文章

热门文章