Html+JS+CSS实现压扁小鸟游戏源码

Html+JS+CSS实现压扁小鸟游戏源码，文件太多，我把它放在：https://pan.quark.cn/s/72b05047b482

看下效果图：

这段代码是一个基于HTML5 Canvas的游戏，下面是对代码中关键部分的注释：

```javascript
// 设置页面的边距为0，并且隐藏滚动条
document.body.style.margin = '0px';
document.body.style.overflow = 'hidden';

// 定义一个函数raf，如果浏览器不支持requestAnimationFrame，则会弹出警告
var raf = function (x) { alert('Your browser is not compatible with this site. Sorry :('); }
if (window.requestAnimationFrame) raf = window.requestAnimationFrame;       // Firefox 23 / IE 10 / Chrome / Safari 7 (incl. iOS)
else if (window.mozRequestAnimationFrame) raf = window.mozRequestAnimationFrame;    // Firefox < 23
else if (window.webkitRequestAnimationFrame) raf = window.webkitRequestAnimationFrame; // Older versions of Safari / Chrome

// 初始化游戏对象，设置游戏结束状态、创建游戏容器并添加到页面中
var game = {};
game.ended = false;
game.div = document.createElement('div');
game.div.style.overflow = 'hidden';
game.div.style.position = 'relative';
game.div.style.width = '100%';
game.div.style.height = '100%';
document.body.appendChild(game.div);

// 定义一个resize函数，用于调整游戏元素的大小和位置
var resize = function () {
  // ...省略部分代码...
};

// 加载游戏图片的函数
var loadGameImage = function (n) {
  // ...省略部分代码...
};

// 加载游戏声音的函数
var loadGameSound = function (n, chc) {
  // ...省略部分代码...
};

// 初始化管道的间隙大小和中心位置
var bottom_pipe_gap = 270;
var pipe_gap = bottom_pipe_gap;
var pipe_center = 500;
var pipe_closing = -1;
var pipe_opening = -1;

// 初始化游戏加载状态和游戏加载完成时的回调函数
var game_loaded = false;
var gameLoaded = function () {
  // ...省略部分代码...
};

// 定义一个函数poundPipes，用于处理点击或按键时的逻辑
var poundPipes = function () {
  // ...省略部分代码...
};

// 初始化翅膀拍打、管道滑动等音效
var flap = loadGameSound('./src/wav/flap.wav', 5);
var pipeslide = loadGameSound('./src/wav/slide.wav', 3);
var clang = loadGameSound('./src/wav/clang.wav', 3);

// 初始化游戏画布
game.canvas = document.createElement('canvas');
game.canvas.width = ww;
game.canvas.height = hh;
game.ctx = game.canvas.getContext('2d');
game.started = false;

// 初始化游戏元素，如logo、游戏结束画面、点击开始画面等
var logo = {};
// ...省略部分代码...

// 初始化分数显示
var points = 0;
var highscore = 0;
var score = {};
score.divs = [];
// ...省略部分代码...

// 初始化地面、城市背景、树木等元素
var ground = {};
// ...省略部分代码...

// 初始化鸟类元素
var birds = [];
var dead_birds = [];
var newBird = function () {
  // ...省略部分代码...
};

// 初始化血液效果
var blood_image = loadGameImage('./src/wav/blood.png');
var bloods = [];
var newBlood = function () {
  // ...省略部分代码...
};

// 初始化管道元素
var pipe1 = {};
pipe1.img = loadGameImage('./src/wav/pipe1.png');
// ...省略部分代码...

// 初始化帧率控制和游戏主循环
var nbfr = 100;
var fnbfr = 100;
var fr = 0;
var ltm = 0;
var oef = function () {
  // ...省略部分代码...
};

// 设置窗口大小改变时的回调函数
window.onresize = function () {
  resize();
};
```

请注意，由于代码量较大，我只添加了关键部分的代码和注释。仅供参考学习使用！