一个简单用原生js实现的小游戏----FlappyBird

最新推荐文章于 2024-05-16 02:28:14 发布

weixin_30725467

最新推荐文章于 2024-05-16 02:28:14 发布

阅读量1.2k

点赞数 2

文章标签：游戏 json

原文链接：http://www.cnblogs.com/microcosm1994/p/6657933.html

版权

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

这是html结构

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>

</head>

<body>

<div id="game">
<div id="bird"></div>
</div>
<script src="flappybird.js"></script>
<script src="animate.js"></script>
</body>
</html>

　　整个案例结构并不多，下面是css样式

 body {
            margin: 0;
            padding: 0;
        }

        #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);
    }
}

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

转载于:https://www.cnblogs.com/microcosm1994/p/6657933.html

weixin_30725467

关注

2
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
一个简单用原生js实现的小游戏----FlappyBird

这是一个特别简单的用原生js实现的一个小鸟游戏，比较简单，适合新手练习这是html结构<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title></title></head><b...
复制链接

扫一扫