网页小游戏《笨鸟快飞》（纯JavaScript编写）

更多原生js小项目，参见本人GitHub---Aguang5241

利用js实现以下功能：

通过点击鼠标或者键盘空格键控制小鸟向上飞

非点击状态小鸟会自由下降

当小鸟撞击边缘或者移动障碍物则游戏结束

实时记录和显示生存时间以及所得分数

源代码

html
index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="css/index.css">
  <title>StupidBird</title>
</head>
<body>
  <div id="bg">
    <p id="header">游戏规则</p>
    <br>
    <p id="rules">点击 <b>鼠标</b> 或者 <b>空格</b> 保持StupidBird不要掉下去或者碰到障碍物</p>
    <br>
    <a href="stupidbird.html">开始游戏</a>
  </div>
</body>
</html>

stupidbird.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="css/stupidBird.css">
  <script src="js/stupidBird.js"></script>
  <title>StupidBird</title>
</head>
<body>
  <div id="container">
    <div id="score"><span id="survivalTime">Time: 3.1s</span><span id="header">Stupid Bird</span><span id="scoreNum">Score: 0</span></div>
    <div id="background">
      <img src="img/birdBg.png" alt="" id="bgImg">
      <div id="bird"></div>
    </div>
  </div>
</body>
</html>

css
index.css

body {
  background-color: #deb887 ;
}
#bg {
  margin: 0 auto;
  margin-top: 100px;
  padding-top: 30px;
  width: 400px;
  height: 200px;
  background-color: #666;
  border-radius: 30px;
  text-align: center;
  color: #eee;
}
p {
  margin: 0 auto;
  width: 250px;
}
#header {
  font-size: 30px;
  font-weight: bold;
}
#rules b {
  color: yellow;
}
a {
  text-decoration: none;
  color: #e5ff00;
  padding: 10px;
  border: 1px solid #eee;
  border-radius: 10px;
  box-shadow: 3px 3px 5px #333;
  transition: 0.3s;
}
a:hover {
  color: #e9da84;
}
a:active {
  box-shadow: 1px 1px 5px #333;
}

stupidBird.css

* {
  margin: 0;
  padding: 0;
}
body {
  background-color: burlywood;
}
#container {
  margin: 0px auto;
  width: 800px;
  height: 420px;
  background-color: brown;
  border-radius: 100px;
}
#score {
  position: relative;
  width: 600px;
  height: 60px;
  background-color: #666;
  color: #fff;
  font-weight: bold;
  font-family: 'Times New Roman', Times, serif;
}
#header {
  position: absolute;
  height: 60px;
  padding: 0 30px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 40px;
  border-right: 10px solid #999;
  border-left: 10px solid #999;
}
#scoreNum {
  position: absolute;
  right: 35px;
  bottom: 5px;
  font-size: 25px;
  color: #ffd037;
}
#survivalTime {
  position: absolute;
  left: 25px;
  bottom: 5px;
  font-size: 25px;
  color: #ffd037;
}
#background {
  position: relative;
  width: 600px;
  height: 340px;
  background-color: #eee;
  overflow: hidden;
}
#bgImg {
  position: absolute;
}
#bird {
  position: absolute;
  top: 10px;
  left: 150px;
  width: 60px;
  height: 47px;
  background: url(../img/birdDown.png);
}
.block {
  position: absolute;
  right: 0;
  /* top: -300px; 此处由js随记生成，范围在（-300，-40）|| （40，300） */
  height: 340px;
  width: 60px;
  background: url(../img/block.png);
}

javascript

window.onload = function () {
  // 定义分数变量
  var scoreValue = 0;
  var survivalTimeValue = 0;

  // 获取元素
  var container = this.document.getElementById('container');
  var score = this.document.getElementById('score');
  var scoreNum = this.document.getElementById('scoreNum');
  var background = this.document.getElementById('background');
  var bird = this.document.getElementById('bird');
  var survivalTime = this.document.getElementById('survivalTime');
  var bgImg = this.document.getElementById('bgImg');

  // 获取屏幕高度
  var screenH = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;

  // 设置元素样式
  container.style.marginTop = (screenH - container.clientHeight) / 2 + 'px';
  score.style.top = (container.clientHeight - background.clientHeight - score.clientHeight) / 2 + 'px';
  score.style.left = (container.clientWidth - score.clientWidth) / 2 + 'px';
  background.style.top = (container.clientHeight - background.clientHeight - score.clientHeight) / 2 + 'px';
  background.style.left = (container.clientWidth - background.clientWidth) / 2 + 'px';

  // 获取键盘或鼠标指令
  var command;
  this.document.onkeydown = function (event) {
    event = event || window.event;
    command = event.keyCode;
  };
  this.document.onkeyup = function () {
    command = 0;
  };
  this.document.onmousedown = function () {
    command = 32;
  }
  this.document.onmouseup = function () {
    command = 0;
  }

  // 绑定键盘或鼠标指令
  var flyTimer = setInterval(function () {
    var position = bird.offsetTop;
    var speed = 3;
    var acceleration = 1.5;
    if (command == 32) {
      speed = -speed;
      acceleration = 0;
      bird.style.background = 'url(../img/birdUp.png)';
    } else {
      bird.style.background = 'url(../img/birdDown.png)';
    };
    fly(position, speed, acceleration);
  }, 25)

  // 定义小鸟的运动函数
  function fly(pos, speedValue, accelerationValue) {
    speedValue += accelerationValue;
    pos += speedValue;
    if (pos > (background.clientHeight - bird.clientHeight)) {
      pos = background.clientHeight - bird.clientHeight;
    };
    if (pos < 0) {
      pos = 0;
    };
    bird.style.top = pos + 'px';
    var currentPos = pos;
    gameEndBorder(currentPos);
  };

  // 每隔一段时间生成障碍物
  var addTimer = setInterval(function () {
    createAndMove();
  }, 3000);

  // 创建障碍并赋予其运动 
  function createAndMove() {
    var block = this.document.createElement('div');
    block.setAttribute('class', 'block');
    background.appendChild(block);
    block.style.top = randomTop() + 'px';
    move(block);
  };

  // 定义随记生成（-300，-100）|| （100，300）的函数
  function randomTop() {
    var result1 = Math.floor(Math.random() * 201) - 300;
    var result2 = Math.floor(Math.random() * 201) + 100;
    var result;
    if (Math.random() > 0.5) {
      result = result1;
    } else {
      result = result2;
    };
    return result;
  };

  // 定义移动函数
  function move(obj) {
    var pos = 0;
    var speed = 2;
    var moveTimer = setInterval(moveobj, 25);
    function moveobj() {
      pos += speed;
      if (pos > (background.clientWidth)) {
        pos = background.clientWidth
      };
      if (pos == background.clientWidth) {
        clearInterval(moveTimer);
        background.removeChild(obj);
      };
      if (pos == background.clientWidth - bird.offsetLeft) {
        scoreValue++;
        scoreNum.innerHTML = 'Score: ' + scoreValue;
      };
      obj.style.right = pos + 'px';
      if ((obj.offsetLeft < bird.offsetLeft + bird.clientWidth) && (obj.offsetLeft > bird.offsetLeft - bird.clientWidth)) {
        var currentPos = obj.offsetTop;
        gameEndCrash(currentPos)
      }
    };
  };

  // 定义背景位移函数
  // ----> 效果卡顿，默认注释
  // movebg();
  // function movebg() {
  //   var pos = 0;
  //   var speed = 2;
  //   var moveTimer = setInterval(moveobj, 25);
  //   function moveobj() {
  //     pos -= speed;
  //     if (pos < -bgImg.clientWidth + background.clientWidth) {
  //       pos = -bgImg.clientWidth + background.clientWidth
  //     };
  //     if (pos == -bgImg.clientWidth + background.clientWidth) {
  //       pos = 0;
  //     };
  //     bgImg.style.left = pos + 'px';
  //   };
  // }

  // 定义结束判断函数
  // 定义碰撞判定函数
  function gameEndCrash(position) {
    if (position < 0) {
      if (position + background.clientHeight > bird.offsetTop + bird.clientHeight) {
        gameEnd();
      };
    } else {
      if (position < bird.offsetTop + bird.clientHeight) {
        gameEnd();
      };
    };
  };
  // 定义边缘判定函数
  function gameEndBorder(position) {
    if (position == 0 || position == background.clientHeight - bird.clientHeight) {
      gameEnd();
    }
  };

  // 定义结束函数
  function gameEnd() {
    var str;
    clearInterval(survivalTimer);
    clearInterval(flyTimer);
    clearInterval(addTimer);
    str = '游戏结束!!!\n最终得分：' + scoreValue + '\n最长存活时间：' + timeValue + 's\n点击确定重新开始';
    alert(str);
    window.location.assign('index.html');
  };

  // 生存计时
  var timeValue
  var survivalTimer = setInterval(function () {
    survivalTimeValue += 0.1;
    timeValue = survivalTimeValue.toFixed(1);
    survivalTime.innerHTML = 'Time: ' + timeValue + 's';
  }, 100)
}

图片资源：
原图下载链接---GitHub---Aguang5241

网页小游戏《笨鸟快飞》（纯JavaScript编写）

源代码

猜你喜欢