用js 编写的小游戏，控制小鸟不要碰到水管，点击鼠标小鸟向上飞，水管出现随机的这是这个的简单介绍，很简单，思路最重要

简单的js 小游戏。
项目介绍：

样式：
 

<style>
    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: 26px;
        /*border-radius: 10px;*/
        /*background-color: red;*/
        position: absolute;
        top: 100px;
        left: 100px;
        background: url(images/birds.png) -8px -10px no-repeat;
    }

</style>

内容：

<div id="game">
    <div id="bird"></div>
</div>

实现：

<script>
    var game = document.getElementById("game");
    var birdEle = document.getElementById("bird");
    var gameover = false;
    var g = 1;

    var sky = {
        position: 0
    }

    var bird = {
        entity: birdEle,
        speedX: 5,
        speedY: 5,
        x: birdEle.offsetLeft,
        y: birdEle.offsetTop
    }

    function Pipe(position) {
        this.x = position;
      
        this.width = 52;
      this.upPipeY = 0;
        this.upPipeH = parseInt(Math.random() * 175) + 100;
        this.downPipeY = this.upPipeH + 200;
        this.downPipeH = 600 - this.downPipeY;

        var divUp = document.createElement("div");
      
        divUp.className = "pipeU";
        divUp.style.left = this.x + "px";
        divUp.style.top = this.upPipeY + "px";
        divUp.style.width = this.width + "px";
        divUp.style.height = this.upPipeH + "px";
        var divDown = document.createElement("div");
        divDown.className = "pipeD";
        divDown.style.left = this.x + "px";
        divDown.style.top = this.downPipeY + "px";
        divDown.style.width = this.width + "px";
        divDown.style.height = this.downPipeH + "px";
      
        game.appendChild(divUp);
        game.appendChild(divDown);

        var _this = this;
        setInterval(function () {
            _this.x -= 1;
            if (_this.x < -52) {
                _this.x = 800;
            }
         if (!gameover) {
                divUp.style.left = _this.x + "px";
                divDown.style.left = _this.x + "px";
            }
            var clsUp = (bird.x + 34 > _this.x) && (bird.x < _this.x + 52) && (bird.y < _this.upPipeH);
            var clsDown = (bird.x + 34 > _this.x) && (bird.x < _this.x + 52) && (bird.y + 26 > _this.downPipeY);
            if (clsUp || clsDown) {
                gameover = true;
            }
        }, 10)
    }

    setInterval(function () {
        if (!gameover) {
            bird.speedY = bird.speedY + g;
            bird.y = bird.y + bird.speedY;
            if (bird.y > 574) {
                bird.y = 574;
                gameover = true;
            }
            if (bird.y < 0) {
                bird.y = 0;
                gameover = true;
            }
            bird.entity.style.top = bird.y + "px";
            sky.position -= bird.speedX;
            game.style.backgroundPositionX = sky.position + "px";
        }
    }, 25)

    document.onmousedown = function () {
        bird.speedY = -10;
    }

    for (var i = 0; i < 4; i++) {
        new Pipe(400 + 800 / 4 * i);
    }
</script>

项目展示：项目展示