js实现一个压扁小鸟小游戏代码-html代码-BFW代码库

代码语言：html

所属分类：游戏

代码描述：js实现一个压扁小鸟小游戏代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title></title>
    <meta name="description" content="你恨 flappy bird 吗?你每天晚上对着那个愚蠢的鸟做噩梦吗？ 压扁它们！.">
    <meta property="og:description" content="你恨 flappy bird 吗?你每天晚上对着那个愚蠢的鸟做噩梦吗？ 压扁它们！.">
    <meta property="og:type" content="website">
    <meta property="og:title" content="Squishy Bird">
    <meta property="og:site_name" content="Squishy Birds">
    <meta name="viewport" content="user-scalable=no, initial-scale=0.5, width=610, height=1024">
</head>

<body style="margin: 0px; overflow: hidden;-moz-user-select: none;-webkit-user-select: none;user-select: none;">
    <div id="lgd" style="width: 300px; height: 64px; position: absolute; left: 533px; top: 301px; font-family: Verdana; font-size: 16px; font-weight: bold; text-align: center;">Loading...</div>
    <script type="text/javascript">
        document.body.style.margin = '0px';
document.body.style.overflow = 'hidden';

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);





var resize = function () {
 ww = Math.ceil(window.innerWidth);
 hh = Math.ceil(window.innerHeight);
 
 var fblikebox = document.getElementById('fblikebox');
 var googbox = document.getElementById('googbox');
 if (fblikebox) {
  if (hh < 710) {
   fblikebox.style.right = '178px';
   if (googbox) {
    googbox.style.bottom = '5px';
    googbox.style.top = 'auto';
   }
  } else {
   fblikebox.style.right = '8px';
   if (googbox) {
    googbox.style.top = '5px';
    googbox.style.bottom = 'auto';
   }
  }
 }
 
 game.div.style.width = ww+'px';
 game.div.style.height = hh+'px';
 
 pipe_center = (hh - 88)/2;
 
 game.canvas.width = ww;
 game.canvas.height = hh;
 game.ctx.fillStyle = '#71c5cf';
 game.ctx.fillRect(0, 0, ww, hh);
 
 ground.canvas.width = ww;
 ground.canvas.height = 88;
 ground.ctx.fillStyle = '#ddd894';
 ground.ctx.fillRect(0, 0, ww, 88);
 var gx = 0;
 while (gx < ww) {
  ground.ctx.drawImage(ground.bit, gx, 0);
  gx += 48;
 }
 
 ground.canvas.style.left = '0px';
 ground.canvas.style.top = (hh - 88)+'px';
 
 
 logo.reposition();
 gameover.reposition();
 c2s.reposition();
 //fbshare.reposition();
 playagain.reposition();
 

 parody.div.style.left = Math.round((ww - 800)/2)+'px';
 parody.div.style.top = (hh - 28)+'px';


 var i = 0;
 for (var xx = -3; xx <= 3; xx++) {
  for (var yy = -3; yy <= 3; yy++) {
   var div = score.divs[i];
   i++;
   div.style.left = Math.round(xx + (ww - 300)/2)+'px';
   div.style.top = (yy + 20)+'px';
  }
 }
 
 
 city.canvas.width = ww;
 city.canvas.height = 256;
 city.ctx.clearRect(0, 0, ww, 256);
 var gx = 0;
 while (gx < ww) {
  city.ctx.drawImage(city.bit, gx, 0);
  gx += 300;
 }
 
 city.canvas.style.left = '0px';
 city.canvas.style.top = (hh - 256 - 88)+'px';
 
 
 
 
 
 
 
 trees.canvas.width = ww;
 trees.canvas.height = 216;
 trees.ctx.clearRect(0, 0, ww, 216);
 var gx = 0;
 while (gx < ww) {
  trees.ctx.drawImage(trees.bit, gx, 0);
  gx += 300;
 }
 
 trees.canvas.style.left = '0px';
 trees.canvas.style.top = (hh - 216 - 88)+'px';
 
 
 
 
 
 pipe_x = Math.floor(ww/2 - 148/2);
 
 pipe1.img.style.left = pipe_x+'px';
 pipe2.img.style.left = pipe_x+'px';
 
 for (var i = bloods.length-1; i>=0; i--) {
  var blood = bloods[i];
  repositionBlood(blood);
 }
 
}

var want_image_count = 0;
var loadGameImage = function (n) {
 want_image_count++;
 var o = document.createElement('img');
 o.onload = function () {
  want_image_count--;
  if ((want_image_count == 0) && (want_sound_count == 0)) {
   gameLoaded();
  }
 }
 o.src = n;
 return o;
}

//var sounds_playing = [];
var want_sound_count = 0;
var loadGameSound = function (n, chc) { // file name, channel count
 var o = {};
 
 o.channels = [];
 o.channel_pos = 0;
 o.chc = chc;
 
 o.play = function () {
  var tm = new Date().getTime();
  var sc = this.channels.length;
  var got_good_sound = false;
  var ch;
  for (var i = sc; i>=0; i--) {
   this.channel_pos++;
   if (this.channel_pos >= this.channels.length) {
    this.channel_pos = 0;
   }
   var ch = this.channels[this.channel_pos];
   //if (ch.can_play) {
    got_good_sound = true;
    break;
    //}
  }
  if (got_good_sound) {
   //ch.sound.currentTime = 1;
   ch.sound.play();
   //ch.can_play = false;
   
   //sounds_playing.push(ch);
  }
 }
 
 
 //want_sound_count++;
 /*
 var ao = document.createElement("audio");
 ao.sndo = o;
 ao.addEventListener('canplaythrough', function () {
  //want_sound_count--;
  var o = this.sndo;
  for (var i = 0; i<0*o.chc; i++) {
   var sch = {};
   sch.sound = this.cloneNode(true);
   //sch.can_play = true;
   o.channels.push(sch);
  }
  var sch = {};
  sch.sound = this;
  //sch.can_play = true;
  o.channels.push(sch);
  
  if ((want_image_count == 0) && (want_sound_count == 0)) {
   gameLoaded();
  }
 }, false);
 */
 for (var i = 0; i<chc; i++) {
  var ao = document.createElement("audio");
  var sch = {};
  sch.sound = ao;
  sch.can_play = true;
  o.channels.push(sch);
  ao.src = n;
  ao.type = "audio/wav";
  document.body.appendChild(ao);
 }
 return o;
}

var bottom_pipe_gap = 270;
var pipe_gap = bottom_pipe_gap;
var pipe_center = 500;
var pipe_closing = -1;
var pipe_opening = -1;

var pipe_x;

var game_loaded = false;
var gameLoaded = function () {
 game.div.appendChild(game.canvas);
 game.div.appendChild(pipe1.img);
 game.div.appendChild(pipe2.img);
 game.div.appendChild(ground.canvas);
 game.div.appendChild(city.canvas);
 game.div.appendChild(trees.canvas);
 game.div.appendChild(logo.img);
 game.div.appendChild(gameover.img);
 //document.body.appendChild(fbshare.img);
 document.body.appendChild(playagain.img);
 game.div.appendChild(c2s.img);
 game.div.appendChild(parody.div);
 for (var i = score.divs.length-1; i>=0; i--) {
  game.div.appendChild(score.divs[i]);
 }
 game_loaded = true;
 resize();
 raf(oef);
 oef();
 
 //document.body.addEventListener("touchstart", poundPipes, false);
 
 document.body.onmousedown = function () {
  poundPipes();
 }
 
 document.body.onkeydown = function (e) {
  if (e.keyCode == 32) {
   poundPipes();
  }
 }
 
}



var poundPipes = function () {
 if (game.ended) { // then we have to set ended=false with the play again button
  return false;
 }
 if (!game.started) {
  fr = 0;
  nbfr = fnbfr = 100;
  points = 0;
  score.update();
  for (var i = birds.length-1; i>=0; i--) {
   var bird = birds[i];
   bird.canvas.width = 1;
   bird.canvas.height = 1;
   game.div.removeChild(bird.canvas);
   birds.splice(i, 1);
  }
  game.started = true;
  logo.showing = false;
  logo.hiding = true;
  gameover.showing = false;
  gameover.hiding = true;
  c2s.showing = false;
  c2s.hiding = true;
/*  fbshare.showing = false;
  fbshare.hiding = true;*/
  playagain.showing = false;
  playagain.hiding = true;
  parody.div.style.display = 'none';
  points = 0;
  score.update();
 }
 want_pound = true;
 if (pipe_opening == -1) {
  if (pipe_closing == -1) {
   pipe_closing = 0;
   want_pound = false;
   pipeslide.play();
 .........完整代码请登录后点击上方下载按钮下载查看