前端像素鳥小游戲

點擊打開視頻講解更加詳細

一、案例效果

在這里插入圖片描述

二、實作思路

創建游戲背景板和小鳥，并分別設定相對定位與絕對定位；
初始化背景圖的位置；
初始化小鳥的位置；
設定游戲狀態，游戲開始時背景和管道全部向左運動，游戲結束全部停止運動；
使小鳥飛行，其實就是背景圖在 X 軸方向的位置不斷減小，實作小鳥向右飛行效果；
設定點擊事件，每點擊一次小鳥在Y軸的位置減小，實作向上飛的效果；
創建管道，X 方向上管道和下管道位置相同，Y 方向上上管道和下管道高度隨機，但中間要空出200px；
實作管道向左運動，與背景圖向左操作類似，也是在 X 軸方向的位置不斷減小；
管道向左運動移出游戲面板最左側時再回到原位重新執行，實作回圈效果；
定義上下管道的臨界值，也就是上下管道自身區域；
小鳥位置與上下管道位置重合(相碰撞)時游戲結束；
多次呼叫管道創建函式，產生多組管道，

三、完整代碼+詳細注釋

<!DOCTYPE html>
<html>
 
<head>
  <meta charset="UTF-8">
  <title>小游戲：像素鳥</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }
 
    #game {
      width: 800px;
      height: 600px;
      background: url('./img/sky.png');
      position: relative;
      margin: auto;
      overflow: hidden;
    }
 
    #bird {
      width: 34px;
      height: 25px;
      background: url(./img/birds.png) -10px -8px no-repeat;
      position: absolute;
      top: 100px;
      left: 100px;
    }
  </style>
</head>
 
<body>
  <!-- 游戲背景 -->
  <div id="game">
    <!-- 小鳥 -->
    <div id="bird"></div>
  </div>
</body>
 
<script>
  //獲取游戲背景和小鳥
  var game = document.getElementById('game');
  var birdEle = document.getElementById('bird');
 
  //初始化背景圖
  var sky = {
    x: 0 //背景圖初始位置為0
  }
 
  //初始化小鳥
  var bird = {
    speedX: 5, //小鳥在X軸的速度
    SpeedY: 0, //小鳥在Y軸的速度
    //小鳥坐標
    x: birdEle.offsetLeft, //小鳥初始位置在絕對定位的位置
    y: birdEle.offsetTop,
  }
 
  var runing = true; //游戲狀態
 
  setInterval(function () {
    if (runing) {
      //小鳥飛行(其實是背景在動)
      sky.x -= 5; //背景每次-5px，以實作向左運動的效果
      game.style.backgroundPositionX = sky.x + 'px';
      //小鳥上下運動
      bird.SpeedY += 1; //每一次點擊小鳥向上10px后開始自增也就是再自動向下
      bird.y += bird.SpeedY; //小鳥自動不斷向下運動
      //判斷游戲狀態
      if (bird.y < 0) { //超出游戲背景頂部時游戲結束
        runing = false;
        bird.y = 0;
      }
      if (bird.y + birdEle.offsetHeight > 600) { //超出游戲背景底部時游戲結束
        runing = false;
        bird.y = 600 - birdEle.offsetHeight;
      }
      birdEle.style.top = bird.y + 'px';
    }
  }, 30);
 
  //點擊時小鳥向上運動
  document.onclick = function () {
    bird.SpeedY = -10; //點擊一次向上運動10px
  }
 
  //創建管道
  function creatPipe(position) {
    var pipe = {};
    pipe.x = position;
    pipe.upHeight = 200 + parseInt(Math.random() * 100); //上管道高度為200 - 300px
    pipe.doHeight = 600 - pipe.upHeight - 200; //下管道高度
    pipe.doTop = pipe.upHeight + 200; //上下兩管道之間200px
 
    //創建上管道
    var upPipe = document.createElement('div'); //新建div
    upPipe.style.width = '52px';
    upPipe.style.height = pipe.upHeight + 'px';
    upPipe.style.background = 'url(./img/pipe2.png) no-repeat center bottom';
    upPipe.style.position = 'absolute';
    upPipe.style.top = '0px';
    upPipe.style.left = pipe.x + 'px';
    game.appendChild(upPipe); //將上管道追加到游戲頁面中
 
    //創建下管道
    var doPipe = document.createElement('div'); //新建div
    doPipe.style.width = '52px';
    doPipe.style.height = pipe.doHeight + 'px';
    doPipe.style.background = 'url(./img/pipe1.png) no-repeat center top';
    doPipe.style.position = 'absolute';
    doPipe.style.top = pipe.doTop + 'px';
    doPipe.style.left = pipe.x + 'px';
    game.appendChild(doPipe); //將下管道追加到游戲頁面中
 
    //管道進行運動
    setInterval(function () {
      if (runing) { //游戲處于運行狀態時管道再運動
        pipe.x -= 2; //x方向不斷-2px，以實作管道向左運動的效果
        upPipe.style.left = pipe.x + 'px';
        doPipe.style.left = pipe.x + 'px';
        if (pipe.x < -52) { //管道移出最左側時回到原位，實作不間斷效果
          pipe.x = 800;
        }
        //上下管道臨界值
        var uCheck = bird.x + 34 > pipe.x && bird.x < pipe.x + 52 && bird.y < pipe.upHeight;
        var dCheck = bird.x + 34 > pipe.x && bird.x < pipe.x + 52 && bird.y > pipe.upHeight + 200;
        if (uCheck || dCheck) { //碰到上管道或下管道臨界值則游戲終止
          runing = false;
        }
      }
    }, 30)
  }
  creatPipe(400); //產生四組管道
  creatPipe(600);
  creatPipe(800);
  creatPipe(1000);
</script>
 
</html>

若對您有幫助，請點擊打開視頻講解更加詳細

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/508837.html

標籤：其他

上一篇：[開源]React/Vue通用的狀態管理框架，不好用你來打我👀

下一篇：一道題開始認識Symbol