简易flybird制作

2021-12-05 11:02:50 阅读：151 来源： 互联网

标签：pipeBox const top li 简易 position 制作 flybird absolute

效果图

html部分代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/main.css">
    <style></style>
</head>

<body>
    <div id="box">
        <div id="scoreBoard">
            <img src="img/0.jpg" alt="">
        </div>
        <div id="header">
            <img src="img/head.jpg" alt="">

            <div>
                <img src="img/bird0.png" alt="">
            </div>
        </div>
        <img src="img/bird1.png" alt="" id="flyBird">
        <ul id="pipeBox"></ul>
        <img src="img/start.jpg" alt="" id="start">
        <div id="gameOver">
            <img src="img/game_over.jpg" alt="">
            <br>
            <br>
            <br>
            <img src="img/ok.jpg" alt="" id="ok">
        </div>
        <div id="slider">
            <img src="img/slider.jpg" alt="">
            <img src="img/slider.jpg" alt="">
        </div>
    </div>
    <audio src="source/game_music.mp3" loop></audio>
    <audio src="source/bullet.mp3"></audio>
    <audio src="source/死亡2.mp3">
        当前浏览器不支持audio
    </audio>
</body>

</html>
<script type="text/javascript" src="js/main2.js"></script>

css部分代码

#box {
  width: 343px;
  height: 480px;
  background: url(../img/bg.jpg);
  margin: 100px auto 0;
  position: relative;
  overflow: hidden;
}
#scoreBoard {
  width: 100%;
  /* background-color: red; */
  position: absolute;
  top: 30px;
  text-align: center;
}

@keyframes header {
  from {
    top: 75px;
  }
  50% {
    top: 110px;
  }
  to {
    top: 75px;
  }
}
#header {
  width: 80%;
  position: absolute;
  left: 10%;
  top: 75px;
  /* background-color: lightblue; */
  animation: header 2s linear infinite;
}
#header > div {
  position: absolute;
  right: 10px;
  top: 20px;
  background: url(../img/bird1.png) no-repeat;
}
@keyframes bird {
  from {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
#header > div > img {
  animation: bird 1s linear infinite;
}
#start {
  position: absolute;
  top: 300px;
  left: 129px;
}
@keyframes slider {
  from {
    left: 0;
  }

  to {
    left: -343px;
  }
}
#slider {
  width: 999px;
  position: absolute;
  left: 0;
  top: 422px;
  animation: slider 1.5s linear infinite;
}
#slider > img {
  float: left;
}
#flyBird {
  display: none;
  position: absolute;
  top: 100px;
  left: 50px;
}
#pipeBox {
  width: 100%;
  height: 422px;
  list-style: none;
  margin: 0;
  padding: 0;
  position: absolute;
  left: 0;
  top: 0;
}
#pipeBox > li {
  position: absolute;
  left: 400px;
  width: 62px;
  height: 100%;
  /* background: lightgreen; */
}
#pipeBox > li > div:nth-child(1) {
  background: url("../img/up_mod.png");
  position: absolute;
  width: 100%;
}
#pipeBox > li > div:nth-child(1) > img {
  position: absolute;
  bottom: 0;
}
#pipeBox > li > div:nth-child(2) {
  position: absolute;
  bottom: 0;
  background: url("../img/down_mod.png");
}
@keyframes over {
  from {
    top: -200px;
  }
  50% {
    top: 0px;
  }
  to {
    top: 150px;
  }
}
#gameOver {
  position: absolute;
  text-align: center;
  width: 100%;
  animation: over 3s linear forwards;
  display: none;
}

js部分代码

!function () {
  function init() {
    const start = document.getElementById('start')
    const header = document.getElementById('header')
    const flyBird = document.getElementById('flyBird')
    const box = document.getElementById('box')
    const pipeBox = document.getElementById('pipeBox')
    const scoreBoard=document.getElementById('scoreBoard')
    const gameOver=document.getElementById('gameOver')

    const audios = document.getElementsByTagName('audio')
    ok.onclick=function(){
      window.location.reload()
    }
    let speed = 0
    const maxSpeed = 8

    let downTimer = null
    let upTimer = null
    let pipeTimer = null
    let crashTimer=null

    let scoreNum=0

    function birdDown() {
      flyBird.src = 'img/down_bird0.png'
      speed = speed < maxSpeed ? speed + .3 : maxSpeed
      flyBird.style.top = `${flyBird.offsetTop + speed}px`//模板字符串（es6）
    }

    function rand(min, max) {
      return Math.random() * (max - min) + min
    }

    function addScore() {
      console.log('jiafen')
      //scoreNum++
      const scoreStr=++scoreNum+''
      //const scoreStr='1234567896'
      scoreBoard.innerHTML=''
      for(i of scoreStr){
        console.log(i)
        scoreBoard.innerHTML=`
        ${scoreBoard.innerHTML}
        <img src="img/${i}.jpg">
        `
      }
    }

    function createPipe() {
      const li = document.createElement('li')
      const topH = rand(60, 240)
      const bottomH = 422 - 122 - topH
      li.innerHTML = `
      <div style="height: ${topH}px">
        <img src="img/up_pipe.png" alt="">
      </div>
      <div style="height: ${bottomH}px">
        <img src="img/down_pipe.png" alt="">
      </div>
      `
      li.lock = false
      li.appearTimer = setInterval(function () {
        if (!li.lock && li.offsetLeft + li.offsetWidth < flyBird.offsetLeft) {
          addScore()
          li.lock=true
        }
        li.style.left = `${li.offsetLeft - 3}px`
        if (li.offsetLeft < -70) {
          pipeBox.removeChild(li)
        }
      }, 30)


      pipeBox.appendChild(li)
    }

    function death(){
      //
      gameOver.style.display='block'
    }

    function isCrash(bird,pipe){
      return !(bird.offsetTop+bird.offsetHeight<pipe.offsetTop||
      pipe.offsetTop+pipe.offsetHeight<bird.offsetTop||
      bird.offsetLeft+bird.offsetWidth<pipe.parentElement.offsetLeft||
      pipe.parentElement.offsetLeft+pipe.offsetWidth<bird.offsetLeft)
    }

    start.onclick = function (event) {
      event.cancelBubble = true
      //BGM
      //audios[0].play()
      //start,header消失
      start.style.display = 'none'
      header.style.display = 'none'
      //flybird出现
      flyBird.style.display = 'block'
      //小鸟出现后下降
      downTimer = setInterval(birdDown, 30)
      //点击box小鸟上升
      box.onclick = function () {
        flyBird.src = 'img/up_bird0.png'
        clearInterval(downTimer)
        clearInterval(upTimer)
        speed = maxSpeed
        upTimer = setInterval(function () {
          speed = speed - .7
          if (speed <= 0) {
            clearInterval(upTimer)
            downTimer = setInterval(birdDown, 30)
          }
          flyBird.style.top = `${flyBird.offsetTop - speed}px`
        }, 30)
      }
      //出现管道
      pipeTimer = setInterval(createPipe, 3000)
      //碰撞检测
      crashTimer=setInterval(function () {
        //上下是否碰撞
        if(flyBird.offsetTop<=0||
        flyBird.offsetTop+flyBird.offsetHeight>=
        422){
          death()
        }
        //跟所有管道是否碰撞
        const lis=pipeBox.getElementsByTagName('li')
        for(li of lis){
          if(isCrash(flyBird,li.children[0])||isCrash(flyBird,li.children[1])){
            death()
          }
        }
      },30)


    }
  }

  init()
}()

标签：pipeBox,const,top,li,简易,position,制作,flybird,absolute
来源： https://www.cnblogs.com/mhyweb/p/15644621.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

简易flybird制作