原生js实现Flappy Bird小游戏

这是一个特别简单的用原生js实现的一个小鸟游戏，比较简单，适合新手练习。

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();
 }
 //设置游戏开始时小鸟出现的位置
 bird.entity.style.top = bird.y + "px";
 }
}, 25);
//添加键盘事件，实现键盘上下键控制小鸟
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;
 // 动态添加管子
 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;
 //简单实现管子无缝滚动
 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);
}
//执行上面的函数方法
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);
 }
}

注释都写在了了代码里，一个简单小游戏就完成了。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。