h5制作的愤怒的小鸟游戏_愤怒的小鸟源码html资源-CSDN文库

共22个文件

js：8个

html：7个

png：5个

需积分: 30 51 浏览量 2018-03-14 11:58:31 上传评论收藏 33KB RAR 举报

资源推荐

资源详情

资源评论

收起资源包目录

像素小鸟游戏.rar （22个子文件）

像素小鸟游戏

css

default.css 74B

El_hit.html 3KB

img

sky.png 11KB

land.png 3KB

pipe1.png 5KB

pipe2.png 5KB

birds.png 1KB

El_land.html 2KB

hittest.html 1KB

El_pipe.html 2KB

index.html 5KB

sky.js 304B

bird.js 612B

line.js 199B

pipe.js 623B

land.js 399B

description.js 0B

hit.js 160B

goal.js 160B

ball.html 2KB

.project 1KB

El_bird.html 2KB

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <link rel="stylesheet" type="text/css" href="css/default.css"/> <title>像素小鸟</title> <style type="text/css"> *{ -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; } a.css-3d-btn{ color: rgba(255, 255, 255, 1); text-decoration: none; background-color: rgba(219, 87, 51, 1); font-family: "Microsoft YaHei", 微软雅黑, 宋体; font-weight: 700; font-size: 3em; display: inline-block; padding: 4px; border-radius: 8px; box-shadow: 0px 9px 0px rgba(219, 31, 5, 1), 0px 9px 25px rgba(0, 0, 0, .7); margin: 30px auto 20px; min-width: 160px; text-align: center; -webkit-transition: all .1s ease; -moz-transition: all .1s ease; transition: all .1s ease; } a.css-3d-btn:active{ box-shadow: 0px 3px 0px rgba(219, 31, 5, 1), 0px 3px 6px rgba(0, 0, 0, .9); margin-top: 32px; } .round{ text-align: center; } </style> </head> <body> <img src="img/birds.png" class="hidden" id="birds"/> <img src="img/land.png" class="hidden" id="land"/> <img src="img/pipe1.png" class="hidden" id="pipe1"/> <img src="img/pipe2.png" class="hidden" id="pipe2"/> <img src="img/sky.png" class="hidden" id="sky"/> <div class="round"> <a class="css-3d-btn" href="#" id="start">开始</a> <a class="css-3d-btn" href="#" id="pause">暂停</a> <a class="css-3d-btn" href="#" id="restart" style="display: none;">重新开始</a> <canvas id="mycanvas" width="800" height="600"></canvas> </div> <script src="js/sky.js" type="text/javascript" charset="utf-8"></script> <script src="js/bird.js" type="text/javascript" charset="utf-8"></script> <script src="js/pipe.js" type="text/javascript" charset="utf-8"></script> <script src="js/land.js" type="text/javascript" charset="utf-8"></script> <script src="js/goal.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> var timer; window.onload = function(){ //获取文档顶层元素 var d = document; //获取画布元素 var can = d.getElementById("mycanvas"); //获取画布信息 var ctx = can.getContext("2d"); //获取资源文件 var Rbird = d.getElementById("birds"); var Rland = d.getElementById("land"); var Rpipe1 = d.getElementById("pipe1"); var Rpipe2 = d.getElementById("pipe2"); var Rsky = d.getElementById("sky"); //生成小鸟天空障碍物陆地 var bird = new Bird(Rbird,150,200,0.0006,0.0003,ctx); var sky_main = new Sky(Rsky,0,ctx); var pipe1 = new Pipe(Rpipe2,Rpipe1,500,1,ctx); var pipe2 = new Pipe(Rpipe2,Rpipe1,700,1,ctx); var pipe3 = new Pipe(Rpipe2,Rpipe1,900,1,ctx); var pipe4 = new Pipe(Rpipe2,Rpipe1,1100,1,ctx); var land = new Land(Rland,0,1,ctx); //鼠标点击事件控制小鸟向上移动 can.addEventListener("click",function(){ bird.speed = -0.2; },false) var draw = function(){ sky_main.draw(); pipe1.draw(); pipe2.draw(); pipe3.draw(); pipe4.draw(); land.draw() ; bird.draw(); } draw() var run = function(){ can.width = can.width; //开始绘制各个元素 sky_main.update(); sky_main.draw(); pipe1.update(); pipe1.draw(); pipe2.update(); pipe2.draw(); pipe3.update(); pipe3.draw(); pipe4.update(); pipe4.draw(); land.update(); land.draw() ; bird.update(20); bird.draw(); //开始碰撞检测 var ifhit = false; ifhit = ifhit || pipe1.hittest(bird.x,bird.y); ifhit = ifhit || pipe2.hittest(bird.x,bird.y); ifhit = ifhit || pipe3.hittest(bird.x,bird.y); ifhit = ifhit || pipe4.hittest(bird.x,bird.y); if(bird.y >= 445 || bird.y <= 0){ ifhit = true; } //如果碰撞停止绘制动画 if(ifhit){ cancelAnimationFrame(timer) d.getElementById("restart").style.display = "inline-block"; d.getElementById("start").style.display = "none"; d.getElementById("pause").style.display = "none"; }else{ timer = requestAnimationFrame(run); } } d.getElementById("start").addEventListener("click",function(){ run(); },false) d.getElementById("pause").addEventListener("click",function(){ cancelAnimationFrame(timer); },false) d.getElementById("restart").addEventListener("click",function(){ window.location.reload() },false) } </script> </body> </html>

评论收藏

内容反馈