原生js實現(xiàn)Flappy Bird小游戲

更新時間：2018年12月24日 11:42:26 作者：microcosm1994

這篇文章主要為大家詳細介紹了原生js實現(xiàn)Flappy Bird小游戲，具有一定的參考價值，感興趣的小伙伴們可以參考一下

這是一個特別簡單的用原生js實現(xiàn)的一個小鳥游戲，比較簡單，適合新手練習。

html結構

<div id="game">
  <div id="bird"></div>
</div>

css樣式

#game {
    width: 800px;
    height: 600px;
    border: 1px solid #000;
    background: url(images/sky.png);
    overflow: hidden;
    position: relative;
  }

  #game .pipeD {
    background: url(images/pipe1.png) top center;
    position: absolute;
  }

  #game .pipeU {
    background: url(images/pipe2.png) bottom center;
    position: absolute;
  }

  #bird {
    width: 34px;
    height: 25px;
    /*border-radius: 10px;*/
    /*background-color: red;*/
    position: absolute;
    top: 100px;
    left: 100px;
    background: url(images/birds.png) -8px -10px no-repeat;
  }

下面就是原生js代碼了，這個小案例還運用了自己前期封裝的一個小的動畫方法

function animate(obj, json, fn) {
  clearInterval(obj.timer);
  obj.timer = setInterval(function () {
    var flag = true;
    for (var k in json) {
      if (k === "opacity") {
        var leader = getStyle(obj, k) * 100;
        var target = json[k] * 100;
        var step = (target - leader) / 10;
        step = step > 0 ? Math.ceil(step) : Math.floor(step);
        leader = leader + step;
        obj.style[k] = leader / 100;
      } else if (k === "zIndex") {
        obj.style.zIndex = json[k];
      } else {
        var leader = parseInt(getStyle(obj, k)) || 0;
        var target = json[k];
        var step = (target - leader) / 10;
        step = step > 0 ? Math.ceil(step) : Math.floor(step);
        leader = leader + step;
        obj.style[k] = leader + "px";
      }
      if (leader !== target) {
        flag = false;
      }
    }
    if (flag) {
      clearInterval(obj.timer);
      if (fn) {
        fn();
      }
    }
  }, 15);
}
function getStyle(obj, attr) {
  if (window.getComputedStyle) {
    return window.getComputedStyle(obj)[attr];
  } else {
    return obj.currentStyle[attr];
  }
}

下面就是控制游戲的js代碼了

var birdElement = document.getElementById("bird");
var game = document.getElementById("game");
var gameover = false;
var g = 1;
var i = 0;
var timer=null;
var bird = {
  x: birdElement.offsetLeft,
  y: birdElement.offsetTop,
  speedX: 5,
  speedY: 0,
  entity: birdElement
};
var sky = {
  x: 0
};

//var timer=setInterval(function(){
//  birdElement.style.backgroundPositionX=-52*i+"px";
//  i++;
//  if(i===3){
//    i=0;
//  }
//},100);

setInterval(function () {
  //游戲沒有結束的時候運行代碼
  if (!gameover) {
    //整個游戲背景x軸移動的距離
    sky.x = sky.x - bird.speedX;
    game.style.backgroundPositionX = sky.x + "px";
    //小鳥下落時y軸的坐標
    bird.speedY = bird.speedY + g;
    //設置一個變量用來接收小鳥下落時y軸的坐標，用來設置小鳥下降時的速度
    var step = bird.speedY;
    bird.y = bird.y + step;
    //用一個變量來設定小鳥下落的最低高度，用來 判斷游戲是否結束
    var overY = game.offsetHeight - birdElement.offsetHeight;
    //小鳥的y軸坐標大于最低高度，所以游戲停止
    if (bird.y > overY) {
      bird.y = overY;
      stop();
    }
    //小鳥的y軸坐標小于0，說明碰到頂部邊框，所以游戲結束
    if (bird.y < 0) {
      bird.y = 0;
      stop();
    }
    //設置游戲開始時小鳥出現(xiàn)的位置
    bird.entity.style.top = bird.y + "px";
  }
}, 25);
//添加鍵盤事件，實現(xiàn)鍵盤上下鍵控制小鳥
document.onkeyup = function (e) {
  if (e.keyCode === 38) {
    bird.speedY = -10;
  }
}

function Pipe(positonX) {
  //管子的坐標
  this.x = positonX;
  this.upPipeY = 0;
  this.width = 52;
  this.upPipeH = parseInt(Math.random() * 175 + 100);
  this.downPipeY = this.upPipeH + 200;
  this.downPipeH = game.offsetHeight - this.downPipeY;
  // 動態(tài)添加管子
  var divUp = document.createElement("div");
  divUp.className = "pipeU";
  divUp.style.width = this.width + "px";
  divUp.style.height = this.upPipeH + "px";
  divUp.style.left = this.x + "px";
  divUp.style.top = this.upPipeY + "px";
  game.appendChild(divUp);
  var divDown = document.createElement("div");
  divDown.className = "pipeD";
  divDown.style.width = this.width + "px";
  divDown.style.height = this.downPipeH + "px";
  divDown.style.left = this.x + "px";
  divDown.style.top = this.downPipeY + "px";
  game.appendChild(divDown);
  //因為定時器會混亂this的指向問題，所以提前保存this的指向，這里的this指向調用該方法的實例
  var that = this;
  // 設置定時器讓管子向后移動
  this.timer=setInterval(function () {
    that.x = that.x - 1;
    //簡單實現(xiàn)管子無縫滾動
    if (that.x < -52) {
      that.x = 800;
    }
    if (!gameover) {
      divUp.style.left = that.x + "px";
      divDown.style.left = that.x + "px";
    }
    // 設置變量，進行游戲碰撞檢測，并停止游戲
    var downCrash = (bird.x + 34 > that.x) && (bird.x < that.x + 52) && (bird.y + 25 > that.downPipeY);
    var upCrash = (bird.x + 34 > that.x) && (bird.x < that.x + 52) && (bird.y < that.upPipeH);
    if (downCrash || upCrash) {
      //gameover = true;
      stop();
    }
  }, 10);
}
//執(zhí)行上面的函數方法
var arr=[];
for (var i = 0; i < 4; i++) {
  arr[i]=new Pipe(i * 200 + 400);
}
//封裝一個用來停止游戲的方法，
function stop(){
  gameover=true;
  clearInterval(timer);
  for(var i=0;i<arr.length;i++){
    clearInterval(arr[i].timer);
  }
}

注釋都寫在了了代碼里，一個簡單小游戲就完成了。

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

bootstrapTable+ajax加載數據 refresh更新數據
這篇文章主要為大家詳細介紹了bootstrapTable+ajax加載數據，以及refresh更新數據，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2018-08-08
小程序自定義彈出框效果
這篇文章主要為大家詳細介紹了小程序自定義彈出框效果，支持淡入淡出動畫，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2022-07-07
純JS實現(xiàn)本地圖片預覽的方法
這篇文章主要介紹了純JS實現(xiàn)本地圖片預覽的方法,基于javascript插件實現(xiàn)本地圖片預覽功能,具有一定參考借鑒價值,需要的朋友可以參考下
2015-07-07
微信小程序實現(xiàn)可長按移動控件
這篇文章主要為大家詳細介紹了微信小程序實現(xiàn)可長按移動控件，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2020-10-10
assert()函數用法總結(推薦)
assert的作用是現(xiàn)計算表達式 expression ，如果其值為假（即為0），那么它先向stderr打印一條出錯信息，然后通過調用 abort 來終止程序運行。這篇文章主要介紹了assert()函數用法總結，需要的的朋友參考下
2017-01-01
Javascript排序算法之計數排序的實例
計數排序是一種高效的線性排序，它通過計算一個集合中元素楚翔的次數來確定集合如何排列，計數排序不需要進行數據的比較，所有他的運行效率前面介紹的都高
2014-04-04
ES6新數據結構Map功能與用法示例
這篇文章主要介紹了ES6新數據結構Map功能與用法,結合實例形式分析了Map的功能、使用方法及相關注意事項,需要的朋友可以參考下
2017-03-03
javascript彈出帶文字信息的提示框效果
這篇文章主要介紹了javascript彈出帶文字信息的提示框效果,涉及javascript簡單彈出窗口定義與樣式相關操作技巧,需要的朋友可以參考下
2016-07-07
JavaScript鼠標禁止右鍵禁止打開控制臺及鍵盤禁用
這篇文章主要給大家介紹了關于JavaScript鼠標禁止右鍵禁止打開控制臺及鍵盤禁用的相關資料,實現(xiàn)禁止右鍵和禁止打開控制臺是一種常見的網頁保護技巧,可以防止非法復制、盜取網頁資源等安全問題,需要的朋友可以參考下
2023-10-10
微信小程序入門之指南針
這篇文章主要為大家詳細介紹了微信小程序入門之指南針，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2020-10-10