前端案例：像素鸟小游戏（js+dom操作，完整代码，附案例素材）

目录

一、案例效果

二、实现思路

三、完整代码+详细注释

四、案例素材

一、案例效果

二、实现思路

1. 创建游戏背景板和小鸟，并分别设置相对定位与绝对定位；
2. 初始化背景图的位置；
3. 初始化小鸟的位置；
4. 设置游戏状态，游戏开始时背景和管道全部向左运动，游戏结束全部停止运动；
5. 使小鸟飞行，其实就是背景图在 X 轴方向的位置不断减小，实现小鸟向右飞行效果；
6. 设置点击事件，每点击一次小鸟在Y轴的位置减小，实现向上飞的效果；
7. 创建管道，X 方向上管道和下管道位置相同，Y 方向上上管道和下管道高度随机，但中间要空出200px；
8. 实现管道向左运动，与背景图向左操作类似，也是在 X 轴方向的位置不断减小；
9. 管道向左运动移出游戏面板最左侧时再回到原位重新执行，实现循环效果；
10. 定义上下管道的临界值，也就是上下管道自身区域；
11. 小鸟位置与上下管道位置重合(相碰撞)时游戏结束；
12. 多次调用管道创建函数，产生多组管道。

三、完整代码+详细注释

          * {      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;    }                  //获取游戏背景和小鸟  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  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  pipe.x && bird.x < pipe.x + 52 && bird.y  pipe.x && bird.x  pipe.upHeight + 200;        if (uCheck || dCheck) { //碰到上管道或下管道临界值则游戏终止          runing = false;        }      }    }, 30)  }  creatPipe(400); //产生四组管道  creatPipe(600);  creatPipe(800);  creatPipe(1000);

四、案例素材

sky.png

birds.png

pipe1.png

pipe2.png