<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> * { margin: 0; padding: 0; } #fbWrap { 350px; height: 480px; background: url("img/bg.jpg"); background-size: 100% 100%; position: relative; overflow: hidden; margin: 0 auto; } #head { position: absolute; left: 50px; top: 150px; } #head span { background: url("img/bird0.png"); position: absolute; right: 0; top: 20px; 40px; height: 26px; background-size: 100% 100%; } #scoring { position: absolute; left: 50%; top: 40px; z-index: 2; font-size: 50px; } #menu { position: absolute; left: 40%; top: 60%; } #bird { position: absolute; left: 30px; top: 10%; display: none; z-index: 10; } .die { transition: 0.5s; top: 393px !important; z-index: 99; } #ductWrap li { position: absolute; top: 0; left: 350px; 62px; height: 423px; list-style: none; } .duct_up { background: url("img/up_mod.png") repeat-y; height: 120px; position: relative; } .duct_up img { position: absolute; bottom: 0; } .duct_down { background: url("img/down_mod.png") repeat-y; height: 203px; position: absolute; bottom: 0; 100%; } .duct_down img { position: absolute; top: 0; } </style> </head> <body> <audio autoplay="autoplay" preload="auto" src="game_music.mp3"> 你的浏览器不支持audio标签 </audio> <div id="fbWrap"> <div id="head" class="animated slideOutUp"> <img src="img/head.jpg" alt=""> <span></span> </div> <div id="scoring"> 0 </div> <div id="menu"> <img id="start" src="img/start.jpg" alt=""> </div> <div id="bird"> <img src="img/down_bird1.png" alt=""> </div> <ul id="ductWrap"> </ul> </div> </body> <script type="text/javascript"> // 开始按钮 var startBtn = document.querySelector("#start"); // head var head = document.querySelector("#head"); // bird var bird = document.querySelector("#bird"); // audio var audio = document.querySelector("audio"); // 获取存放管道的div var ductWrap = document.querySelector("#ductWrap"); // 获取存放分数的div var score = document.querySelector("#scoring"); // 创建管道定时器 var createDuctTimer = null; // 是否删除管道移动定时器 var isDelTimer = false; startBtn.onclick = function () { // 隐藏开始按钮和head this.parentNode.style.display = "none"; head.style.display = "none"; // 显示小鸟 bird.style.display = "block"; // 小鸟移动的速度 bird.speed = 0; // 小鸟移动 bird.moveTimer = setInterval(function () { bird.speed += 0.5; if (bird.offsetTop <= 0) { bird.style.top = "0px"; } else if (bird.offsetTop >= 394) { bird.style.top = "394px"; clearInterval(bird.moveTimer); audio.src = "game_over.mp3"; document.onmousedown = function (e) { // 阻止默认事件 var ev = e || window.event; ev.preventDefault(); }; // 当小鸟落地死亡时 // 1:清除创建管道的定时器 clearInterval(createDuctTimer); // 2:清除管道移动的定时器 isDelTimer = true; } if (bird.speed <= 0) { bird.children[0].src = "img/up_bird0.png"; } else { bird.children[0].src = "img/down_bird0.png"; } bird.style.top = bird.offsetTop + bird.speed + "px"; // 碰撞检测 var ductRow = document.querySelectorAll(".duct_row"); for (var i = 0; i < ductRow.length; i++) { var isCrash = crashFn(bird, ductRow[i]); if (isCrash == true) { // 更换音乐 audio.src = "game_over.mp3"; // 清除小鸟移动 clearInterval(bird.moveTimer); // 清除创建管道定时器 clearInterval(createDuctTimer); // 清除管道移动 isDelTimer = true; bird.className = "die"; document.onmousedown = function (e) { var ev = e || window.event; ev.preventDefault(); }; } } }, 30); // 小鸟向上移动 document.onmousedown = function (e) { // 阻止默认事件 var ev = e || window.event; ev.preventDefault(); bird.speed = -5; audio.src = "bullet.mp3"; } // 创建管道 createDuctTimer = setInterval(function () { var duct = document.createElement("li"); // 上管道的随机高度 var upHeight = randFn(62, 261); // 下管道的高度 var downHeight = 423 - upHeight - 100; duct.innerHTML = '<div class="duct_up duct_row" style="height:' + upHeight + 'px"><img src="img/up_pipe.png"></div><div class="duct_down duct_row" style="height: ' + downHeight + 'px"><img src="img/down_pipe.png"></div>'; // 管道第一次出现的位置 duct.l = 350; // 给管道添加bol(用来判断是否加分) duct.scoreBol = true; // 管道移动 duct.moveTimer = setInterval(function () { duct.l -= 3; duct.style.left = duct.l + "px"; if (duct.l <= -62) { // 清除管道 ductWrap.removeChild(duct); clearInterval(duct.moveTimer); } else if (duct.l <= -31) {//当管道小于-31时,代表小鸟通过 if (duct.scoreBol == true) { score.innerHTML = parseInt(score.innerHTML) + 10; } duct.scoreBol = false; } // 小鸟死亡,定时器移除 if (isDelTimer == true) { clearInterval(duct.moveTimer); } }, 30) // 把管道插入到ductWrap ductWrap.appendChild(duct); }, 3000); } // 随机函数 function randFn(min, max) { return parseInt(Math.random() * (max - min + 1) + min); } //碰撞检测 function crashFn(obj1, obj2) { var obj1Left = obj1.offsetLeft; var obj1Right = obj1Left + obj1.offsetWidth; var obj1Top = obj1.offsetTop; var obj1Bottom = obj1Top + obj1.offsetHeight; var obj2Left = obj2.parentNode.offsetLeft; var obj2Right = obj2Left + obj2.offsetWidth; var obj2Top = obj2.offsetTop; var obj2Bottom = obj2Top + obj2.offsetHeight; // 1:obj1的右边 大于等于 obj2的左边 // 2:obj1的下边 大于等于 obj2的上边 // 3:obj1的左边 小于等于 obj2的右边 // 4:obj1的上边 小于等于 obj2的下边 if (obj1Right >= obj2Left && obj1Bottom >= obj2Top && obj1Left <= obj2Right && obj1Top <= obj2Bottom) { // 已经发生碰撞 return true; } else { // 没有碰撞 return false; } } </script> </html>
原文章https://www.jianshu.com/p/9361a94df4da
转载仅供学习