飞扬的小鸟JavaScript实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
/*游戏界面*/
#wrap{
width: 343px;
height: 480px;
background: url('bg.jpg');
margin: 0 auto;
position: relative;
overflow: hidden;
}
/*得分*/
#score_box{
width: 56px;
height: 39px;
position: absolute;
left: calc(50% - 28px);
top: 30px;
font-size: 0;
z-index: 100;
}
/*开场动画*/
#flash{
width: 236px;
height: 77px;
background: url('head.jpg');
position: absolute;
left: calc(50% - 118px);
top: 90px;
animation: flash 1s infinite alternate;
}
@keyframes flash{
from{
top: 90px;
}to{
top: 120px;
}
}
#flash div{
width: 40px;
height: 26px;
background: url('bird0.png');
position: absolute;
right: 0;
top: 18px;
animation: birdFly 0.5s infinite;
}
@keyframes birdFly{
from{
background: url('bird0.png');
}to{
background: url('bird1.png');
}
}
/*开始按钮*/
#start_btn{
width: 85px;
height: 29px;
background: url('start.jpg');
position: absolute;
left: calc(50% - 43px);
top: 300px;
}
/*马路*/
#banner{
width: 686px;
height: 14px;
position: absolute;
background: url(banner.jpg);
left: 0;
bottom: 43px;
animation: run 1s infinite linear;
}
@keyframes run{
from{
left: 0;
}to{
left: -343px;
}
}
/*小鸟*/
#bird{
width: 40px;
height: 30px;
position: absolute;
left: 30px;
top: 30px;
display: none;
}
/*小鸟死亡样式*/
.die{
top: 393px !important;
transition: all .5s linear;
}
.pipe{
width: 62px;
}
.pipe_t_box{
/*height: 100px;*/
position: absolute;
left: 418px;
top: 0;
background: url(up_mod.png);
}
.pipe_t_box img{
position: absolute;
bottom: 0;
}
.pipe_b_box{
/*height: 100px;*/
position: absolute;
left: 418px;
bottom: 57px;
background: url(down_mod.png);
}
.pipe_b_box img{
position: absolute;
top:0;
}
</style>
</head>
<body>
<!-- 游戏界面 -->
<div id="wrap">
<!-- 得分 -->
<div id="score_box">
<img src="0.jpg" id="ten">
<img src="0.jpg" id="one">
</div>
<!-- 开场动画 -->
<div id="flash">
<!-- <img src="bird0.png" alt=""> -->
<div></div>
</div>
<!-- 开始按钮 -->
<div id="start_btn"></div>
<!-- 马路 -->
<div id="banner"></div>
<!-- 游戏开始后的小鸟 -->
<img src="down_bird0.png" id="bird">
<!-- 柱子的模板 -->
<!-- <div class="pipe_t_box pipe">
<img src="up_pipe.png" alt="">
</div>
<div class="pipe_b_box pipe">
<img src="down_pipe.png" alt="">
</div> -->
</div>
</body>
<script>
//小鸟运动最大范围值
var maxH = 393;
// 小鸟运动的计时器
var birdTimer;
// 小鸟运动的速度
var speed = 0;
// 管到高度范围： min 69 max 393-60
var blank = 100;
var maxPipe = 393-60-blank;
var minPipe = 60;
// 获取页面中所有的管道(会动态改变)
var pipes = document.getElementsByClassName("pipe");
// Defen
num= 0;
//开始按钮
start_btn.onclick = function(e){
var e = e || window.event;
if (e.stopPropagation) {
e.stopPropagation();
}else{
e.cancleBubble = true;
}
// 隐藏开始按钮
this.style.display = "none";
// 隐藏开始动画
flash.style.display = "none";
// 显示小鸟
bird.style.display = "block";
birdFly();
var pipeTimer = setInterval(createPipe,2500);
}
// 小鸟运动的函数
function birdFly(){
birdTimer = setInterval(function(){
// 获取小鸟当前位置
var t = bird.offsetTop;
// 速度发生改变（小鸟并非匀速下落）
speed+=0.5;
// 对速度进行限制
if (speed >= 10) {
speed = 10;
}
// 切换小鸟飞行状态
if (speed > 0) {
// 说明小鸟在向下运动
bird.src = "down_bird0.png";
}else{
// 小鸟在向上运动
bird.src = "up_bird0.png";
}
// 改变位置
t+= speed;
// 对小鸟运动范围判断
if (t <= 0) {
t = 0;
}
if (t >= maxH) {
t = maxH;
clearInterval(birdTimer);
}
bird.style.top = t + "px";
// 判断碰撞
for(var i = 0 ; i < pipes.length ; i++){
if (isCrash(bird,pipes[i])) {
// 如果碰撞游戏结束
// 小鸟死亡样式
bird.className = "die";
// 关闭马路动画
banner.style.animationPlayState = "paused";
// 关闭页面中所有正在运行的计时器
clearTimer();
}
}
},30)
}
// 小鸟起飞 当点击开始按钮发现小鸟向上飞一下原因是事件事件冒泡 需要阻止
document.onclick = function(){
speed = -7;
}
// 创建管道的函数
function createPipe(){
var flag = true;
// 上管道
var pipeUp = document.createElement("div");
// 记录管道是否加过分数
pipeUp.className = "pipe_t_box pipe";
// 为管到设置高度
var upHeight = randomNum(minPipe,maxPipe);
pipeUp.style.height = upHeight + "px";
var imgUp = new Image();
imgUp.src = "up_pipe.png";
pipeUp.appendChild(imgUp);
// 下管道
var pipeDown = document.createElement("div");
pipeDown.className = "pipe_b_box pipe";
// 为下管道设置高度
pipeDown.style.height = maxH - upHeight - blank +"px";
var imgDown = new Image();
imgDown.src = "down_pipe.png";
pipeDown.appendChild(imgDown);
wrap.appendChild(pipeUp);
wrap.appendChild(pipeDown);
// 管道运动
var timer = setInterval(function(){
// 获取管道位置
var l = pipeDown.offsetLeft;
if (flag) {
if (bird.offsetLeft > pipes[0].offsetLeft+ pipes[0].offsetWidth) {
getNum();
// 标记为不可再加分
flag = false;
}
}
// 改变管道位置
l-=3;
pipeUp.style.left = l + "px";
pipeDown.style.left = l + "px";
// 运动范围进行判断
if (l <= -70) {
clearInterval(timer);
// 清除管道
pipeUp.remove();
pipeDown.remove()
}
},30)
}
// 碰撞检测的函数
function isCrash(b,p){
// 获得元素位置
var bl = b.offsetLeft;
var bt = b.offsetTop;
var br = bl + b.offsetWidth;
var bb = bt + b.offsetHeight;
var pl = p.offsetLeft;
var pt = p.offsetTop;
var pr = pl + p.offsetWidth;
var pb = pt + p.offsetHeight;
// 对位置关系进行判断
if (bl>pr || bt > pb || br < pl || bb < pt) {
return false;
}else{
// 一定碰撞了
return true;
}
}
// 关闭页面中所有计时器
function clearTimer(){
// 为了确定当前页面中已经开启多少个计时器
// var x ;
// setInterval(function(){
// var x = setInterval(function(){},1)
// },1)
for(var i = 0 ; i <= 10000;i++){
clearInterval(i);
}
}
// 得分函数
function getNum(){
// 得分加1
num++;
if (num < 10) {
one.src = num+".jpg";
}else{
// 十位数图片
ten.src = parseInt(num/10)+".jpg";
// 个位数图片
one.src = num%10 +".jpg";
}
}
// 随机数函数
function randomNum(min,max){
return Math.floor(Math.random()*(max-min)+min);
}
</script>
</html>
飞扬的小鸟JavaScript实现相关推荐
- Star Way To Heaven （prim最小生成树） // [ NOIP提高组 2014]飞扬的小鸟（DP）
文章目录 T1:Star Way To Heaven 题目 题解 代码实现 T2:飞扬的小鸟 题目 题解 代码实现 T1:Star Way To Heaven 题目 小 w 伤心的走上了 Star w ...
- c++飞扬的小鸟游戏_通过建立一个飞扬的鸟游戏来学习从头开始
c++飞扬的小鸟游戏 Learn how to use Scratch 3.0 by building a flappy bird game in this course developed by W ...
- [DP]Luogu 2014NOIP提高组 飞扬的小鸟题解
2014NOIP提高组飞扬的小鸟题解 题目描述 Flappy Bird是一款风靡一时的休闲手机游戏.玩家需要不断控制点击手机屏幕的频率来调节小鸟的飞行高度,让小鸟顺利通过画面右方的管道缝隙.如果小鸟一 ...
- Luogu 1941 【NOIP2014】飞扬的小鸟 （动态规划）
Luogu 1941 [NOIP2014]飞扬的小鸟 (动态规划) Description Flappy Bird 是一款风靡一时的休闲手机游戏.玩家需要不断控制点击手机屏幕的频率来调节小鸟的飞行高度 ...
- 洛谷P1941 飞扬的小鸟
P1941 飞扬的小鸟 链接:https://www.luogu.org/problemnew/show/P1941 题目描述 Flappy Bird是一款风靡一时的休闲手机游戏.玩家需要不断控制点击 ...
- Codevs 3729==洛谷P1941 飞扬的小鸟
P1941 飞扬的小鸟 456通过 2.4K提交 题目提供者该用户不存在 标签动态规划2014NOIp提高组 难度提高+/省选- 提交该题 讨论 题解 记录 题目描述 Flappy Bird 是一款风 ...
- 【源码+图片素材+详细教程】Java游戏开发_Java开发经典游戏飞翔的小鸟_飞扬的小鸟_Java游戏项目Flappy Bird像素鸟游戏_Java课程设计项目
课程目标: 1.通过本课程的学习巩固Java的相关基础知识,例如循环判断,数组和集合的使用,对象的继承,接口的实现,窗口的创建,事件监听,图形绘制. 2.完成小鸟的移动,管道自动生成.碰撞死亡,计分系 ...
- python之flappy bird（飞扬的小鸟）小游戏分享，内附源码哦~
导语: 哈喽,哈喽~今天小编又来分享小游戏了--flappy bird(飞扬的小鸟),这个游戏非常的经典,游戏中玩家必须控制一只小鸟,跨越由各种不同长度水管所组成的障碍.这个游戏能对于小编来说还是有点 ...
- JAVA项目：Java实现飞扬的小鸟(Flappy Bird)
飞扬的小鸟(Flappy Bird) 需求描述 游戏加载完毕点击界面即可开始游戏. 鼠标点击控制小鸟飞行,或者通过键盘控制小鸟的前后上下也可以,不要撞到管道哦! 控制好小鸟越过障碍飞得更远,获得更高的 ...
最新文章
- 三周第五次课） 4.5/4.6 磁盘格式化 4.7/4.8 磁盘挂载 4.9 手动增加swap空间
- 关于gradle加快构建速度采用阿里云中央仓库的配置
- yum 安装报Header V3 DSA signature: NOKEY 的错
- Linux入门笔记——系统目录结构
- Android增量代码测试覆盖率工具
- 面向智能电网的电力大数据存储与分析应用
- Android ListView下拉与上拉刷新加载更多(一)
- vue（组件、路由）懒加载
- 数据结构——第十章 排序
- ArcGIS多面体（multipatch）解析——引
- android 打开微信代码,微信跳转浏览器或提示手机端打开HTML代码
- 汇编_stack的使用
- fromLocal8Bit()函数
- 如何下载网页上的视频
- 搭建供需对接平台 助力汽车产业发展 2021大连金普新区汽车产业链供需对接大会开幕
- 数据库常用的操作命令
- HBuilderX 安装教程
- 小码哥-斗鱼直播APP之弹出房间界面
- element ui加入甘特图
- LXC、LXD、Docker的区别与联系
热门文章
- STM32F767---＞时钟
- mysql索引长度超过767bytes问题解决。Specified key was too long； max key length is 767 bytes
- token放在cookie中和放在请求头中的区别
- Clipper库中文帮助文档
- 基于STM32的常用数码管芯片TM1650驱动
- D55_BMS_IntefaceBoard_RevA接口板电路设计图
- 牛客多校第八场 Enigmatic Partition（DP）
- 用计算机测出人家的信息,NCAE 信息化办公模拟题 含答案
- C#学习笔记 01.01
- 一个很好用的maven settings.xml 配置文件镜像